詳解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>