JAVASCRIPT 裝載和執行

時間 2019-11-18

原文原文鏈接

轉載：http://coolshell.cn/articles/9749.htmljavascript

一兩個月前在淘寶內網裏看到一個優化Javascript代碼的競賽，發現有很多的人對Javascript的執行和裝載的基礎並不懂，因此，從那天起我就想寫一篇文章，但一直耽擱了。自上篇《瀏覽器渲染原理簡介》，正好也能夠承前啓後。css

首先，我想說一下Javascript的裝載和執行。一般來講，瀏覽器對於Javascript的運行有兩大特性：1）載入後立刻執行，2）執行時會阻塞頁面後續的內容（包括頁面的渲染、其它資源的下載）。因而，若是有多個js文件被引入，那麼對於瀏覽器來講，這些js文件被被串行地載入，並依次執行。html

由於javascript可能會來操做HTML文檔的DOM樹，因此，瀏覽器通常都不會像並行下載css文件並行下載js文件，由於這是js文件的特殊性形成的。因此，若是你的javascript想操做後面的DOM元素，基本上來講，瀏覽器都會報錯說對象找不到。由於Javascript執行時，後面的HTML被阻塞住了，DOM樹時尚未後面的DOM結點。因此程序也就報錯了。前端

傳統的方式

因此，當你寫在代碼中寫下以下的代碼：java

1 2	`<` `script` `type` `=` `"text/javascript"` `src` `=` `"http://coolshell.cn/asyncjs/alert.js"` `></` `script` `>`

基本上來講，head裏的 <script>標籤會阻塞後續資源的載入以及整個頁面的生成。我專門作了一個示例你能夠看看：示例一。注意：個人alert.js中只有一句話：alert(「hello world」) ，這更容易讓你看到javascript是怎麼阻塞後面的東西的。程序員

因此，你知道爲何有不少網站把javascript放在網頁的最後面了，要麼就是動用了window.onload或是docmuemt ready之類的事件。web

另外，由於絕大多數的Javascript代碼並不須要等頁面，因此，咱們異步載入的功能。那麼咱們怎麼異步載入呢？ajax

document.write方式

因而，你可能覺得document.write()這種方式可以解決不阻塞的方式。你固然會以爲，document.write了的<script>標籤後就能夠執行後面的東西去了，這沒錯。對於在同一個script標籤裏的Javascript的代碼來講，是這樣的，可是對於整個頁面來講，這個仍是會阻塞。下面是一段測試代碼：shell

 
        < 
        script 
        type 
        = 
        "text/javascript" 
        language 
        = 
        "javascript" 
        > 
       
        function loadjs(script_filename) { 
       
        document.write('<' + 'script language="javascript" type="text/javascript"'); 
       
        document.write(' src="' + script_filename + '">'); 
       
        document.write('<'+'/script'+'>'); 
       
        alert("loadjs() exit..."); 
       
        } 
       
        var script = 'http://coolshell.cn/asyncjs/alert.js'; 
       
        loadjs(script); 
       
        alert("loadjs() finished!"); 
       
        </ 
        script 
        > 
       
        < 
        script 
        type 
        = 
        "text/javascript" 
        language 
        = 
        "javascript" 
        > 
       
        alert("another block"); 
       
        </ 
        script 
        >

你以爲alert的順序是什麼？你能夠在不一樣的瀏覽器裏試一試。這裏的想關的測試頁面：示例二。json

script的defer和async屬性

IE自從IE6就支持defer標籤，如：

 
        < 
        script 
        defer  
        type 
        = 
        "text/javascript" 
        src 
        = 
        "./alert.js" 
        > 
       
        </ 
        script 
        >

對於IE來講，這個標籤會讓IE並行下載js文件，而且把其執行hold到了整個DOM裝載完畢（DOMContentLoaded），多個defer的<script>在執行時也會按照其出現的順序來運行。最重要的是<script>被加上defer後，其不會阻塞後續DOM的的渲染。可是由於這個defer只是IE專用，因此通常用得比較少。

而咱們標準的的HTML5也加入了一個異步載入javascript的屬性：async，不管你對它賦什麼樣的值，只要它出現，它就開始異步加載js文件。可是， async的異步加載會有一個比較嚴重的問題，那就是它忠實地踐行着「載入後立刻執行」這條軍規，因此，雖然它並不阻塞頁面的渲染，可是你也沒法控制他執行的次序和時機。你能夠看看這個示例去感覺一下。

支持 async標籤的瀏覽器是：Firefox3.6+，Chrome 8.0+，Safari 5.0+，IE 10+，Opera還不支持（來自這裏）因此這個方法也不是太好。由於並非全部的瀏覽器你都能行。

動態建立DOM方式

這種方式多是用得最多的了。

 
        function 
        loadjs(script_filename) { 
       
        var 
        script = document.createElement( 
        'script' 
        ); 
       
        script.setAttribute( 
        'type' 
        ,  
        'text/javascript' 
        ); 
       
        script.setAttribute( 
        'src' 
        , script_filename); 
       
        script.setAttribute( 
        'id' 
        ,  
        'coolshell_script_id' 
        ); 
       
        script_id = document.getElementById( 
        'coolshell_script_id' 
        ); 
       
        if 
        (script_id){ 
       
        document.getElementsByTagName( 
        'head' 
        )[0].removeChild(script_id); 
       
        } 
       
        document.getElementsByTagName( 
        'head' 
        )[0].appendChild(script); 
       
        } 
       
        var 
        script =  
        'http://coolshell.cn/asyncjs/alert.js' 
        ; 
       
        loadjs(script);

這個方式幾乎成了標準的異步載入js文件的方式，這個方式的演示請參看：示例三。這方式還被玩出了JSONP的東東，也就是我能夠爲script的src指定某個後臺的腳本（如PHP），而這個PHP返回一個javascript函數，其參數是一個json的字符串，返回來調用咱們的預先定義好的javascript的函數。你能夠看一下這個示例：t.js （這個示例是我以前在微博徵集的一個異步ajax調用的小例子）

按需異步載入js

上面那個DOM方式的例子解決了異步載入Javascript的問題，可是沒有解決咱們想讓他按咱們指定的時機運行的問題。因此，咱們只須要把上面那個DOM方式綁到某個事件上來就能夠了。

好比：

綁在window.load事件上——示例四

你必定要比較一下示例四和示例三在執行上有什麼不一樣，我在這兩個示例中都專門用了個代碼高亮的javascript，看看那個代碼高亮的的腳本的執行和個人alert.js的執行的狀況，你就知道不一樣了）

1	`window.load = loadjs(` `"http://coolshell.cn/asyncjs/alert.js"` `)`

綁在特定的事件上——示例五

 
        < 
        p 
        style 
        = 
        "cursor: pointer" 
        onclick 
        = 
        "LoadJS()" 
        >Click to load alert.js </ 
        p 
        >

這個示例很簡單了。當你點擊某個DOM元素，纔會真正載入咱們的alert.js。

可是，綁定在某個特定事件上這個事彷佛又過了一點，由於只有在點擊的時候纔會去真正的下載js，這又會太慢了了。好了，到這裏，要拋出咱們的終極問題——咱們想要異步地把js文件下載到用戶的本地，可是不執行，僅當在咱們想要執行的時候去執行。

要是咱們有下面這樣的方式就行了：

 
        var 
        script = document.createElement( 
        "script" 
        ); 
       
        script.noexecute =  
        true 
        ; 
       
        script.src =  
        "alert.js" 
        ; 
       
        document.body.appendChild(script); 
       
        //後面咱們能夠這麼幹 
       
        script.execute();

惋惜的是，這只是一個美麗的夢想，今天咱們的Javascript還比較原始，這個「JS夢」尚未實現呢。

因此，咱們的程序員只能使用hack的方式來搞。

有的程序員使用了非標準的script的type來cache javascript。如：

 
        < 
        script 
        type 
        = 
        cache 
        /script  
        src 
        = 
        "./alert.js" 
        ></ 
        script 
        >

由於」cache/script」，這個東西根本就不能被瀏覽器解析，因此瀏覽器也就不能把alert.js當javascript去執行，可是他又要去下載js文件，因此就能夠搞定了。惋惜的是，webkit嚴格符從了HTML的標準——對於這種不認識的東西，直接刪除，什麼也不幹。因而，咱們的夢又破了。

因此，咱們須要再hack一下，就像N多年前玩preload圖片那樣，咱們能夠動用object標籤（也能夠動用iframe標籤），因而咱們有下面這樣的代碼：

 
        function 
        cachejs(script_filename){ 
       
        var 
        cache = document.createElement( 
        'object' 
        ); 
       
        cache.data = script_filename; 
       
        cache.id =  
        "coolshell_script_cache_id" 
        ; 
       
        cache.width = 0; 
       
        cache.height = 0; 
       
        document.body.appendChild(cache); 
       
        }

而後，咱們在的最後調用一下這個函數。請參看一下相關的示例：示例六

在Chrome下按 Ctrl+Shit+I，切換到network頁，你就能夠看到下載了alert.js可是沒有執行，而後咱們再用示例五的方式，由於瀏覽器端有緩存了，不會再從服務器上下載alert.js了。因此，就能保證執行速度了。

關於這種preload這種東西你應該不會陌生了。你還可使用Ajax的方式，如：

 
        var 
        xhr =  
        new 
        XMLHttpRequest(); 
       
        xhr.open( 
        'GET' 
        ,  
        'new.js' 
        ); 
       
        xhr.send( 
        '' 
        );