詳解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是怎麼阻塞後面的東西的。 </p> <p>所以，你知道為什麼有很多網站把javascript放在網頁的最後面了，要嘛就是動用了window.onload或是docmuemt ready之類的事件。 </p> <p>另外，因為絕大多數的Javascript程式碼不需要等頁面，所以，我們非同步載入的功能。那我們怎麼異步載入呢？ </p> <p>document.write方式</p> <p>於是，你可能以為document.write()這種方式能夠解決不阻塞的方式。你當然會覺得，document.write了的<script>標籤後就可以執行後面的東西去了，這沒錯。對於在同一個script標籤裡的Javascript的程式碼來說，是這樣的，但是對於整個頁面來說，這個還是會阻塞。 以下是一段測試程式碼：</p> <p><div class="codetitle"><span><a style="CURSOR: pointer" data="35700" class="copybut" id="copybut35700" onclick="doCopy('code35700')"><U>複製程式碼</U></a></span> 程式碼如下:</div><div class="codebody" id="code35700"><br /> <script type="text/javascript" language="javascript"><br />     function loadjs(script_filename) {<br />         document.write('<' 'script language="javascript" type="text/javascript"');<br />         document.write(' src="' script_filename '">');<br />         document.write('<' '/script' '>');<br />         alert("loadjs() exit...");<br />     }<br />     var script = 'http://coolshell.cn/asyncjs/alert.js';<br />     loadjs(script);<br />     alert("loadjs() finished!");<br /> </script>

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

script的defer和async屬性

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

複製程式碼 程式碼如下:

對於IE來說，這個標籤會讓IE並行下載js文件，並且把其執行hold到了整個DOM裝載完畢（DOMContentLoaded），多個defer的<script>在執行時也會按照其出現的順序來運行。最重要的是<script>被加上defer後，其不會阻塞後續DOM的渲染。但因為這個defer只是IE專用，所以一般用得比較少。 </p> <p>而我們標準的的HTML5也加入了一個非同步載入javascript的屬性：async，無論你對它賦什麼樣的值，只要它出現，它就開始非同步載入js檔案。但是， async的非同步載入會有一個比較嚴重的問題，那就是它忠實地實踐著「載入後馬上執行」這條軍規，所以，雖然它並不阻塞頁面的渲染，但是你也無法控制他執行的次序和時機。你可以看看這個範例去感受一下。 </p> <p>支援 async標籤的瀏覽器是：Firefox3.6 ，Chrome 8.0 ，Safari 5.0 ，IE 10 ，Opera還不支援（來自這裡）所以這個方法也不是太好。因為並不是所有的瀏覽器你都能行。 </p> <p>動態建立DOM方式</p> <p>這種方式可能是用得最多的了。 </p> <p><div class="codetitle"><span><a style="CURSOR: pointer" data="53194" class="copybut" id="copybut53194" onclick="doCopy('code53194')"><U>複製程式碼</U></a></span> 程式碼如下:</div><div class="codebody" id="code53194"><br /> function loadjs(script_filename) {<br />     var script = document.createElement('script');<br />     script.setAttribute('type', 'text/javascript');<br />     script.setAttribute('src', script_filename);<br />     script.setAttribute('id', 'coolshell_script_id');<br />  <br />     script_id = document.getElementById('coolshell_script_id');<br />     if(script_id){<br />         document.getElementsByTagName('head')[0].removeChild(script_id);<br />     }<br />     document.getElementsByTagName('head')[0].appendChild(script);<br /> }<br />  <br /> var script = 'http://coolshell.cn/asyncjs/alert.js';<br /> loadjs(script);<br /> </div></p> <p>這個方式幾乎成了標準的非同步載入js檔案的方式，這個方式的示範請參考：範例三。這方式也被玩出了JSONP的東東，也就是我可以為script的src指定某個後台的腳本（如PHP），而這個PHP回傳一個javascript函數，其參數是一個json的字串，回傳呼叫我們的預先定義好的javascript的函數。你可以看一下這個範例：t.js （這個範例是我之前在微博徵集的一個非同步ajax呼叫的小例子）</p> <p>依需求非同步載入js</p> <p>上面那個DOM方式的例子解決了非同步載入Javascript的問題，但沒有解決我們想讓他以我們指定的時機運行的問題。所以，我們只需要把上面那個DOM方式綁到某個事件上就可以了。 </p> <p>例如：</p> <p>綁在window.load事件上－範例四</p> <p>你一定要比較一下範例四和範例三在執行上有什麼不同，我在這兩個範例中都專門用了個程式碼高亮的javascript，看看那個程式碼高亮的的​​腳本的執行和我的alert.js的執行的情況，你就知道不同了）</p> <p><div class="codetitle"><span><a style="CURSOR: pointer" data="34632" class="copybut" id="copybut34632" onclick="doCopy('code34632')"><U>複製程式碼</U></a></span> 程式碼如下:</div><div class="codebody" id="code34632"><br /> window.load = loadjs("<a href="http://coolshell.cn/asyncjs/alert.js">http://coolshell.cn/asyncjs/alert.js</a>")<br /> </div></p> <p>綁在特定的事件上—範例五</p> <p><div class="codetitle"><span><a style="CURSOR: pointer" data="16878" class="copybut" id="copybut16878" onclick="doCopy('code16878')"><U>複製程式碼</U></a></span> 程式碼如下:</div><div class="codebody" id="code16878"><br /> <p style="cursor: pointer" onclick="LoadJS()">Click to load alert.js </p><br /> </div></p> <p>這個範例很簡單了。當你點選某個DOM元素，才會真正載入我們的alert.js。 </p> <p>更多</p> <p>但是，綁定在某個特定事件上這個事似乎又過了一點，因為只有在點擊的時候才會去真正的下載js，這又會太慢了。好了，到這裡，要拋出我們的終極問題——我們想要異步地把js檔案下載到用戶的本地，但不執行，僅當在我們想要執行的時候去執行。 </p> <p>要是我們有下面這樣的方式就好了：</p> <p><div class="codetitle"><span><a style="CURSOR: pointer" data="43581" class="copybut" id="copybut43581" onclick="doCopy('code43581')"><U>複製程式碼</U></a></span> 程式碼如下:</div><div class="codebody" id="code43581"><br /> var script = document.createElement("script");<br /> script.noexecute = true;<br /> script.src = "alert.js";<br /> document.body.appendChild(script);<br /> <br /> //これは後で実行できます<br /> script.execute();<br /> </div></p> <p>残念ながら、これは単なる美しい夢にすぎません。今日、私たちの Javascript はまだ比較的原始的なものであり、この「JS の夢」はまだ実現していません。 </p> <p>したがって、私たちのプログラマーは、ハッキング手法を使用してのみそれを行うことができます。 </p> <p>一部のプログラマは、JavaScript をキャッシュするために非標準のスクリプト タイプを使用します。例: </p> <p><div class="codetitle"><span><a style="CURSOR: pointer" data="63471" class="copybut" id="copybut63471" onclick="doCopy('code63471')"><U>コードをコピーします</U></a></span> コードは次のとおりです:</div><div class="codebody" id="code63471"><br /> <script type=cache/script src="./alert.js"></script>%0A