成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【前端工程師手冊】css會阻塞頁面dom解析嗎？javascript呢？

XUI / 1232人閱讀

摘要：設(shè)置了的外鏈文件，在下載文件期間不會阻塞的解析，但是下載完畢之后就會立即執(zhí)行，無論現(xiàn)在是否正在解析。怎么優(yōu)化因為的解析會阻塞頁面的渲染，為了讓頁面盡早的呈現(xiàn)處理，那么就要避免一些無用的文件。

總結(jié)一下這幾個經(jīng)典問題。

JavaScript為什么要放在HTML文檔的底部？

首先說結(jié)論：


不論是內(nèi)聯(lián)還是外鏈js都會阻塞后續(xù)dom的解析和渲染


如果把JavaScript放在頁面頂部，下載和解析JavaScript的時間里面，dom遲遲得不到解析和渲染，瀏覽器一直處于白屏，所以把JavaScript文件放在頁面底部更有利于頁面快速呈現(xiàn)。

defer和async

首先，async和defer對于內(nèi)聯(lián)JavaScript都是無效的

defer

設(shè)置了defer的script外鏈文件，在下載js文件期間不會阻塞HTML的解析，而且等js下載完畢時若HTML還沒解析完畢，js會等到HTML文檔解析完畢后再執(zhí)行。如果有多個js下載文件，那么執(zhí)行時也是按照順序執(zhí)行。

async

設(shè)置了async的script外鏈文件，在下載js文件期間不會阻塞HTML的解析，但是js下載完畢之后就會立即執(zhí)行，無論現(xiàn)在HTML是否正在解析。

從圖可以更直觀的看出區(qū)別（圖片來自https://harttle.land/2016/05/...）：

Css為什么要放在HTML文檔的標(biāo)簽內(nèi) Css阻塞渲染

首先說結(jié)論：


對于一個HTML文檔來說，不管是內(nèi)聯(lián)還是外鏈的css，都會阻礙后續(xù)的dom渲染，但是不會阻礙后續(xù)dom的解析。


如果把css文件引用放在HTML文檔的底部，瀏覽器為了防止無樣式內(nèi)容閃爍，會在css文件下載并解析完畢之前什么都不顯示，這也就會造成白屏現(xiàn)象。（但是在firefox瀏覽器中測試，會出現(xiàn)樣式閃爍，這也算是不同瀏覽器的權(quán)衡吧，要么等css全解析完一起顯示，要么先顯示然后css解析完再重新畫上新樣式）
當(dāng)css文件放在中時，雖然css解析也會阻塞后續(xù)dom的渲染，但是在解析css的同時也在解析dom，所以等到css解析完畢就會逐步的渲染頁面了。

怎么優(yōu)化

因為Css的解析會阻塞頁面的渲染，為了讓頁面盡早的呈現(xiàn)處理，那么就要避免一些無用的css文件。
使用媒體查詢可以讓css文件只在必要的時候解析，進(jìn)而避免不必需的渲染阻塞，加快頁面呈現(xiàn)時間。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113785.html

相關(guān)文章

  • 【前端工程師手冊】css會阻塞頁面dom解析嗎？javascript呢？

    摘要：設(shè)置了的外鏈文件，在下載文件期間不會阻塞的解析，但是下載完畢之后就會立即執(zhí)行，無論現(xiàn)在是否正在解析。怎么優(yōu)化因為的解析會阻塞頁面的渲染，為了讓頁面盡早的呈現(xiàn)處理，那么就要避免一些無用的文件。 總結(jié)一下這幾個經(jīng)典問題。 JavaScript為什么要放在HTML文檔的底部？ 首先說結(jié)論：不論是內(nèi)聯(lián)還是外鏈js都會阻塞后續(xù)dom的解析和渲染如果把JavaScript放在頁面頂部，下載和解析J...

    malakashi 評論0 收藏0

  • DOM操作成本到底高在哪兒？

    摘要：刨根問底，這里說的成本，到底高在哪兒呢什么是文檔對象模型什么是可能很多人第一反應(yīng)就是等標(biāo)簽至少我是，但要知道，是，是，對象模型，是為提供的。操作具體的成本，說到底是造成瀏覽器回流和重繪，從而消耗資源。 從我接觸前端到現(xiàn)在，一直聽到的一句話：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現(xiàn)，數(shù)據(jù)驅(qū)動視圖的模式越發(fā)深入人心，jQuery時代提供的強大便...

    yuxue 評論0 收藏0

  • DOM操作成本到底高在哪兒？

    摘要：刨根問底，這里說的成本，到底高在哪兒呢什么是文檔對象模型什么是可能很多人第一反應(yīng)就是等標(biāo)簽至少我是，但要知道，是，是，對象模型，是為提供的。操作具體的成本，說到底是造成瀏覽器回流和重繪，從而消耗資源。 從我接觸前端到現(xiàn)在，一直聽到的一句話：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現(xiàn)，數(shù)據(jù)驅(qū)動視圖的模式越發(fā)深入人心，jQuery時代提供的強大便...

    MASAILA 評論0 收藏0

  • 前端開發(fā)者手冊2019

    摘要：年，和前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。開發(fā)最常見的解決方案有手機和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后，前端開發(fā)者可以從瀏覽器開發(fā)中學(xué)習(xí)到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發(fā)者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助，通過深入現(xiàn)代化的前端工程課程來提高你的技能。 下載：PDF ...

    church 評論0 收藏0

  • 前端開發(fā)者手冊2019

    摘要：年，和前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。開發(fā)最常見的解決方案有手機和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后，前端開發(fā)者可以從瀏覽器開發(fā)中學(xué)習(xí)到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發(fā)者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助，通過深入現(xiàn)代化的前端工程課程來提高你的技能。 下載：PDF ...

    xiao7cn 評論0 收藏0

發(fā)表評論

0條評論

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