首先,我想說一下Javascript的裝載和執行。通常來說,瀏覽器對于Javascript的運行有兩大特性:1)載入后馬上執行,2)執行時會阻塞頁面后續的內容(包括頁面的渲染、其它資源的下載)。于是,如果有多個js文件被引入,那么對于瀏覽器來說,這些js文件被被串行地載入,并依次執行。
因為javascript可能會來操作HTML文檔的DOM樹,所以,瀏覽器一般都不會像并行下載css文件并行下載js文件,因為這是js文件的特殊性造成的。所以,如果你的javascript想操作后面的DOM元素,基本上來說,瀏覽器都會報錯說對象找不到。因為Javascript執行時,后面的HTML被阻塞住了,DOM樹時還沒有后面的DOM結點。所以程序也就報錯了。
傳統的方式
所以,當你寫在代碼中寫下如下的代碼:
基本上來說,head里的 <script>標簽會阻塞后續資源的載入以及整個頁面的生成。我專門做了一個示例你可以看看:示例一。 注意:我的alert.js中只有一句話:alert(“hello world”) ,這更容易讓你看到javascript是怎么阻塞后面的東西的。
所以,你知道為什么有很多網站把javascript放在網頁的最后面了,要么就是動用了window.onload或是docmuemt ready之類的事件。
另外,因為絕大多數的Javascript代碼并不需要等頁面,所以,我們異步載入的功能。那么我們怎么異步載入呢?
document.write方式
于是,你可能以為document.write()這種方式能夠解決不阻塞的方式。你當然會覺得,document.write了的<script>標簽后就可以執行后面的東西去了,這沒錯。對于在同一個script標簽里的Javascript的代碼來說,是這樣的,但是對于整個頁面來說,這個還是會阻塞。 下面是一段測試代碼:
你覺得alert的順序是什么?你可以在不同的瀏覽器里試一試。這里的想關的測試頁面:示例二。
script的defer和async屬性
IE自從IE6就支持defer標簽,如:
對于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方式
這種方式可能是用得最多的了。
這個方式幾乎成了標準的異步載入js文件的方式,這個方式的演示請參看:示例三。這方式還被玩出了JSONP的東東,也就是我可以為script的src指定某個后臺的腳本(如PHP),而這個PHP返回一個javascript函數,其參數是一個json的字符串,返回來調用我們的預先定義好的javascript的函數。你可以看一下這個示例:t.js (這個示例是我之前在微博征集的一個異步ajax調用的小例子)
按需異步載入js
上面那個DOM方式的例子解決了異步載入Javascript的問題,但是沒有解決我們想讓他按我們指定的時機運行的問題。所以,我們只需要把上面那個DOM方式綁到某個事件上來就可以了。
比如:
綁在window.load事件上――示例四
你一定要比較一下示例四和示例三在執行上有什么不同,我在這兩個示例中都專門用了個代碼高亮的javascript,看看那個代碼高亮的的腳本的執行和我的alert.js的執行的情況,你就知道不同了)
綁在特定的事件上――示例五
這個示例很簡單了。當你點擊某個DOM元素,才會真正載入我們的alert.js。
更多
但是,綁定在某個特定事件上這個事似乎又過了一點,因為只有在點擊的時候才會去真正的下載js,這又會太慢了了。好了,到這里,要拋出我們的終極問題――我們想要異步地把js文件下載到用戶的本地,但是不執行,僅當在我們想要執行的時候去執行。
要是我們有下面這樣的方式就好了:
可惜的是,這只是一個美麗的夢想,今天我們的Javascript還比較原始,這個“JS夢”還沒有實現呢。
所以,我們的程序員只能使用hack的方式來搞。
有的程序員使用了非標準的script的type來cache javascript。如:
因為”cache/script”,這個東西根本就不能被瀏覽器解析,所以瀏覽器也就不能把alert.js當javascript去執行,但是他又要去下載js文件,所以就可以搞定了。可惜的是,webkit嚴格符從了HTML的標準――對于這種不認識的東西,直接刪除,什么也不干。于是,我們的夢又破了。
所以,我們需要再hack一下,就像N多年前玩preload圖片那樣,我們可以動用object標簽(也可以動用iframe標簽),于是我們有下面這樣的代碼:
在Chrome下按 Ctrl+Shit+I,切換到network頁,你就可以看到下載了alert.js但是沒有執行,然后我們再用示例五的方式,因為瀏覽器端有緩存了,不會再從服務器上下載alert.js了。所以,就能保證執行速度了。
關于這種preload這種東西你應該不會陌生了。你還可以使用Ajax的方式,如:
到這里我就不再多說了,也不給示例了,大家可以自己試試去。
最后再提兩個js,一個是ControlJS,一個叫HeadJS,專門用來做異步load javascript文件的。
好了,這是所有的內容了,希望大家看過后能對Javascript的載入和執行,以及相關的技術有個了解。同時,也希望各前端高手不吝賜教!
新聞熱點
疑難解答