亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

內(nèi)聯(lián)JavaScript應(yīng)該放在HTML的哪個(gè)位置

BigTomato / 1668人閱讀

摘要：推薦幾篇值得收藏，反復(fù)閱讀的文章內(nèi)聯(lián)的位置本文僅僅討論在一般的情況下，內(nèi)聯(lián)應(yīng)該放在哪個(gè)位置。結(jié)論對(duì)于一些全局函數(shù)，全局統(tǒng)計(jì)邏輯等，我們往往會(huì)以?xún)?nèi)聯(lián)的形式放在內(nèi)的里。寫(xiě)在后面本文聚焦探索了內(nèi)聯(lián)在內(nèi)的最佳位置。

寫(xiě)在前面 
本文首發(fā)于公眾號(hào)：符合預(yù)期的CoyPan

內(nèi)聯(lián)JavaScript在現(xiàn)在的前端項(xiàng)目中是比較常見(jiàn)的，比如一些全局函數(shù)，全局統(tǒng)計(jì)邏輯等，我們可能會(huì)以?xún)?nèi)聯(lián)JavaScript的方式寫(xiě)在HTML里。那么，內(nèi)聯(lián)JavaScript最好應(yīng)該放在哪里呢？

頁(yè)面渲染流程

首先來(lái)看看這個(gè)問(wèn)題：頁(yè)面是怎么渲染的？大致流程如下：

頁(yè)面的渲染是一個(gè)復(fù)雜的過(guò)程，這里就不再詳細(xì)說(shuō)了。簡(jiǎn)單總結(jié)一下，就是使用HTML構(gòu)建DOM樹(shù)，CSS構(gòu)建CSSOM，兩者結(jié)合生成Render Tree，然后再進(jìn)行渲染。

推薦幾篇值得收藏，反復(fù)閱讀的文章：

https://developers.google.com...

https://developers.google.com...

https://developers.google.com...

https://developers.google.com...

https://developers.google.com...

內(nèi)聯(lián)JS的位置

本文僅僅討論在一般的情況下，內(nèi)聯(lián)JS應(yīng)該放在哪個(gè)位置。首先，下面兩點(diǎn)可以算是【共識(shí)】：

JS盡量放在HTML底部。

CSS盡量放在HTML頭部。

JS放在底部是為了防止阻塞DOM的解析，CSS放在頭部是為了盡早完成CSSOM的構(gòu)建，從而盡早paint頁(yè)面。下面是一個(gè)常見(jiàn)的頁(yè)面的HTML代碼：


    
        
    
    
          
....

假如我們有一段內(nèi)聯(lián)的、需要提前加載的、JS統(tǒng)計(jì)邏輯代碼，很自然的，會(huì)把內(nèi)聯(lián)JS放在head里。那么是放在css前面，還是后面呢？這是本文將要闡述的問(wèn)題。我做了兩個(gè)實(shí)驗(yàn)來(lái)看看兩個(gè)位置下的頁(yè)面渲染流程。為了突出實(shí)驗(yàn)效果，我模擬的是3g下的網(wǎng)速。

內(nèi)聯(lián)JS在CSS之前

代碼：


    
          
        
    
    
        
hello word_1

        
hello word_2

        
hello word_3

        
hello word_4

        
hello word_5

timeline如下：

eventlog如下：

從上面兩個(gè)圖可以看到，開(kāi)始解析HTML后，會(huì)開(kāi)始執(zhí)行內(nèi)聯(lián)JS，并且發(fā)起網(wǎng)絡(luò)請(qǐng)求下載CSS和JS文件，當(dāng)CSS下載完成后，便開(kāi)始進(jìn)入渲染。

內(nèi)聯(lián)JS在CSS后

代碼：


    
        
        
    
    
        
hello word_1

        
hello word_2

        
hello word_3

        
hello word_4

        
hello word_5

timeline如下：

eventlog如下：

從上面兩個(gè)圖可以看到，瀏覽器開(kāi)始解析HTML后，會(huì)發(fā)起網(wǎng)絡(luò)請(qǐng)求下載JS和CSS，當(dāng)CSS下載完成后，才會(huì)繼續(xù)執(zhí)行內(nèi)聯(lián)JS，頁(yè)面的渲染被推遲了，推遲的時(shí)間就是內(nèi)聯(lián)JS的執(zhí)行時(shí)間。

實(shí)驗(yàn)小結(jié)

瀏覽器解析HTML的時(shí)候，會(huì)對(duì)整個(gè)HTML進(jìn)行『preload scanner』，提前發(fā)起網(wǎng)絡(luò)請(qǐng)求，下載外鏈資源，并不是解析到對(duì)應(yīng)標(biāo)簽才會(huì)進(jìn)行下載。而外鏈下載這個(gè)過(guò)程是由瀏覽器進(jìn)程的網(wǎng)絡(luò)線(xiàn)程完成的，不會(huì)阻塞當(dāng)前渲染器進(jìn)程的主線(xiàn)程邏輯。

JS會(huì)阻塞HTML的解析。內(nèi)聯(lián)JS在CSS前面的時(shí)候，執(zhí)行內(nèi)聯(lián)JS可以和網(wǎng)絡(luò)請(qǐng)求并行執(zhí)行，執(zhí)行完內(nèi)聯(lián)JS后會(huì)繼續(xù)解析HTML，并且在CSS文件下載完成后，選擇合適的時(shí)機(jī)進(jìn)行渲染。而內(nèi)聯(lián)JS在CSS后面的時(shí)候，由于考慮到內(nèi)聯(lián)JS可能會(huì)修改CSSOM，所以主線(xiàn)程會(huì)暫停，直到CSS下載完成，生成CSSOM后，才會(huì)繼續(xù)執(zhí)行內(nèi)聯(lián)JS、解析HTML。

結(jié)論

對(duì)于一些全局函數(shù)，全局統(tǒng)計(jì)邏輯等，我們往往會(huì)以?xún)?nèi)聯(lián)JS的形式放在HTML內(nèi)的head里。此時(shí)，最好把內(nèi)聯(lián)JS放在外鏈CSS之前，以提高首屏速度，至少不會(huì)拖慢首屏速度。

寫(xiě)在后面

本文聚焦探索了內(nèi)聯(lián)JS在HTML內(nèi)的最佳位置。網(wǎng)上關(guān)于頁(yè)面渲染流程的文章很多，而自己去親自實(shí)踐后，才能更好的理解整個(gè)渲染流程。符合預(yù)期。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105919.html

相關(guān)文章

  • 內(nèi)聯(lián)JavaScript應(yīng)該放在HTML的哪個(gè)位置

    摘要：推薦幾篇值得收藏，反復(fù)閱讀的文章內(nèi)聯(lián)的位置本文僅僅討論在一般的情況下，內(nèi)聯(lián)應(yīng)該放在哪個(gè)位置。結(jié)論對(duì)于一些全局函數(shù)，全局統(tǒng)計(jì)邏輯等，我們往往會(huì)以?xún)?nèi)聯(lián)的形式放在內(nèi)的里。寫(xiě)在后面本文聚焦探索了內(nèi)聯(lián)在內(nèi)的最佳位置。 寫(xiě)在前面 本文首發(fā)于公眾號(hào)：符合預(yù)期的CoyPan 內(nèi)聯(lián)JavaScript在現(xiàn)在的前端項(xiàng)目中是比較常見(jiàn)的，比如一些全局函數(shù)，全局統(tǒng)計(jì)邏輯等，我們可能會(huì)以?xún)?nèi)聯(lián)JavaScript的...

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

  • 頁(yè)面加速優(yōu)化

    摘要：延遲加載當(dāng)我們調(diào)用外部的時(shí)候，使用事件在頁(yè)面內(nèi)部被加載前，外部將不被加載腳本調(diào)用外部文件拷貝以上代碼。代碼代碼片段組合外部工具列表頁(yè)面加速優(yōu)化頁(yè)面請(qǐng)求工具工具大全擴(kuò)展閱讀方面的設(shè)置 內(nèi)聯(lián) CSS 優(yōu)點(diǎn) 使用內(nèi)聯(lián) CSS 可以減少瀏覽器去服務(wù)端去下載 CSS 文件 關(guān)鍵 CSS 內(nèi)聯(lián)到 HTML 文件中 缺點(diǎn) CSS 文件沒(méi)法被緩存 注意：該方法只適用于很小的 CSS...

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

  • 頁(yè)面加速優(yōu)化

    摘要：延遲加載當(dāng)我們調(diào)用外部的時(shí)候，使用事件在頁(yè)面內(nèi)部被加載前，外部將不被加載腳本調(diào)用外部文件拷貝以上代碼。代碼代碼片段組合外部工具列表頁(yè)面加速優(yōu)化頁(yè)面請(qǐng)求工具工具大全擴(kuò)展閱讀方面的設(shè)置 內(nèi)聯(lián) CSS 優(yōu)點(diǎn) 使用內(nèi)聯(lián) CSS 可以減少瀏覽器去服務(wù)端去下載 CSS 文件 關(guān)鍵 CSS 內(nèi)聯(lián)到 HTML 文件中 缺點(diǎn) CSS 文件沒(méi)法被緩存 注意：該方法只適用于很小的 CSS...

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

  • 頁(yè)面加速優(yōu)化

    摘要：延遲加載當(dāng)我們調(diào)用外部的時(shí)候，使用事件在頁(yè)面內(nèi)部被加載前，外部將不被加載腳本調(diào)用外部文件拷貝以上代碼。代碼代碼片段組合外部工具列表頁(yè)面加速優(yōu)化頁(yè)面請(qǐng)求工具工具大全擴(kuò)展閱讀方面的設(shè)置 內(nèi)聯(lián) CSS 優(yōu)點(diǎn) 使用內(nèi)聯(lián) CSS 可以減少瀏覽器去服務(wù)端去下載 CSS 文件 關(guān)鍵 CSS 內(nèi)聯(lián)到 HTML 文件中 缺點(diǎn) CSS 文件沒(méi)法被緩存 注意：該方法只適用于很小的 CSS...

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

  • Yahoo前端優(yōu)化性能規(guī)則

    摘要：規(guī)則使用內(nèi)容發(fā)布網(wǎng)絡(luò)用戶(hù)同服務(wù)器的距離會(huì)對(duì)頁(yè)面響應(yīng)時(shí)間產(chǎn)生影響。這不僅能達(dá)到響應(yīng)時(shí)間大幅減少的目的，還很容易實(shí)現(xiàn)。提供動(dòng)態(tài)頁(yè)面會(huì)引入特殊的存儲(chǔ)要求數(shù)據(jù)庫(kù)連接狀態(tài)管理驗(yàn)證硬件和優(yōu)化等，這些復(fù)雜性超過(guò)了的范圍。 鏈接參考： https://developer.yahoo.com/performance/rules.html 只有10%～20%的最終用戶(hù)響應(yīng)時(shí)間花在了下載HTML文檔上...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<