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

時間 2019-11-11

標籤一名合格前端開發工程師一篇 javascript 加載執行問題探索欄目 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左右，大大提升了網頁的下載呈現和友好型。

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