国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML加載過程

honmaple / 1023人閱讀

摘要：如果我們?yōu)橥獠刻砑踊驅(qū)傩裕敲此南螺d就不會阻塞其他內(nèi)容的加載關(guān)于與屬性的區(qū)別，請參考我的另一篇文章高級程序設(shè)計讀書筆記在中使用

在地址欄輸入url，返回html后，瀏覽器開始順序加載并渲染DOM

Body標(biāo)簽

當(dāng)瀏覽器遇到body標(biāo)簽才算真正開始加載并渲染DOM，此時會有以下幾種情況：

DOM元素

瀏覽器遇到dom元素時，正常順序加載，邊加載邊渲染

內(nèi)聯(lián)CSS

當(dāng)遇到內(nèi)聯(lián)CSS時，瀏覽器繼續(xù)加載，但渲染被阻塞，此時會生成新的CSS Rule Tree，生成后重新渲染界面

外聯(lián)CSS

當(dāng)遇到外聯(lián)CSS（link標(biāo)簽），瀏覽器啟一個線程加載css文件，DOM繼續(xù)加載但渲染被阻塞

內(nèi)聯(lián)Javascript

當(dāng)遇到內(nèi)聯(lián)Javascript，瀏覽器開始執(zhí)行這段腳本，DOM的加載和渲染同時被阻塞（由于JavaScript有可能會更改DOM Tree和Render Tree，因此同時被阻塞）

外聯(lián)Javascript

當(dāng)遇到外聯(lián)Javascript，瀏覽器開始下載這段腳本，下載成功后執(zhí)行它，這整個過程DOM的加載和渲染同時被阻塞

Example

用一個例子解釋一下



  
Hello

  
  
  
World

在js文件下載的過程中，js后面的元素沒有被加載，也沒有呈現(xiàn)在界面上，說明js文件的下載阻塞了DOM的解析并渲染



  
Hello

  
  
  
World

在css文件仍在下載的過程中，已經(jīng)可以打印出兩個，可以看出css文件的加載阻塞了DOM渲染但沒有阻塞DOM加載

defer 與 async

如果我們執(zhí)行以下代碼，首先加載外部Javascript文件，然后加載DOM其他內(nèi)容：



  
  
Hello World

如我們所料，文件沒有下載并執(zhí)行完畢，Hello World是不會打印出來的。

如果我們?yōu)橥獠縅avascript添加defer或async屬性，那么它的下載就不會阻塞DOM其他內(nèi)容的加載：



  
  
Hello World


關(guān)于defer與async屬性的區(qū)別，請參考我的另一篇文章：
Javascript高級程序設(shè)計讀書筆記——在HTML中使用Javascript

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94882.html

相關(guān)文章

  • 瀏覽器解析渲染HTML文檔的過程

    摘要：瀏覽器的預(yù)解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預(yù)加載器發(fā)現(xiàn)了標(biāo)簽，會對文件進行加載并放在瀏覽器緩存中，這樣當(dāng)解析器遇到這個標(biāo)記時，由于預(yù)加載器已經(jīng)將文件加載下來了，所以會被立即執(zhí)行，不需要等待從網(wǎng)絡(luò)抓取資源，減緩了對渲染的阻塞。 參考資料 瀏覽器的工作原理 瀏覽器加載網(wǎng)頁時的過程是什么？ HTML渲染過程詳解 瀏覽器的工作原理 一、瀏覽器的高層結(jié)構(gòu) 瀏覽器的主要組件為：...

    warkiz 評論0 收藏0

  • 瀏覽器解析渲染HTML文檔的過程

    摘要：瀏覽器的預(yù)解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預(yù)加載器發(fā)現(xiàn)了標(biāo)簽，會對文件進行加載并放在瀏覽器緩存中，這樣當(dāng)解析器遇到這個標(biāo)記時，由于預(yù)加載器已經(jīng)將文件加載下來了，所以會被立即執(zhí)行，不需要等待從網(wǎng)絡(luò)抓取資源，減緩了對渲染的阻塞。 參考資料 瀏覽器的工作原理 瀏覽器加載網(wǎng)頁時的過程是什么？ HTML渲染過程詳解 瀏覽器的工作原理 一、瀏覽器的高層結(jié)構(gòu) 瀏覽器的主要組件為：...

    davidac 評論0 收藏0

  • 瀏覽器解析渲染HTML文檔的過程

    摘要：瀏覽器的預(yù)解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預(yù)加載器發(fā)現(xiàn)了標(biāo)簽，會對文件進行加載并放在瀏覽器緩存中，這樣當(dāng)解析器遇到這個標(biāo)記時，由于預(yù)加載器已經(jīng)將文件加載下來了，所以會被立即執(zhí)行，不需要等待從網(wǎng)絡(luò)抓取資源，減緩了對渲染的阻塞。 參考資料 瀏覽器的工作原理 瀏覽器加載網(wǎng)頁時的過程是什么？ HTML渲染過程詳解 瀏覽器的工作原理 一、瀏覽器的高層結(jié)構(gòu) 瀏覽器的主要組件為：...

    CoyPan 評論0 收藏0

  • 文檔的加載

    摘要：完成文檔和所有子資源已完成加載。在中可以使用事件來檢測文檔是否加載完畢在更早的版本中可以通過每隔一段時間執(zhí)行一次來檢測這一狀態(tài)，因為這條代碼在加載完畢之前執(zhí)行時會拋出錯誤。 Document.readyState Document.readyState 屬性描述了文檔的加載狀態(tài)。當(dāng)readyState的值變化時，document對象上的readystatechange事件將被觸發(fā)。 r...

    beita 評論0 收藏0

  • HTML加載過程

    摘要：如果我們?yōu)橥獠刻砑踊驅(qū)傩裕敲此南螺d就不會阻塞其他內(nèi)容的加載關(guān)于與屬性的區(qū)別，請參考我的另一篇文章高級程序設(shè)計讀書筆記在中使用 showImg(https://segmentfault.com/img/remote/1460000014810622); 在地址欄輸入url，返回html后，瀏覽器開始順序加載并渲染DOM Body標(biāo)簽 當(dāng)瀏覽器遇到body標(biāo)簽才算真正開始加載并渲染DO...

    gaomysion 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<