我們打開chrome的控制臺查看timeline
由上圖 可得結(jié)論
1 圖中藍(lán)色透明條標(biāo)識瀏覽器從發(fā)起請求到接收到服務(wù)器返回第一個字節(jié)的時間，時間還是挺長的，而藍(lán)色實體條則為真正的html頁面下載的時間 還是很短的。
2 圖中紅框內(nèi)的這部分時間則表示瀏覽器從下載完成html之后開始構(gòu)建dom，當(dāng)發(fā)現(xiàn)一個image標(biāo)簽時所花費的時間，由此可見dom是順序執(zhí)行的，當(dāng)發(fā)現(xiàn)image時便立即發(fā)起請求，而紫色透明條則是image發(fā)起請求時在網(wǎng)絡(luò)傳輸時所消耗的時間。
3 圖中timeline藍(lán)色豎線所處的時間為domComplete時間，紅色豎線為dom的onload時間，由此可見兩種事件的差異。而瀏覽器構(gòu)建dom樹所花費的時間可以算出即domComplete時間 減去 html下載完成后的時間大概80ms。
含有css的頁面
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
</head>
<body>
<img src="download-button.png" alt="HTML代碼優(yōu)化 網(wǎng)頁性能 JavaScript技巧 Javascript">
</body>
</html>
我們打開chrome的控制臺查看timeline
1 在添加了外部引入css之后，并沒有發(fā)現(xiàn)什么異常，但是有一點指的注意，也就是紅色豎線和藍(lán)色豎線挨得更進(jìn)了，這表明domComplete時間必須等待css解析完成，也就是構(gòu)建dom樹必須等待css解析完成，這也就解釋了下圖
含有javascript和css的頁面
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
</head>
<body>
<img src="download-button.png" alt="HTML代碼優(yōu)化 網(wǎng)頁性能 JavaScript技巧 Javascript">
<script type="text/javascript" src="H5FullscreenPage.js"></script>
</body>
</html>
我們打開chrome的控制臺查看timeline
1 圖上顯示在引入外部的js文件之后domComplete時間又被延后了，結(jié)合上面的renderTree，由于javascript代碼可能會更改css屬性或者是dom結(jié)構(gòu)，所以在形成renderTree之前必須等待javascript解析完成才能接著構(gòu)建renderTree。
2 將javascript放在head內(nèi)和body底部的區(qū)別也在于此，放在head里面，由于瀏覽器發(fā)現(xiàn)head里面有javascript標(biāo)簽就會暫時停止其他渲染行為，等待javascript下載并執(zhí)行完成才能接著往下渲染，而這個時候由于在head里面這個時候頁面是白的，如果將javascript放在頁面底部，renderTree已經(jīng)完成大部分，所以此時頁面有內(nèi)容呈現(xiàn)，即使遇到j(luò)avascript阻塞渲染，也不會有白屏出現(xiàn)。
內(nèi)嵌javascript的頁面
1 圖上可以看到，由于內(nèi)嵌了javascript，頁面上減少了一個請求，導(dǎo)致html文檔變大，消耗時間增多，但是domComplete時間提升的并不多。
使用async的javascript
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
</head>
<body>
<img src="download-button.png" alt="HTML代碼優(yōu)化 網(wǎng)頁性能 JavaScript技巧 Javascript">
<script async src="H5FullscreenPage.js" type ="text/javascript" ></script >
</body>
</html>
1 可以看到domComplete時間被大大提前 javascript也沒有阻塞css和body里面img元素的并行下載。
2 使用async標(biāo)識的script，瀏覽器將異步執(zhí)行這中script不會阻塞正常的dom渲染，這時html5所支持的屬性，另外defer也可以達(dá)到這種效果。
head里面js和css加載的關(guān)系
外聯(lián)js在css前面
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="H5FullscreenPage.js" type ="text/javascript" ></script >
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
</head>
<body>
<img src="download-button.png" alt="HTML代碼優(yōu)化 網(wǎng)頁性能 JavaScript技巧 Javascript">
</body>
</html>
1 沒有阻止css的并行加載但是影響了body里面img的并行加載
外聯(lián)js在css中間
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<script src="H5FullscreenPage.js" type ="text/javascript" ></script >
<link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
</head>
<body>
<img src="download-button.png" alt="HTML代碼優(yōu)化 網(wǎng)頁性能 JavaScript技巧 Javascript">
</body>
</html>
1 影響了css的并行加載和body里面img的并行加載
外聯(lián)js在css最后
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
<script src="H5FullscreenPage.js" type ="text/javascript" ></script >
</head>
<body>
<img src="download-button.png" alt="HTML代碼優(yōu)化 網(wǎng)頁性能 JavaScript技巧 Javascript">
</body>
</html>
1 影響了css的并行加載和body里面img的并行加載
內(nèi)嵌js在css前面
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type ="text/javascript" >
var f = 1;
f ;
</script >
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
</head>
<body>
<img src="download-button.png" alt="HTML代碼優(yōu)化 網(wǎng)頁性能 JavaScript技巧 Javascript">
</body>
</html>
1 沒有影響css的并行加載也沒有影響body里面img的并行加載
內(nèi)嵌js在css中間
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<script type ="text/javascript" >
var f = 1;
f ;
</script >
<link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
</head>
<body>
<img src="download-button.png" alt="HTML代碼優(yōu)化 網(wǎng)頁性能 JavaScript技巧 Javascript">
</body>
</html>
1 影響了css的并行加載沒有英雄body里面img的并行加載
內(nèi)嵌js在css最后
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
<script type ="text/javascript" >
var f = 1;
f ;
</script >
</head>
<body>
<img src="download-button.png" alt="HTML代碼優(yōu)化 網(wǎng)頁性能 JavaScript技巧 Javascript">
</body>
</html>
1 影響了css和body里面img的并行加載。
綜上所述：
當(dāng)瀏覽器從服務(wù)器接收到了HTML文檔，并把HTML在內(nèi)存中轉(zhuǎn)換成DOM樹，在轉(zhuǎn)換的過程中如果發(fā)現(xiàn)某個節(jié)點(node)上引用了CSS或者 IMAGE，就會再發(fā)1個request去請求CSS或image,然后繼續(xù)執(zhí)行下面的轉(zhuǎn)換，而不需要等待request的返回，當(dāng)request返回 后，只需要把返回的內(nèi)容放入到DOM樹中對應(yīng)的位置就OK。但當(dāng)引用了JS的時候，瀏覽器發(fā)送1個js request就會一直等待該request的返回。因為瀏覽器需要1個穩(wěn)定的DOM樹結(jié)構(gòu)，而JS中很有可能有代碼直接改變了DOM樹結(jié)構(gòu)，瀏覽器為了防止出現(xiàn)JS修改DOM樹，需要重新構(gòu)建DOM樹的情況，所以 就會阻塞其他的下載和呈現(xiàn).
這里的結(jié)論：
1 在head里面盡量不要引入javascript.
2 如果要引入js 盡量將js內(nèi)嵌.
3 把內(nèi)嵌js放在所有css的前面.
后記
1 本次的測試頁面http://1.lvming6816077.sinaapp.com/testaa/demo.html
2 測試所用瀏覽器 chrome
3 參考資料：http://www.zhihu.com/question/20357435/answer/14878543
http://www.haorooms.com/post/web_xnyh_jscss
4 如果有哪里說的不清楚或者錯誤的地方，歡迎留言反饋。
