Javascript 裝載和執行

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

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

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

傳統的方式

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

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

基本上來講，head裏的 <script>標籤會阻塞後續資源的載入以及整個頁面的生成。我專門作了一個示例你能夠看看：示例一 。 注意：個人alert.js中只有一句話：alert(「hello world」) ，這更容易讓你看到javascript是自知阻塞的。 因此，你知道爲何有不少網站把javascript放在網頁的最後面了。由於，絕大多數的Javascript代碼並不須要等

document.write方式

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

< 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的順序是什麼？這裏的想關的測試頁面：示例二 。

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的執行的狀況，你就知道不一樣了）

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文件下載到用戶的本地，可是不執行，僅當在咱們想要執行的時候去執行。

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

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標籤，因而咱們有下面這樣的代碼：

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( '' );

我這裏不就再多說了。
好了，這是全部的內容了，但願你們看事後能對Javascript的載入和執行，以及相關的技術有個瞭解。同時，也但願各前端高手不吝賜教！

（全文完）

（轉載本站文章請註明做者和出處 酷殼 – CoolShell.cn ，請勿用於任何商業用途）