Help us understand the problem. What is going on with this article?

ブラウザのレンダリングの流れ(個人的解釈)

More than 1 year has passed since last update.

本を読んでレンダリングの大まかな流れを勉強しました。

レンダリングの大まかな流れは以下で記載されているものと同じです。
https://qiita.com/mikimhk/items/7cfbd6c94d0f3d7aa51f#3-rendering
(リンクにて参考にさせていただきます。)

個人的解釈

この
Loading⇒Scripting⇒Rendering⇒Painting(これらをまとめてフレームと呼ぶ)
を読んだときなるほどなぁと思っていたのですが、こんなにはっきりと段階が分かれていたら

  • Paintingが一つしかなければ全てが同時に画面上に描画されることになる。
  • </body>の直前に重い外部javascriptを読み込ませるとDOM構築完了イベントが発生する前に画面描画が始まっているケースもある。
  • スクリプトの読み込みなんてヘッダ内でも</body>の直前に置いたって差が出るわけがない。

というようなことを思いました。

参考
「script要素の記述位置によってページの表示速度が変わる」
https://allabout.co.jp/gm/gc/380498/2/

そこでたどり着いた考え方はこの「フレーム」が複数実行されていくという考え方です。
更に、Loading⇒Rendering⇒PaintingというScriptingを切り離した考え方でも良いかもしれません。

CSSでdisplay:none;を設定していても、初期描画でチラっと見える現象等(FOUC)もありますが、これは描画後にcssを当てているようなのでこれに関しても

Loading⇒Rendering⇒Painting

の1つの流れでは説明できない

①Loading⇒Rendering⇒Painting(HTMLリソースを上からDOMに解釈して、描画)
②Loading⇒Rendering⇒Painting(CSSリソースをロード後解釈して、適用)

と考えれば説明できなくもない

追記:最近のブラウザではlinkでCSSを設定していれば読み込んで解釈するまで描画がブロックされるようなのでFOUCは起こらないみたいです。

(本にはScriptingの説明にDOM操作によりRenderingフェーズやPaintingフェーズを引き起こすがあります。外部のリソースを取得するとLoadingフェーズを引き起こしますとありました)

スクリプトを入れたhtmlで色々試してみましたが、結局上から読んでいって描画しているという理解で問題なさそうです。

自分自身よくわかっていませんので、コメントいただけるとありがたいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした