作一名合格的前端開發工程師(12篇)——第一篇 Javascript加載執行問題探索

作一名合格的前端開發工程師(12篇)——第一篇 Javascript加載執行問題探索

 

   樓主作前端開發一年多了,對前端的看法仍是多多少少有一點的,今天特拿出來跟你們分享分享。php

 

作前端開發少不了各類利器。好比我習慣用的仍是Google瀏覽器和重型武器Fiddller。html

 

一: 原始狀況前端

首先你們看看以下的代碼:jquery

複製代碼

 <%@ Page Language= AutoEventWireup= CodeBehind= Inherits= %>
 
 <!DOCTYPE html PUBLIC  >
 <html xmlns=>
 <head id=>
     <title></title>
     <link href= rel= type= />
     <script src= type=></script>
     <script src= type=></script>
     <script src= type=></script>
 </head>
 <body>
     <img src= width= height= />
 </body>
 </html>

複製代碼

 

估計90%的程序員都會把js文件放在head中,可是你們有沒有深究過呢?不少瀏覽器都會使用單一的線程來作「界面UI的更新」和「JS腳本的處理「,程序員

也就是當執行引擎遇到」<script>「的時候,此時頁面的下載和渲染都必須等待<script>執行完畢。那麼對用戶而言就悲哀了,看着鎖住的頁面,web

此時用戶極可能就會給你關掉。瀏覽器

 

從上面的瀑布圖中咱們能夠看出二點:服務器

   第一:app

              三個js文件並行下載,可是按我上面的理論中js應該是一個接一個的執行。然而在IE8,Firefox3.5和Chrome2都實現了js的並行下載,工具

           這是至關不錯的,可是他仍是會阻礙一些其餘資源的下載,好比說圖片。

   第二:

            圖片1.jpg的下載是在js執行完成後觸發的,這也驗證了上面所說的狀況,阻止了image的加載。

 

二:第一步優化

       既然js阻止了UI渲染,那麼咱們能夠考慮將js放在</body>前,這樣就可讓<script>前的html完美的呈現,不會讓用戶看到頁面空白等待

    而苦惱的狀況,天然就提升了友好性。

複製代碼

 <%@ Page Language= AutoEventWireup= CodeBehind= Inherits= %>
 
 <!DOCTYPE html PUBLIC  >
 <html xmlns=>
 <head id=>
     <title></title>
     <link href= rel= type= />
 </head>
 <body>
     <img src= width= height= />
     <script src= type=></script>
     <script src= type=></script>
     <script src= type=></script>
 </body>
 </html>

複製代碼

     下面的圖也展現了1.jpg和三個js幾乎並行下載和執行。時間由上面的「469ms+」縮小到「326ms」。

 

三:第二步優化

        看上面的「瀑布圖」,估計你們也看出來了,三個js文件進行了三次「Get」請求,你們都知道Get請求是須要帶http頭的,

   因此說須要耗費時間,那麼咱們採起的方案天然就是減小Get請求。一般有兩種方案。

   第一:合併js文件,好比將上面的「hello.js"和「world.js「合併掉。

   第二:利用第三方工具,好比php中的Minify。

   

   關於第二種作法,taobao用的仍是比較多的,看一下其中的一個script,應用了三個js文件。由3個Get請求變爲了1個。

 

四:第三步優化

     不論是把js文件放在腳尾,仍是三個合併一個,其本質都是」阻塞模式「,就是說鎖死瀏覽器,當web頁面愈來愈複雜,js文件愈來愈多,仍是

 讓咱們頭疼的,此時咱們就提倡一種「無阻塞模式「加載js腳本,也就是頁面所有呈現完再追加js,也就對應着window.onload事件觸發後,咱們才

 追加js,這就是所謂的「無阻塞「,可是其中有一個很是要注意的地方就是咱們對js的要求是否有嚴格的順序。

   

    第一:無順序要求,好比我對」hello.js「和」world.js"沒有順序要求,那麼咱們徹底能夠用jquery來動態追加實現。

複製代碼

 <%@ Page Language= AutoEventWireup= CodeBehind= Inherits= %>
 
 <!DOCTYPE html PUBLIC  >
 <html xmlns=>
 <head id=>
     <title></title>
     <link href= rel= type= />
 </head>
 <body>
     <img src= width= height= />
     <script src= type=></script>
     <script type=>
         window.onload = function () {
             $().append()
             $().append();
         }
     </script>
 </body>
 </html>

複製代碼

 

從圖中能夠看出,"hello.js"和「world.js"出如今藍色線之後,也就說明這兩個js是在DomContentLoad結束後再進行觸發加載的,這樣就不會形成頁面的鎖定

等待。

 

第二:有順序要求

         爲何必定要有順序要求這個概念呢?對於上面的那個動態追加的「兩個js」文件,在IE系列中,你不能保證hello.js必定會在world.js前執行,

    他只會按照服務器端返回的順序執行代碼。

複製代碼

 <%@ Page Language= AutoEventWireup= CodeBehind= Inherits= %>
 
 <!DOCTYPE html PUBLIC  >
 <html xmlns=>
 <head id=>
     <title></title>
     <link href= rel= type= />
 </head>
 <body>
     <img src= width= height= />
     <script type=>
         function loadScript(url, callback) {
              script = document.createElement();
             script.type = ;
 
                           (script.readyState) {
                 script.onreadystatechange = function () {
                      (script.readyState ==  || script.readyState == ) {
                         script.onreadystatechange = ;
                         callback();
                     }
                 }
             }  {
                                  script.onload = function () {
                     callback();
                 }
             }
             script.src = url;
             document.getElementById().appendChild(script);
         }
                  loadScript(, function () {
                          loadScript(, function () {
                                  loadScript(, function () {
 
                 });
             });
         });
     </script>
 </body>
 </html>

複製代碼

 

 

你們也能看到,頁面徹底Load的時間其實也就310ms左右,大大提升了網頁的下載呈現和友好型。

 

一樣也能夠看看騰訊網,他也是這麼幹的。

相關文章
相關標籤/搜索