漸進渲染是如何工作的？

Question

首先我要解釋我認爲漸進式渲染是如何工作的，所以如果我錯了或丟失了某些東西，可以糾正我。

當您請求一個頁面時，瀏覽器儘可能快地顯示元素，即使它沒有收到所有的文檔，但爲此它需要所有樣式已經被下載，對吧？我的問題是： 瀏覽器如何知道沒有任何樣式需要提取？

我能想到的唯一方法是獲取整個文檔並解析它，但是漸進式渲染將毫無意義，因爲所有元素都已經存在！

謝謝。

Answer 1

當您在頭部加載CSS時，瀏覽器將在顯示頁面中的元素之前下載該CSS。這樣你就不會得到FOUC（在大多數情況下）。

如果您在其他地方加載了CSS，則完全可能在加載CSS之前顯示您的頁面。

瀏覽器如何知道沒有樣式需要被提取？

瀏覽器解析文檔，並知道還有什麼可下載。它會將CSS添加到頁面，並在稍後加載更多CSS時根據需要重新繪製頁面。