首頁 > 開發者 > JavaScript
標籤：
Javascript的書寫方法及執行流程
<script></script>是書寫Javascript最為簡單的方法（實際的開發中基本不使用），在這種情況下<script>標籤被分析之後就會立即執行Javascript。需要 注意的是，這樣將無法操作<script>標籤之後的DOM元素。原因就是：分析<script>標籤之後就立即執行。這時候<script>標籤之後的DOM元素還未構造，因此就 無法取得位於其後的DOM元素。
解決方案：在body的結束標籤前才書寫<script>標籤（注意：盡量避免對body操作）如果希望對body進行操作，可以通過onload和DOMContentLoaded 方式來執行，他們的執行流程允許對body操作。
2.外部讀取Javascript檔案
例如：<script src=”http://example.com/js/sample.js”></script>
該檔案會在<script>標籤分析之後馬上讀取，一旦讀取完成，就將執行檔案內的Javascript，<script>標籤有兩個屬性：defer和async。指定defer屬性，可以使該 <script>標籤的處理延遲至其他所有的<script>標籤之後。指定async屬性，以非同步方式讀取外部檔案，並在讀取完成後依次執行。
好處:①瀏覽器可以緩衝Javascript檔案，如果Javvascript檔案的內容變化不頻繁，只需下載一次之後將其緩衝至本地，避免下次的讀取，直接提高運行速度；②團隊 分工更加明確
3. Onload
①直接寫在HTML中 <body onload=”alert(“haha”)”>
②寫在外部檔案中 window.onload = function() { alert(“haha”); }
在onload事件處理常式中書寫Javascript代碼，能夠在頁面讀取完成後再對其執行。因為在執行時已經完成對整個頁面的讀取，所以可以對所有的DOM元素進 行操作。由於在讀取了整個頁面之後才讀取Javascript，所以當頁面存在大量圖片是，會導致Javascript的載入速度非常慢，影響使用者體驗，所以在頁面存在大量圖 片，不建議使用這種方法
4. DOMContentLoaded
對於onload方法，執行Javascript時可能需要一定的等待時間，這可以使用DOMContentLoaded解決(IE8之前的瀏覽器不支援)。DOMContentLoaded是 在完成HTML解析後發生的事件。將事件接聽程式設定為對該事件進行監聽，就可以減少不必要的等待時間
例如: document.addEventListener(‘DOMContentLoaded’,function(){alert(“haha”);},false);
5. 動態載入
在產生script元素過程中動態載入Javascript檔案
例如：
Var script = document.createElement(‘script’);
Script.src = ‘other-javascript.js’;
Document.getElementByTagName(‘head’)[0].appendChild(script);
這種方法執行Javascript時，Javascript檔案在載入過程中不會阻斷其他的操作，這是一個較大的優點。若直接在頁面中寫script，則在負載檔案時會阻斷CSS 檔案的載入。
參考檔案：JavaScript編程全解 圖靈程式設計叢書
2015-06-26 19:31:20
Javascript學習筆記（一）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
