経緯 仕事で、フロント側のパフォーマンスチューニングをすることになりました。 当たり前ですが、フロントエンドのパフォーマンスチューニングを行うためには、ブラウザのレンダリングの仕組みについて理解する必要があります。 今回は、ブラウザのレンダリングの仕組みについて調べたことをまとめてみました。 参考 書籍 Webフロントエンド ハイパフォーマンス チューニング 記事 JavaScript 長く使える系の知識 実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか [フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう Life of a Pixel 大きく分けて、4つで構成されています。 Loading Scripting Rendering Painting Loading リソースをダウンロードして、HTMLを解釈し