0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

レンダリングの細かな説明

Posted at

parse,style,layout,paint,compositeはローディング、スクリプティング、レンダリング、ペインディングのどこで行われていますか?
🌐 この5つのステップ(parse, style, layout, paint, composite)は、ブラウザがWebページを描画する際の内部処理の流れを表しています。それぞれがどのフェーズに属するかを以下に整理しました:

ステップ フェーズ 説明
parse ローディング HTML/CSSなどのソースコードを読み込んで構文解析し、DOM/CSSOMを構築する
style スクリプティング CSSルールを解析して要素にスタイルを適用し、スタイル情報(Computed Style)を計算する
layout レンダリング 各要素の位置やサイズを決定し、レイアウトツリーを構築する
paint ペインティング 各要素をピクセル情報に変換し、描画指示(Display List)を生成する
composite ペインティング(後半) レイヤーを合成して最終的なビジュアルを画面に出力する
🧠 要点をまとめると…

ローディング → ソースを読み込んで解析(parse)

スクリプティング → スタイルの計算(style)

レンダリング → 配置決定(layout)

ペインティング → 描画内容をピクセルに変換(paint)、その後に合成(composite)

この流れはパフォーマンス最適化やバグ修正にも役立つ知識ですね。もしDevToolsやLighthouseでパフォーマンスの分析をしているなら、これらの各工程がどこで時間を使っているかを確認するのにも役立ちますよ。

もっと深堀りしてみたい段階はありますか?たとえば、layoutが頻繁に再計算されるケースとか。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?