成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JavaScript是否阻塞解析

brianway / 3328人閱讀

摘要：設(shè)置了的外鏈文件，在下載文件期間不會(huì)阻塞的解析，但是下載完畢之后就會(huì)立即執(zhí)行，無(wú)論現(xiàn)在是否正在解析。使用媒體查詢可以讓文件只在必要的時(shí)候解析，進(jìn)而避免不必需的渲染阻塞，加快頁(yè)面呈現(xiàn)時(shí)間

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

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

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

defer

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

async

設(shè)置了async的script外鏈文件，在下載js文件期間不會(huì)阻塞HTML的解析，但是js下載完畢之后就會(huì)立即執(zhí)行，無(wú)論現(xiàn)在HTML是否正在解析。defer和async
首先，async和defer對(duì)于內(nèi)聯(lián)JavaScript都是無(wú)效的
https://segmentfault.com/img/...

Css為什么要放在HTML文檔的標(biāo)簽內(nèi)
Css阻塞渲染
首先說(shuō)結(jié)論：

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

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

怎么優(yōu)化
因?yàn)镃ss的解析會(huì)阻塞頁(yè)面的渲染，為了讓頁(yè)面盡早的呈現(xiàn)處理，那么就要避免一些無(wú)用的css文件。
使用媒體查詢可以讓css文件只在必要的時(shí)候解析，進(jìn)而避免不必需的渲染阻塞，加快頁(yè)面呈現(xiàn)時(shí)間

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114966.html

相關(guān)文章

  • JavaScript是否阻塞解析

    摘要：設(shè)置了的外鏈文件，在下載文件期間不會(huì)阻塞的解析，但是下載完畢之后就會(huì)立即執(zhí)行，無(wú)論現(xiàn)在是否正在解析。使用媒體查詢可以讓文件只在必要的時(shí)候解析，進(jìn)而避免不必需的渲染阻塞，加快頁(yè)面呈現(xiàn)時(shí)間 不論是內(nèi)聯(lián)還是外鏈js都會(huì)阻塞后續(xù)dom的解析和渲染 如果把JavaScript放在頁(yè)面頂部，下載和解析JavaScript的時(shí)間里面，dom遲遲得不到解析和渲染，瀏覽器一直處于白屏，所以把JavaSc...

    jindong 評(píng)論0 收藏0

  • 【前端工程師手冊(cè)】css會(huì)阻塞頁(yè)面dom解析嗎？javascript呢？

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

    XUI 評(píng)論0 收藏0

  • 【前端工程師手冊(cè)】css會(huì)阻塞頁(yè)面dom解析嗎？javascript呢？

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

    malakashi 評(píng)論0 收藏0

  • 瀏覽器渲染機(jī)制

    摘要：修改瀏覽器渲染因?yàn)榈淖枞沟媒馕鐾Ｖ?，下載完成之前，頁(yè)面無(wú)法顯示任何東西。瀏覽器渲染解析到文件時(shí)出現(xiàn)阻塞。我們把調(diào)整到尾部瀏覽器渲染這是頁(yè)面可以渲染了，但是沒(méi)有樣式。 本文示例源代碼請(qǐng)戳github博客，建議大家動(dòng)手敲敲代碼。 前言 瀏覽器渲染頁(yè)面的過(guò)程 從耗時(shí)的角度，瀏覽器請(qǐng)求、加載、渲染一個(gè)頁(yè)面，時(shí)間花在下面五件事情上： DNS 查詢 TCP 連接 HTTP 請(qǐng)求即響應(yīng) 服務(wù)器響...

    FullStackDeveloper 評(píng)論0 收藏0

  • 瀏覽器渲染機(jī)制

    摘要：修改瀏覽器渲染因?yàn)榈淖枞沟媒馕鐾Ｖ梗螺d完成之前，頁(yè)面無(wú)法顯示任何東西。瀏覽器渲染解析到文件時(shí)出現(xiàn)阻塞。我們把調(diào)整到尾部瀏覽器渲染這是頁(yè)面可以渲染了，但是沒(méi)有樣式。 本文示例源代碼請(qǐng)戳github博客，建議大家動(dòng)手敲敲代碼。 前言 瀏覽器渲染頁(yè)面的過(guò)程 從耗時(shí)的角度，瀏覽器請(qǐng)求、加載、渲染一個(gè)頁(yè)面，時(shí)間花在下面五件事情上： DNS 查詢 TCP 連接 HTTP 請(qǐng)求即響應(yīng) 服務(wù)器響...

    gougoujiang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<