網(wǎng)頁(yè)性能之htmlcssjavascript
前言
html css javascript可以算是前端必須掌握的東西了，但是我們的瀏覽器是怎樣解析這些東西的呢 我們?nèi)绾翁幚韍tml css javascript這些東西來(lái)讓我們的網(wǎng)頁(yè)更加合理，在我這里做了一些實(shí)驗(yàn)，總結(jié)起來(lái)給大家看看。
最簡(jiǎn)單的頁(yè)面
<!DOCTYPE html><html>
<head>
<title>test</title>
</head>
<body>
<img src="download-button.png" alt="HTML代碼優(yōu)化 網(wǎng)頁(yè)性能 JavaScript技巧 Javascript">
</body>
</html>
我們打開(kāi)chrome的控制臺(tái)查看timeline
由上圖 可得結(jié)論
1 圖中藍(lán)色透明條標(biāo)識(shí)瀏覽器從發(fā)起請(qǐng)求到接收到服務(wù)器返回第一個(gè)字節(jié)的時(shí)間，時(shí)間還是挺長(zhǎng)的，而藍(lán)色實(shí)體條則為真正的html頁(yè)面下載的時(shí)間 還是很短的。
2 圖中紅框內(nèi)的這部分時(shí)間則表示瀏覽器從下載完成html之后開(kāi)始構(gòu)建dom，當(dāng)發(fā)現(xiàn)一個(gè)image標(biāo)簽時(shí)所花費(fèi)的時(shí)間，由此可見(jiàn)dom是順序執(zhí)行的，當(dāng)發(fā)現(xiàn)image時(shí)便立即發(fā)起請(qǐng)求，而紫色透明條則是image發(fā)起請(qǐng)求時(shí)在網(wǎng)絡(luò)傳輸時(shí)所消耗的時(shí)間。
3 圖中timeline藍(lán)色豎線所處的時(shí)間為domComplete時(shí)間，紅色豎線為dom的onload時(shí)間，由此可見(jiàn)兩種事件的差異。而瀏覽器構(gòu)建dom樹(shù)所花費(fèi)的時(shí)間可以算出即domComplete時(shí)間 減去 html下載完成后的時(shí)間大概80ms。
含有css的頁(yè)面
<!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)頁(yè)性能 JavaScript技巧 Javascript">
</body>
</html>
我們打開(kāi)chrome的控制臺(tái)查看timeline
1 在添加了外部引入css之后，并沒(méi)有發(fā)現(xiàn)什么異常，但是有一點(diǎn)指的注意，也就是紅色豎線和藍(lán)色豎線挨得更進(jìn)了，這表明domComplete時(shí)間必須等待css解析完成，也就是構(gòu)建dom樹(shù)必須等待css解析完成，這也就解釋了下圖
含有javascript和css的頁(yè)面
<!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)頁(yè)性能 JavaScript技巧 Javascript">
<script type="text/javascript" src="H5FullscreenPage.js"></script>
</body>
</html>
我們打開(kāi)chrome的控制臺(tái)查看timeline
1 圖上顯示在引入外部的js文件之后domComplete時(shí)間又被延后了，結(jié)合上面的renderTree，由于javascript代碼可能會(huì)更改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)簽就會(huì)暫時(shí)停止其他渲染行為，等待javascript下載并執(zhí)行完成才能接著往下渲染，而這個(gè)時(shí)候由于在head里面這個(gè)時(shí)候頁(yè)面是白的，如果將javascript放在頁(yè)面底部，renderTree已經(jīng)完成大部分，所以此時(shí)頁(yè)面有內(nèi)容呈現(xiàn)，即使遇到j(luò)avascript阻塞渲染，也不會(huì)有白屏出現(xiàn)。
內(nèi)嵌javascript的頁(yè)面
1 圖上可以看到，由于內(nèi)嵌了javascript，頁(yè)面上減少了一個(gè)請(qǐng)求，導(dǎo)致html文檔變大，消耗時(shí)間增多，但是domComplete時(shí)間提升的并不多。
使用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)頁(yè)性能 JavaScript技巧 Javascript">
<script async src="H5FullscreenPage.js" type ="text/javascript" ></script >
</body>
</html>
1 可以看到domComplete時(shí)間被大大提前 javascript也沒(méi)有阻塞css和body里面img元素的并行下載。
2 使用async標(biāo)識(shí)的script，瀏覽器將異步執(zhí)行這中script不會(huì)阻塞正常的dom渲染，這時(shí)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)頁(yè)性能 JavaScript技巧 Javascript">
</body>
</html>
1 沒(méi)有阻止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)頁(yè)性能 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)頁(yè)性能 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)頁(yè)性能 JavaScript技巧 Javascript">
</body>
</html>
1 沒(méi)有影響css的并行加載也沒(méi)有影響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)頁(yè)性能 JavaScript技巧 Javascript">
</body>
</html>
1 影響了css的并行加載沒(méi)有英雄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)頁(yè)性能 JavaScript技巧 Javascript">
</body>
</html>
1 影響了css和body里面img的并行加載。
綜上所述：
當(dāng)瀏覽器從服務(wù)器接收到了HTML文檔，并把HTML在內(nèi)存中轉(zhuǎn)換成DOM樹(shù)，在轉(zhuǎn)換的過(guò)程中如果發(fā)現(xiàn)某個(gè)節(jié)點(diǎn)(node)上引用了CSS或者 IMAGE，就會(huì)再發(fā)1個(gè)request去請(qǐng)求CSS或image,然后繼續(xù)執(zhí)行下面的轉(zhuǎn)換，而不需要等待request的返回，當(dāng)request返回 后，只需要把返回的內(nèi)容放入到DOM樹(shù)中對(duì)應(yīng)的位置就OK。但當(dāng)引用了JS的時(shí)候，瀏覽器發(fā)送1個(gè)js request就會(huì)一直等待該request的返回。因?yàn)闉g覽器需要1個(gè)穩(wěn)定的DOM樹(shù)結(jié)構(gòu)，而JS中很有可能有代碼直接改變了DOM樹(shù)結(jié)構(gòu)，瀏覽器為了防止出現(xiàn)JS修改DOM樹(shù)，需要重新構(gòu)建DOM樹(shù)的情況，所以 就會(huì)阻塞其他的下載和呈現(xiàn).
這里的結(jié)論：
1 在head里面盡量不要引入javascript.
2 如果要引入js 盡量將js內(nèi)嵌.
3 把內(nèi)嵌js放在所有css的前面.
后記
1 本次的測(cè)試頁(yè)面http://1.lvming6816077.sinaapp.com/testaa/demo.html
2 測(cè)試所用瀏覽器 chrome
3 參考資料：http://www.zhihu.com/question/20357435/answer/14878543
http://www.haorooms.com/post/web_xnyh_jscss
4 如果有哪里說(shuō)的不清楚或者錯(cuò)誤的地方，歡迎留言反饋。
網(wǎng)站標(biāo)題：網(wǎng)頁(yè)性能之htmlcssjavascript
URL地址：http://m.rwnh.cn/article12/cpjsdc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、定制開(kāi)發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、電子商務(wù)、外貿(mào)網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 成都外貿(mào)網(wǎng)站建設(shè)之外貿(mào)商城paypal支付如何獲取身份標(biāo)記 2022-05-30
- 廣州外貿(mào)網(wǎng)站建設(shè)的注意事項(xiàng)是什么？ 2022-12-14
- 外貿(mào)網(wǎng)站建設(shè)“四步走” 2022-06-24
- 外貿(mào)網(wǎng)站建設(shè)過(guò)程中的六大注意事項(xiàng) 2016-09-14
- 外貿(mào)網(wǎng)站建設(shè)如何做才能帶來(lái)價(jià)值 2023-03-22
- 外貿(mào)網(wǎng)站建設(shè)-外貿(mào)站用戶體驗(yàn)度表現(xiàn)在哪些方面？ 2016-11-13
- 外貿(mào)網(wǎng)站建設(shè)六大要點(diǎn)分析 2016-11-08
- 外貿(mào)網(wǎng)站建設(shè)應(yīng)著重注意的問(wèn)題 2021-01-08
- 外貿(mào)網(wǎng)站建設(shè)中的一些注意事項(xiàng) 2015-10-08
- 成都如何選擇外貿(mào)網(wǎng)站建設(shè)公司 外貿(mào)網(wǎng)站建設(shè)哪家好 2016-04-29
- 你對(duì)外貿(mào)網(wǎng)站建設(shè)了解多少？ 2022-12-10
- 成都外貿(mào)網(wǎng)站建設(shè)和英文網(wǎng)站建設(shè)有什區(qū)別？ 2022-05-30