ブラウザレンダリングの仕組み

フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ

[Keisuke69]

いつかブラウザを作ってみたいと思ってたがなかなか大変そうだな。これ書いた方って社会人2年目なの…？すご

[aox]

Faxとどう違うんですかね

[tattyu]

それにしてもHTML以外のフォーマットって出てこないもんだね。

[NOV1975]

これ、みんなのリクエストしている話とズレてる気もするが…／それはともかく、最初のバイナリとテキストの話は不要では？（文字コードはともかく、いわゆる「バイナリデータ」ではないので。）

[helldeath]

こんなにブクマついてるのにブコメへの星の少なさが珍しい。797ブクマでトップが星5個。

[xlc]

みんな「知識系」のコンテンツが好きだねえ。ある程度の技術力があるエンジニアなら調べなくても「きっとそうに違いない」となんとなく理解している内容。そして知識ではなく仕事に生かしてる。

[wazpk6no]

tridentとgeckoとblinkの違いを期待してた…

[ext3]

byteからcharへの変換を指定するcontent-typeの指定もテキストで記載されているとなると、ヘッダー受け取る前から何かしらのbyte-char変換指定が必要になると思うが、果たして最初のbyteはどうやって変換されてるんだろうか

[furuichi]

DOMの解説も後ろでしているので、冒頭部分でいきなり"DOM"と書いてある部分は「解説は後段」的な注釈いれてあると、対象読者を考えるともっとわかりやすくなると思います。

[kmaebashi]

例によってインタプリタの説明が微妙。「1行ずつ機械語に翻訳」とは直接は書いてないが、構文解釈(構文解析?)だって、ループの中で何度もするわけじゃない。

[eleven-soul]

htnl

[cartman0]

zennのコメントが酷い。間違ってると言うなら正確な記事書いてくれればいいのに。まとまってる資料他にそうそうないやろ

[ryuichi1208]

何回読んでも覚えられない。。

[tohima]

おもしろかったー

[nokazn]

簡単なレンダリングエンジンそのうち作ってみたい

[Cru]

未加工のバイトから人間が読める文字に変換ってとこで読むのやめた。base64からASCIIに変換？gzip解凍？https復号？いずれ加工されまくってるバイナリって事になるしなぁしなぁ

[kibitaki]

おっ？最近じゃあレンダリングの話なんて珍しいねぇ。よおしおじちゃんがさぼるレンダラに蹴り入れるにはとかお手軽メモリリークとかテーブルネストとかの話を・・・って違うの？あ、そう。

[ustam]

まあ基本ではあるよね。わかってないと、この先の地獄のような複雑さには対応できない。

[kareki11]

わかりやすい

[pqe]

ノードとは何でしょうか？

[nmcli]

HTMLが顔、CSSが化粧、DOMは骨格と筋肉、それをScriptで美容整形するようなイメージが2010年代までは通用したが、今はもうこれでは説明不足になってきてしまったの

[frkw2004]

スマホ用のブラウザ作る時は、読み込んでいる途中のストリームとレンダリング作業とを上手く最適化して、低速通信時でもストレスなく表示+操作できるといいなあ。処理レイヤーが違うけど。

[cantaloupe]

レンダリング 学習 素材

[rryu]

HTMLのトークンって < や </ じゃないのと思ったらHTMLのパースは巨大なステートマシンで区切りのいいところで結果をトークンとして置いていくという仕組みでやるらしい。

[Nobkz]

読んでるけど、ざっと、なんかいろいろ、混乱してそうだなー。例えば、“HTMLファイルは、「0」と「1」でできたデータになっています”、いやまぁ、そうなんだけどさ...

[aquarickn]

色使いとか最初の説明の順番とか最高やないか

[gyochan]

時間経過とそれがいつ起こるかのタイムライン（WBSちっくなヤツ）があるとありがたいなー（要求）defer属性、async属性、むにゃむにゃ…

[yoiIT]

分かりやすい

[yarumato]

“HTMLの解析　BytesからCharactersに変換　Tokensに変換　(DOM)Nodesに変換　DOMの構築　CSSの解析　CSSOMの構築”

[Shinwiki]

ぷにるとかLunascapeとかあんドーナツもこうなの？

[kiriyoke]

ブラウザの仕組みは知らなかったのでありがたい記事だった

[arebouya]

エンジニア時代に知りたかった。業務では直接使わない知識だったけど、あれば絶対一読してた。

[remix-cafe]

メモ

[mitsuok-33]

大学の講義レベルの内容が詰まった良記事。直接仕事に生きることではないんだけどね。