瀏覽器渲染過程

時間 2019-11-13 標籤瀏覽器渲染過程

最近工做閒下來了，恰巧最近在研究前端性能優化相關的問題。讀到不少書籍、以及之前公司分享的一些相關資料。這裏將它們總結起來，以便你們學習。咱們的目標是：沒有白屏，對！沒有白屏。html

如下是在同一臺機器，相同網絡環境的一個測試：前端

你們都知道，瀏覽器產生白屏。是由於UI在渲染過程當中被阻塞了。那麼問題來了，是什麼阻塞了它呢？web

渲染過程瀏覽器

i.渲染是以流式進行的。不須要獲得所有數據再渲染，如：HTML文件下載多少就渲染多少；緩存

ii.大多數HTML外部資源都不會阻塞UI線程，如：CSS、IMG、Flash等，沒有load完畢的圖片會留一個空位置在那裏；性能優化

iii.大多數的HTML元素都是渲染出DOM便馬上顯示的；網絡

iiii.HTML從上到下解析，該過程不可逆（參考 i）。但會出現reflow（重排） and repaint（重繪）。前端性能

咱們訪問一個站點的時候瀏覽器會先檢查自身緩存，在沒有緩存的狀況下，瀏覽器會這樣去渲染咱們的頁面，如下面的代碼爲例：性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myTitle</title>
</head>
<body>
    <div id="myDiv">
        <script>
            $.write('寫點什麼。');
        </script>
    </div>
</body>
</html>

這個時候，瀏覽器會暫停渲染HTML，將script交給js引擎編譯執行。js會建立textNode:學習

爲了更直觀的表現整個過程，我畫了這麼一張ppt，但願能幫助您理解：

HTML解析是這樣一個循環的過程，那麼留個問題給你們：若是JavaScript不阻塞UI線程會發生什麼呢？你們能夠用以下代碼測試一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myTitle</title>
</head>
<body>
    <div id="myDiv">
        <script>
            window.setTimeout(function(){
                $.write('寫點什麼。');
            }, 0);
        </script>
    </div>
</body>
</html>

問題很嚴重有木有！！！！so....咱們的結論是：由於JavaScript有改變UI的能力，因此它必須UI渲染線程。

瞭解瀏覽器渲染頁面的過程，對咱們作性能優化很是重要，固然，咱們要作好性能優化須要瞭解的遠不止這些，在接下來的章節當中我會陸續更新更多關於web性能相關的文章，幫助你們瞭解它的工做模式。固然，本文描述還不夠詳盡，因此歡迎你們對本文內容勘誤、補充。以避免誤人子弟。同時，有任何不懂的，也歡迎您在評論中提出，我將盡力回覆你們，與你們一塊兒討論、一塊兒成長。

瀏覽器下載腳本過程

chromium 是這樣解析的：

個別步驟解釋：

MainResourceLoader::loadNow : 下載文件

PageGroupLoadDeferrer deferrer(m_page ,true) : 將腳本加入page流