Webエンジニアが知っておくべきブラウザレンダリングの仕組み | tataneのうたたねWebサイトの構築を考える上で、ブラウザがどのようにしてレンダリングを行なっているかを理解することは重要です。 ブラウザレンダリングの流れを把握することで、自分の書いたCSSやJavaScriptがどのように読み込まれ、解釈されるかが理解できるようになります。 今回は普段デザインやコーディングをするときはなかなか意識しづらいレンダリングエンジンの流れを見ていきます。 レンダリングの流れ ブラウザのレンダリングは上図のような流れで行われます。 Loading, Scripting, Rendering, Paintingの４つの工程からなり、最終的に画面に描画されるまでをフレームと呼びます。 フレーム内の処理を詳しく見るとDownload, Parse, Scripting, Calculate Style, Layout, Paint, Rasterize, Composite Layer
