從第一篇講到現在，相信各位對於瀏覽器的運作有更深的認識了吧？前面之所以講這麼多瀏覽器的運作原理，就是在為了這一篇文章鋪路。
什麼是 Critical rendering path ？ 簡單定義如下：在使用者可以看到網站呈現結果之前，瀏覽器所需經過之所有與 Rendering 至關重要的過程，便稱作所謂的 Critical rendering path。
知道定義之後，再讓我們認識幾個名詞以方便溝通：
我們再以前篇文章的 HTML Document 為例，不過增加了一張圖片：
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="scripta.js" />
<script src="scriptb.js" />
<p>Hello this is a test page.</p>
<img src="test.jpg" />
假設：
那麼請問哪些為 Critical Resource 呢？ 另外假設往返 server 的時間為 200ms ，而 Server 回覆 HTML Document 所需的時間為 150ms ，回覆其他檔案皆為 15ms，Critical Path Length（亦即抓取所有 Critical Resource 所需花費的時間）為何？而 Critical Bytes 大小又是多少呢？
解答：
為什麼我們要談到 Critical rendering path 呢？因為它是效能優化的核心概念，所有效能優化 Tips 基本上都是以此概念為核心發展出來的。我們調校效能時，最主要就是關注於降低 Critical Path Length 以及減少 Critical Bytes 這兩個部分。
回覆其他檔案皆為 15ms，Critical Path Length（亦即抓取所有 Critical Resource 所需花費的時間）為何？而 Critical Bytes 大小又是多少呢？
解答：
====================================
以上這一段應該是15ms + 200 ms吧, 板主你前頭寫一個檔案需15ms呀, 對嗎?
回覆其他檔案皆為 15ms，Critical Path Length（亦即抓取所有 Critical Resource 所需花費的時間）為何？而 Critical Bytes 大小又是多少呢？
解答：
====================================
以上這一段應該是15ms + 200 ms吧, 板主你前頭寫一個檔案需15ms呀, 對嗎?
回覆其他檔案皆為 15ms，Critical Path Length（亦即抓取所有 Critical Resource 所需花費的時間）為何？而 Critical Bytes 大小又是多少呢？
解答：
====================================
以上這一段應該是15ms + 200 ms吧, 板主你前頭寫一個檔案需15ms呀, 對嗎?
回覆其他檔案皆為 15ms，Critical Path Length（亦即抓取所有 Critical Resource 所需花費的時間）為何？而 Critical Bytes 大小又是多少呢？
解答：
====================================
以上這一段應該是15ms + 200 ms吧, 板主你前頭寫一個檔案需15ms呀, 對嗎?
回覆其他檔案皆為 15ms，Critical Path Length（亦即抓取所有 Critical Resource 所需花費的時間）為何？而 Critical Bytes 大小又是多少呢？
解答：
====================================
以上這一段應該是15ms + 200 ms吧, 板主你前頭寫一個檔案需15ms呀, 對嗎?
回覆其他檔案皆為 15ms，Critical Path Length（亦即抓取所有 Critical Resource 所需花費的時間）為何？而 Critical Bytes 大小又是多少呢？
解答：
====================================
以上這一段應該是15ms + 200 ms吧, 板主你前頭寫一個檔案需15ms呀, 對嗎?
回覆其他檔案皆為 15ms，Critical Path Length（亦即抓取所有 Critical Resource 所需花費的時間）為何？而 Critical Bytes 大小又是多少呢？
解答：
====================================
以上這一段應該是15ms + 200 ms吧, 板主你前頭寫一個檔案需15ms呀, 對嗎?
回覆其他檔案皆為 15ms，Critical Path Length（亦即抓取所有 Critical Resource 所需花費的時間）為何？而 Critical Bytes 大小又是多少呢？
解答：
====================================
以上這一段應該是15ms + 200 ms吧, 板主你前頭寫一個檔案需15ms呀, 對嗎?
iThome鐵人賽
看影片追技術