最近工作閑下來了，恰巧最近在研究前端性能優化相關的問題。讀到很多書籍、以及以前公司分享的一些相關資料。這里將它們總結起來，以便大家學習。我們的目標是：沒有白屏，對！沒有白屏。
以下是在同一台機器，相同網絡環境的一個測試：
大家都知道，瀏覽器產生白屏。是因為UI在渲染過程中被阻塞了。那么問題來了，是什么阻塞了它呢？
渲染過程
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流