DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 詳解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放在網頁的最後面了,要麼就是動用了window.onload或是docmuemt ready之類的事件。

另外,因為絕大多數的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,這又會太慢了了。好了,到這裡,要拋出我們的終極問題——我們想要異步地把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('');

到這裡我就不再多說了,也不給示例了,大家可以自己試試去。

最後再提兩個js,一個是ControlJS,一個叫HeadJS,專門用來做異步load javascript文件的。

好了,這是所有的內容了,希望大家看過後能對Javascript的載入和執行,以及相關的技術有個了解。同時,也希望各前端高手不吝賜教!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved