前言

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供當(dāng)雄網(wǎng)站建設(shè)、當(dāng)雄做網(wǎng)站、當(dāng)雄網(wǎng)站設(shè)計、當(dāng)雄網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、當(dāng)雄企業(yè)網(wǎng)站模板建站服務(wù)，十余年當(dāng)雄做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

html css javascript可以算是前端必須掌握的東西了，但是我們的瀏覽器是怎樣解析這些東西的呢 我們?nèi)绾翁幚韍tml css javascript這些東西來讓我們的網(wǎng)頁更加合理，在我這里做了一些實(shí)驗(yàn)，總結(jié)起來給大家看看。

最簡單的頁面

我們打開chrome的控制臺查看timeline

由上圖 可得結(jié)論

1 圖中藍(lán)色透明條標(biāo)識瀏覽器從發(fā)起請求到接收到服務(wù)器返回第一個字節(jié)的時間，時間還是挺長的，而藍(lán)色實(shí)體條則為真正的html頁面下載的時間 還是很短的。

2 圖中紅框內(nèi)的這部分時間則表示瀏覽器從下載完成html之后開始構(gòu)建dom，當(dāng)發(fā)現(xiàn)一個image標(biāo)簽時所花費(fèi)的時間，由此可見dom是順序執(zhí)行的，當(dāng)發(fā)現(xiàn)image時便立即發(fā)起請求，而紫色透明條則是image發(fā)起請求時在網(wǎng)絡(luò)傳輸時所消耗的時間。

3 圖中timeline藍(lán)色豎線所處的時間為domComplete時間，紅色豎線為dom的onload時間，由此可見兩種事件的差異。而瀏覽器構(gòu)建dom樹所花費(fèi)的時間可以算出即domComplete時間 減去 html下載完成后的時間大概80ms。

含有css的頁面

我們打開chrome的控制臺查看timeline

1 在添加了外部引入css之后，并沒有發(fā)現(xiàn)什么異常，但是有一點(diǎn)指的注意，也就是紅色豎線和藍(lán)色豎線挨得更進(jìn)了，這表明domComplete時間必須等待css解析完成，也就是構(gòu)建dom樹必須等待css解析完成，這也就解釋了下圖

含有javascript和css的頁面

我們打開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

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前面

1 沒有阻止css的并行加載但是影響了body里面img的并行加載

外聯(lián)js在css中間

1 影響了css的并行加載和body里面img的并行加載

外聯(lián)js在css最后

1 影響了css的并行加載和body里面img的并行加載

內(nèi)嵌js在css前面

1 沒有影響css的并行加載也沒有影響body里面img的并行加載

內(nèi)嵌js在css中間

1 影響了css的并行加載沒有英雄body里面img的并行加載

內(nèi)嵌js在css最后

1 影響了css和body里面img的并行加載。

綜上所述：

當(dāng)瀏覽器從服務(wù)器接收到了HTML文檔，并把HTML在內(nèi)存中轉(zhuǎn)換成DOM樹，在轉(zhuǎn)換的過程中如果發(fā)現(xiàn)某個節(jié)點(diǎn)(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的返回。因?yàn)闉g覽器需要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 如果有哪里說的不清楚或者錯誤的地方，歡迎留言反饋。

名稱欄目：網(wǎng)頁性能之htmlcssjavascript
本文來源：http://weahome.cn/article/cpjsdc.html