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

對於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