HTML加载顺序
完成了若干個基于WEB的項目, 也了解了從前端的js,css,html到后端python/php等, 二者如何交互, 最終瀏覽器如何執行, 這些在心里也已經很明確了. 不過一個問題一直縈繞在心中,那就是:
一個html有若干個外部資源(js,css,flash,image等),這些請求是何時下載的,又是何時執行的?
不清楚,不明白, 所以也就不知道我寫的js究竟何時執行的, 也就不知道為什么很多高性能的建議是要將js置于一個 html底端的</body>之前.
如果你也不是很明確,請來和我一起學習吧.
具體分析
首先我們來看一個示例的html頁面,如下:
<html><head><script?src="/static/jquery.js"type="text/javascript"></script><scriptsrc="/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;"/><scriptsrc="/static/kkk.js"type="text/javascript"></script></body></html>它有如下幾種資源:
總共是6個http request.
在分析之前,我們來看看firefox對這個html請求的結果, 如下圖:
?
我們再看看chrome(linux)對這個html的請求結果,如下圖(圖比較小,可以在新標簽中打開):
我們先分析下,然后再去說明這2種請求結果的不同.
請求分析
首先說明下面這些描述主要是基于自己google, 咨詢朋友和在?SO?和?IRC?上獲得, 我并沒有閱讀相關的spec(當然我很想閱讀,如果知道相關spec的朋友請留言謝謝), 不能保證其正確性和準確性,風險自擔。
基于相關的調研, 我的理解為, 對于一個URI請求, 瀏覽器會按照下面的請求和執行順序進行:
一個請求可以同時有多少個connection(線程), 取決于不同的瀏覽器,?http1.1?標準中規定的是對于同一個server/proxy(也就是hostname) 不超過2個connection,
但是在實際的瀏覽器實現中, 具體如下:
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
所以請根據這個實際情況來思考上面的下載順序.
然后我們看執行順序(js的執行, css的應用等):
在實際的瀏覽器中, 一般遇到<script>標簽會自動block住其它線程的下載, 如firefox, 這也是為什么 在web開發中常常推薦將<script>標簽置于</body>之前的原因.
但是并非所有的瀏覽器都block, 如chrome并不會block住其它的connection. 所以具體的load還需要參考具體的瀏覽器實現.
建議,?將<script></script>標簽置于</body>之前, 這樣可以在大多數情況下都得到較好的性能.
對Firefox和chrome的請求分析
我們回過頭來看下上面2個圖中的請求響應圖.
Firefox
有如下特征:
chrome
有如下特征:
你可能會奇怪如果js可以并行下載,那么可能位于DOM下面的代碼會先執行, 首先可以肯定的是?即使下面的js先完成下載,也不會影響到整體的從上到下的執行順序,瀏覽器會維護這種順序的關系, chrome的這種方式也是未來瀏覽器的一種趨勢, 而這也是為什么chrome能夠更快的原因之一.
有意思的一個插曲
在提出這個問題后,我便多方入手, 向朋友咨詢, 向?SO?提出問題, 甚至去Firefox的?IRC?進行了提問,
回答的朋友還都是很耐心的, 不過, 他們大多向我問了一個問題?做WEB開發, 你為什么要了解這些細節.
對于這樣的問題,我還是比較納悶的, 我一直認為?一個好的程序員,不僅需要知道how, 還要知道what, 甚至why,
知道how,只說明你是一個合格的碼工,只會簡單地使用別人提供的東西來開發.
知道what, 說明你開始去關注背后是如何實現的, 隨著時間推進, 這時候你會逐漸成為一個有經驗的程序員.
知道why, 說明你開始向hacker的路邁進了, 開始逐步走向了技術牛人的路線了,長此以往你會有很大的成長的.?
讓我們去享受細節,本質的快樂吧,而不是只停留在我會的層面那么表面的快樂.
結論
瀏覽器是各大廠商搶占的市場,無論是自主(Firefox, chrome, IE, Opera, Safari)或者基于一定的內核(遨游, 搜狗, TT, 360等), 但是可以肯定的是瀏覽器會更加強大, 遵守規范, 更快的響應等, 而我們WEB程序員的日子也會好過很多.
本文部分細節還是比較含糊, 后面可能還會在寫一篇文章來進行更徹底,清晰的說明.
?
總結
- 上一篇： GET和POST的真正区别
- 下一篇： 恒洁智能马桶在不通电的情况下总是按了以后