<p>URLを打ち込むと、レンダリングサイクルの流れの後にサイト・アプリケーションが表示されます。</p>
<h2 id="%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%81%AF4%E3%81%A4">
<a class="header-anchor-link" href="#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%81%AF4%E3%81%A4" aria-hidden="true"></a> ブラウザのレンダリングサイクルは4つ</h2>
<p><strong>Loading　→　Scripting　→　Rendering　→　Painting</strong></p>
<h3 id="%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E5%9B%B3">
<a class="header-anchor-link" href="#%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E5%9B%B3" aria-hidden="true"></a> サイクル図</h3>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--Bn5w4aW8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1310301/cd6f1a56-65d1-63bf-9aa3-bdd7211bfcd9.png" alt="スクリーンショット 2022-02-11 9.34.12.png" loading="lazy" class="md-img"></p>
<ul>
<li>Composite Layersが終わると、ユーザーが認知できる画面が表示される。</li>
</ul>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--2e6cGNXx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1310301/4c38203a-af98-53c4-d3f0-88536058803f.png" alt="スクリーンショット 2022-02-11 14.02.19.png" loading="lazy" class="md-img"></p>
<p>上記の画像は私が理解するために日本語化したものです。</p>
<p>本記事は以上となります。</p>
<hr>
<p>書籍<br>
<a href="https://www.amazon.co.jp/Web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89-%E3%83%8F%E3%82%A4%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0-%E4%B9%85%E4%BF%9D%E7%94%B0-%E5%85%89%E5%89%87/dp/4774189677/ref=pd_sim_14_2/355-8347036-3165354?_encoding=UTF8&amp;pd_rd_i=4774189677&amp;pd_rd_r=242f1b07-5d75-484b-831f-8e3186723bd4&amp;pd_rd_w=SLj3f&amp;pd_rd_wg=efHnd&amp;pf_rd_p=51d7f721-ab31-4c99-8db8-c3f45803167a&amp;pf_rd_r=639J7G22C2SMCZT0SF5B&amp;psc=1&amp;refRID=639J7G22C2SMCZT0SF5B" target="_blank" rel="nofollow noopener noreferrer">Webフロントエンド ハイパフォーマンス チューニング</a></p>


ブラウザのレンダリングのサイクル

ブラウザのレンダリングサイクルは4つ

ブラウザのレンダリングサイクルは4つ

サイクル図

Discussion