你真的知道一个HTML及资源是如何load的吗(了解各个部分是何时下载和执行的)
你真的知道一個(gè)HTML及資源是如何load的嗎(了解各個(gè)部分是何時(shí)下載和執(zhí)行的)
2009-12-03 01:09 by Tower Joo, 3741 visits, 網(wǎng)摘, 收藏, 編輯你真的知道一個(gè)HTML及資源是如何load的嗎(了解各個(gè)部分是何時(shí)下載和執(zhí)行的)
本博客所有內(nèi)容采用 Creative Commons Licenses 許可使用. 引用本內(nèi)容時(shí)，請(qǐng)保留 朱濤, 出處 ，并且 非商業(yè) .
點(diǎn)擊 訂閱 來訂閱本博客.(推薦使用 google reader, 如果你的瀏覽器不支持直接訂閱,請(qǐng)直接在 google reader 中手動(dòng)添加).
點(diǎn)擊 下載pdf閱讀 (如果瀏覽器不支持直接打開,請(qǐng)點(diǎn)擊右鍵另存)
摘要
本文主要介紹瀏覽器請(qǐng)求一個(gè)URI后, 相應(yīng)的html及其包含的外部資源(如js/css/image/flash)的下載順序及其執(zhí)行順序.
在文中會(huì)有一個(gè)具體的例子來說明.
Contents
- 摘要
- 引入
- 具體分析
- 請(qǐng)求分析
- 對(duì)Firefox和chrome的請(qǐng)求分析
- Firefox
- chrome
- 有意思的一個(gè)插曲
- 結(jié)論
- 后記
- 參考資料
- 本文的源碼
引入
完成了若干個(gè)基于WEB的項(xiàng)目, 也了解了從前端的js,css,html到后端python/php等, 二者如何交互, 最終瀏覽器如何執(zhí)行, 這些在心里也已經(jīng)很明確了. 不過一個(gè)問題一直縈繞在心中,那就是:
一個(gè)html有若干個(gè)外部資源(js,css,flash,image等),這些請(qǐng)求是何時(shí)下載的,又是何時(shí)執(zhí)行的?
不清楚,不明白, 所以也就不知道我寫的js究竟何時(shí)執(zhí)行的, 也就不知道為什么很多高性能的建議是要將js置于一個(gè) html底端的</body>之前.
如果你也不是很明確,請(qǐng)來和我一起學(xué)習(xí)吧.
具體分析
首先我們來看一個(gè)示例的html頁面,如下:
<html><head><script src="/static/jquery.js" type="text/javascript"></script><script src="/static/abc.js" type="text/javascript"></script><link rel="stylesheets" type="text/css" href="/static/abc.css"></link><script>$(document).ready(function(){$("#img").attr("src", "/static/kkk.png");});</script></head><body><div><img id="img" src="/static/abc.jpg" style="width:400px;height:300px;"/><script src="/static/kkk.js" type="text/javascript"></script></body> </html>它有如下幾種資源:
總共是6個(gè)http request.
在分析之前,我們來看看firefox對(duì)這個(gè)html請(qǐng)求的結(jié)果, 如下圖:
我們?cè)倏纯碿hrome(linux)對(duì)這個(gè)html的請(qǐng)求結(jié)果,如下圖(圖比較小,可以在新標(biāo)簽中打開):
我們先分析下,然后再去說明這2種請(qǐng)求結(jié)果的不同.
請(qǐng)求分析
首先說明下面這些描述主要是基于自己google, 咨詢朋友和在 SO 和 IRC 上獲得, 我并沒有閱讀相關(guān)的spec(當(dāng)然我很想閱讀,如果知道相關(guān)spec的朋友請(qǐng)留言謝謝), 不能保證其正確性和準(zhǔn)確性,風(fēng)險(xiǎn)自擔(dān) :D.
基于相關(guān)的調(diào)研, 我的理解為, 對(duì)于一個(gè)URI請(qǐng)求, 瀏覽器會(huì)按照下面的請(qǐng)求和執(zhí)行順序進(jìn)行:
一個(gè)請(qǐng)求可以同時(shí)有多少個(gè)connection(線程), 取決于不同的瀏覽器, http1.1 標(biāo)準(zhǔn)中規(guī)定的是對(duì)于同一個(gè)server/proxy(也就是hostname) 不超過2個(gè)connection, 但是在實(shí)際的瀏覽器實(shí)現(xiàn)中, 具體如下:
Firefox 2: 2 Firefox 3: 6 Opera 9.26: 4 Opera 9.5 beta: 4 Safari 3.0.4 Mac/Windows: 4 IE 7: 2 IE 8: 6所以請(qǐng)根據(jù)這個(gè)實(shí)際情況來思考上面的下載順序.
然后我們看執(zhí)行順序(js的執(zhí)行, css的應(yīng)用等):
在實(shí)際的瀏覽器中, 一般遇到<script>標(biāo)簽會(huì)自動(dòng)block住其它線程的下載, 如firefox, 這也是為什么 在web開發(fā)中常常推薦將<script>標(biāo)簽置于</body>之前的原因.
但是并非所有的瀏覽器都block, 如chrome并不會(huì)block住其它的connection. 所以具體的load還需要參考具體的瀏覽器實(shí)現(xiàn).
建議, 將<script></script>標(biāo)簽置于</body>之前, 這樣可以在大多數(shù)情況下都得到較好的性能.
對(duì)Firefox和chrome的請(qǐng)求分析
我們回過頭來看下上面2個(gè)圖中的請(qǐng)求響應(yīng)圖.
Firefox
有如下特征:
chrome
有如下特征:
你可能會(huì)奇怪如果js可以并行下載,那么可能位于DOM下面的代碼會(huì)先執(zhí)行, 首先可以肯定的是 即使下面的js先完成下載,也不會(huì)影響到整體的從上到下的執(zhí)行順序,瀏覽器會(huì)維護(hù)這種順序的關(guān)系, chrome的這種方式也是未來瀏覽器的一種趨勢(shì), 而這也是為什么chrome能夠更快的原因之一.
有意思的一個(gè)插曲
在提出這個(gè)問題后,我便多方入手, 向朋友咨詢, 向 SO 提出問題, 甚至去Firefox的 IRC 進(jìn)行了提問,
回答的朋友還都是很耐心的, 不過, 他們大多向我問了一個(gè)問題 做WEB開發(fā), 你為什么要了解這些細(xì)節(jié).
對(duì)于這樣的問題,我還是比較納悶的, 我一直認(rèn)為 一個(gè)好的程序員,不僅需要知道how, 還要知道what, 甚至why,
知道how,只說明你是一個(gè)合格的碼工,只會(huì)簡單地使用別人提供的東西來開發(fā).
知道what, 說明你開始去關(guān)注背后是如何實(shí)現(xiàn)的, 隨著時(shí)間推進(jìn), 這時(shí)候你會(huì)逐漸成為一個(gè)有經(jīng)驗(yàn)的程序員.
知道why, 說明你開始向hacker的路邁進(jìn)了, 開始逐步走向了技術(shù)牛人的路線了,長此以往你會(huì)有很大的成長的. 參考 How To Become A Hacker.
讓我們?nèi)ハ硎芗?xì)節(jié),本質(zhì)的快樂吧,而不是只停留在我會(huì)的層面那么表面的快樂.
結(jié)論
瀏覽器是各大廠商搶占的市場,無論是自主(Firefox, chrome, IE, Opera, Safari)或者基于一定的內(nèi)核(遨游, 搜狗, TT, 360等), 但是可以肯定的是瀏覽器會(huì)更加強(qiáng)大, 遵守規(guī)范, 更快的響應(yīng)等, 而我們WEB程序員的日子也會(huì)好過很多.
本文部分細(xì)節(jié)還是比較含糊, 后面可能還會(huì)在寫一篇文章來進(jìn)行更徹底,清晰的說明.
歡迎討論.
后記
這次是不惜血本了, 之前積累了快400的 SO reputation score, 一下壓出去了150個(gè)來尋找最滿意的答案.
具體大家可以參考:
Load and execution sequence of a web page?
帖子中有較詳細(xì)的回答,可以作為參考.
參考資料
本文的源碼
本文的rst源碼鏈接在 這里 .
點(diǎn)擊 下載pdf閱讀 (如果瀏覽器不支持直接打開,請(qǐng)點(diǎn)擊右鍵另存)
轉(zhuǎn)載于:https://www.cnblogs.com/China-Dragon/archive/2009/12/07/1618755.html
總結(jié)
以上是生活随笔為你收集整理的你真的知道一个HTML及资源是如何load的吗(了解各个部分是何时下载和执行的)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： B站莫烦Python基础学习笔记
- 下一篇： scratch---植物大战僵尸游戏实现