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

資訊專欄INFORMATION COLUMN

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

sixleaves / 488人閱讀

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

寫在前面 
本文首發(fā)于公眾號：符合預期的CoyPan

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

頁面渲染流程

首先來看看這個問題：頁面是怎么渲染的？大致流程如下：

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

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

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應該放在哪個位置。首先，下面兩點可以算是【共識】：

JS盡量放在HTML底部。

CSS盡量放在HTML頭部。

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


    
        
    
    
          
....

假如我們有一段內(nèi)聯(lián)的、需要提前加載的、JS統(tǒng)計邏輯代碼，很自然的，會把內(nèi)聯(lián)JS放在head里。那么是放在css前面，還是后面呢？這是本文將要闡述的問題。我做了兩個實驗來看看兩個位置下的頁面渲染流程。為了突出實驗效果，我模擬的是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如下：

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

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

代碼：


    
        
        
    
    
        
hello word_1

        
hello word_2

        
hello word_3

        
hello word_4

        
hello word_5

timeline如下：

eventlog如下：

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

實驗小結(jié)

瀏覽器解析HTML的時候，會對整個HTML進行『preload scanner』，提前發(fā)起網(wǎng)絡請求，下載外鏈資源，并不是解析到對應標簽才會進行下載。而外鏈下載這個過程是由瀏覽器進程的網(wǎng)絡線程完成的，不會阻塞當前渲染器進程的主線程邏輯。

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

結(jié)論

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

寫在后面

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

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

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

相關文章

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

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

    BigTomato 評論0 收藏0

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

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

    Lin_YT 評論0 收藏0

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

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

    shixinzhang 評論0 收藏0

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

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

    xiaotianyi 評論0 收藏0

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

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

    hiyayiji 評論0 收藏0

發(fā)表評論

0條評論

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