Javascript的書寫方法及執行流程
- <script>標籤
<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