欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML資源是怎么加載的

小編給大家分享一下HTML資源是怎么加載的，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

和龍ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

引入

完成了若干個(gè)基于WEB的項(xiàng)目, 也了解了從前端的js,css,html到后端python/php等, 二者如何交互, 最終瀏覽器如何執(zhí)行, 這些在心里也已經(jīng)很明確了. 不過一個(gè)問題一直縈繞在心中,那就是:

一個(gè)html有若干個(gè)外部資源(js,css,flash,image等),這些請求是何時(shí)下載的,又是何時(shí)執(zhí)行的?

不清楚,不明白, 所以也就不知道我寫的js究竟何時(shí)執(zhí)行的, 也就不知道為什么很多高性能的建議是要將js置于一個(gè) html底端的</body>之前.

如果你也不是很明確,請來和我一起學(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>

它有如下幾種資源:

  1. 3個(gè)外部js文件,1個(gè)inline js代碼

  2. 1個(gè)外部css文件, 1個(gè)inline css代碼

  3. 1個(gè)image文件,及1個(gè)js請求的image

總共是6個(gè)http request.

在分析之前,我們來看看firefox對(duì)這個(gè)html請求的結(jié)果, 如下圖:

HTML資源是怎么加載的

我們再看看chrome(linux)對(duì)這個(gè)html的請求結(jié)果,如下圖(圖比較小,可以在新標(biāo)簽中打開):

HTML資源是怎么加載的

我們先分析下,然后再去說明這2種請求結(jié)果的不同.

請求分析

首先說明下面這些描述主要是基于自己google, 咨詢朋友和在 SO 和 IRC 上獲得, 我并沒有閱讀相關(guān)的spec(當(dāng)然我很想閱讀,如果知道相關(guān)spec的朋友請留言謝謝), 不能保證其正確性和準(zhǔn)確性,風(fēng)險(xiǎn)自擔(dān) :D.

基于相關(guān)的調(diào)研, 我的理解為, 對(duì)于一個(gè)URI請求, 瀏覽器會(huì)按照下面的請求和執(zhí)行順序進(jìn)行:

  1. 一個(gè)線程對(duì)DOM進(jìn)行下載(也就是html, 而不去管html中的外部資源)

  2. 另外一個(gè)線程會(huì)開始分析已經(jīng)下載的DOM, 并開始下載其中的外部資源(如js, css, image等)

  3. 第三個(gè)線程(如果有的話)會(huì)去下載2正在下載的以外的外部資源

  4. 如果允許更多的連接, 更多的線程會(huì)繼續(xù)下載其它資源

一個(gè)請求可以同時(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

所以請根據(jù)這個(gè)實(shí)際情況來思考上面的下載順序.

然后我們看執(zhí)行順序(js的執(zhí)行, css的應(yīng)用等):

  1. 只要瀏覽器"看到了"了js代碼,它就會(huì)執(zhí)行

  2. 瀏覽器是從下到下,一行一行地執(zhí)行

  3. 如果js代碼位于一個(gè)函數(shù)或者對(duì)象中,則只有當(dāng)函數(shù)或者對(duì)象被調(diào)用時(shí)才會(huì)執(zhí)行

  4. 而所謂的direct code(不處于函數(shù)或者對(duì)象中的代碼),則會(huì)從上到下順序執(zhí)行

  5. 當(dāng)css文件下載完成時(shí), 相應(yīng)的樣式也會(huì)應(yīng)用到DOM上

  6. onload或者jquery的$(document).ready()是在DOM下載完成后執(zhí)行

在實(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的請求分析

我們回過頭來看下上面2個(gè)圖中的請求響應(yīng)圖.

Firefox

有如下特征:

  1. 首先下載html

  2. html下載完成后, 從上到下依次下載外部文件(js, css,img)

  3. js會(huì)block其它外部文件的下載

  4. 其它文件會(huì)并行下載

chrome

有如下特征:

  1. 首先下載html

  2. 從上到下依次下載外部文件(js,css,img)

  3. 各個(gè)資源的下載順序是并行的

你可能會(huì)奇怪如果js可以并行下載,那么可能位于DOM下面的代碼會(huì)先執(zhí)行, 首先可以肯定的是 即使下面的js先完成下載,也不會(huì)影響到整體的從上到下的執(zhí)行順序,瀏覽器會(huì)維護(hù)這種順序的關(guān)系, chrome的這種方式也是未來瀏覽器的一種趨勢, 而這也是為什么chrome能夠更快的原因之一.

以上是“HTML資源是怎么加載的”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：HTML資源是怎么加載的
分享路徑：http://www.chinadenli.net/article10/iiosdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、標(biāo)簽優(yōu)化、App開發(fā)、微信小程序、品牌網(wǎng)站建設(shè)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)