詳解Javascript 裝載和執行_基礎知識

首先，我想說一下Javascript的裝載和執行。通常來說，瀏覽器對於Javascript的運作有兩大功能：1）載入後馬上執行，2）執行時會阻斷頁面後續的內容（包括頁面的渲染、其它資源的下載）。於是，如果有多個js檔案被引入，那麼對於瀏覽器來說，這些js檔案被串列地載入，並且依序執行。

因為javascript可能會來操作HTML文件的DOM樹，所以，瀏覽器一般都不會像並行下載css文件並行下載js文件，因為這是js文件的特殊性造成的。所以，如果你的javascript想操作後面的DOM元素，基本上來說，瀏覽器都會報錯說物件找不到。因為Javascript執行時，後面的HTML被阻塞住了，DOM樹時還沒有後面的DOM結點。所以程序也就報錯了。

傳統的方式

所以，當你寫在程式碼中寫下如下的程式碼：

複製程式碼 程式碼如下:

        src="">http://coolshell.cn/asyncjs/alert.js">>

基本上來說，head裡的 <script>標籤會阻塞後續資源的載入以及整個頁面的產生。我專門做了一個範例你可以看看：範例一。 注意：我的alert.js中只有一句話：alert(“hello world”) ，這更容易讓你看到javascript是怎麼阻塞後面的東西的。 </script>

所以，你知道為什麼有很多網站把javascript放在網頁的最後面了，要嘛就是動用了window.onload或是docmuemt ready之類的事件。

另外，因為絕大多數的Javascript程式碼不需要等頁面，所以，我們非同步載入的功能。那我們怎麼異步載入呢？

document.write方式

於是，你可能以為document.write()這種方式能夠解決不阻塞的方式。你當然會覺得，document.write了的<script>標籤後就可以執行後面的東西去了，這沒錯。對於在同一個script標籤裡的Javascript的程式碼來說，是這樣的，但是對於整個頁面來說，這個還是會阻塞。 以下是一段測試程式碼：</script>

複製程式碼 程式碼如下:

你覺得alert的順序是什麼？你可以在不同的瀏覽器裡試試看。這裡的想關的測試頁面：範例二。

script的defer和async屬性

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

複製程式碼 程式碼如下:

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

而我們標準的的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")

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

複製程式碼 程式碼如下:

Click to load alert.js

這個範例很簡單了。當你點選某個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 の夢」はまだ実現していません。

したがって、私たちのプログラマーは、ハッキング手法を使用してのみそれを行うことができます。

一部のプログラマは、JavaScript をキャッシュするために非標準のスクリプト タイプを使用します。例:

コードをコピーします コードは次のとおりです:

「キャッシュ/スクリプト」のせいで、これはブラウザではまったく解析できないので、ブラウザはalert.jsをJavaScriptとして実行できませんが、jsファイルをダウンロードする必要があるので解決できます。 Webkit が HTML の標準に厳密に準拠しているのは残念です。認識できないものについては、削除するだけで何もしません。こうして私たちの夢はまたも打ち砕かれました。

そこで、もう一度ハッキングする必要があります。何年も前にプリロード画像を使って遊んだのと同じように、object タグ (または iframe タグ) を使用できるので、次のコードになります。

コードをコピーします コードは次のとおりです:

関数cachejs(スクリプトファイル名){
var queue = document.createElement('object');
キャッシュ.データ = スクリプトファイル名;
cache.id = "coolshell_script_cache_id";
キャッシュ.幅 = 0;
キャッシュの高さ = 0;
Document.body.appendChild(キャッシュ);
}

そして、最後にこの関数を呼び出します。関連する例をご覧ください: 例 6

Chrome で Ctrl Shit I を押して、ネットワーク ページに切り替えます。alert.js はダウンロードされていますが、実行されていないことがわかります。ブラウザ側にキャッシュがあるため、例 5 のメソッドを使用します。サーバーからのalert.jsのダウンロードは再度実行されません。したがって、実行速度を保証することができる。

この種のプリロードについてはよく知っている必要があります。次のような Ajax を使用することもできます。

コードをコピーします コードは次のとおりです:

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

ここではこれ以上は述べませんし、例も示しません。ご自身で試してみてください。

最後に、2 つの js について触れておきます。1 つは ControlJS、もう 1 つは HeadJS と呼ばれ、JavaScript ファイルを非同期でロードするために特別に使用されます。

これで内容はすべてです。これを読んで、JavaScript の読み込みと実行、および関連テクノロジについて理解していただければ幸いです。同時に、フロントエンドの専門家の皆様からアドバイスをいただければ幸いです。