同步載入 我們平常最常使用的就是這個同步載入形式： 登入後複製同步模式，又稱為阻斷模式，會阻止瀏覽器的後續處理，停止了後續的解析，因此停止了後續的檔案載入（如圖像）、渲染、程式碼執行。 js 之所以要同步執行，是因為 js 中可能有輸出 document 內容、修改dom、重新導向等行為，所以預設同步執行才是安全的。 以前的一般建議是把放在頁面結尾</body>之前，這樣盡量減少這個阻斷行為，而先讓頁面展示出來。 簡單說：載入的網路 timeline 是瀑布模型，而非同步載入的 timeline 是並發模型。 <br/></p><p>常見非同步載入</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">(function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })();</pre><div class="contentsignin">登入後複製</div></div><p>非同步載入又叫非阻塞，瀏覽器在下載執行 js 同時，也會繼續進行後續頁面的處理。 這個方法是在頁面中<script>標籤內，用 js 建立一個 script 元素並插入到 document 中。這樣就做到了非阻塞的下載 js 程式碼。 async屬性是HTML5中新增的非同步支持，見後文解釋，加上好（不加也不影響）。 此方法稱為 Script DOM Element 法，且不要求 js 同源。 將js程式碼包裹在匿名函數中並立即執行的方式是為了保護變數名稱洩漏到外部可見，這是很常見的方式，尤其是在 js 庫中被普遍使用。 <br/>例如Google Analytics 和Google+ Badge 都使用了這種非同步載入程式碼：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); (function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })();</pre><div class="contentsignin">登入後複製</div></div><p>但是，這種載入方式在載入執行完之前會阻止onload 事件的觸發，而現在很多頁面的程式碼都在onload 時還要執行額外的渲染工作等，所以還是會阻塞部分頁面的初始化處理。 </p><p>onload 時的非同步載入</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">(function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); } if (window.attachEvent) window.attachEvent('onload', async_load); else window.addEventListener('load', async_load, false); })();</pre><div class="contentsignin">登入後複製</div></div><p>這和前面的方式差不多，但關鍵是它不是立即開始非同步載入 js ，而是在 onload 時才開始非同步載入。這樣就解決了阻塞 onload 事件觸發的問題。 <br>補充：DOMContentLoaded 與 OnLoad 事件 <br>DOMContentLoaded : 頁面(document)已經解析完成，頁面中的dom元素已經可用。但是頁面中引用的圖片、subframe可能還沒載入完。 <br>OnLoad：頁面的所有資源都載入完畢（包括圖片）。瀏覽器的載入進度在這時才停止。 <br>這兩個時間點將頁面載入的timeline分成了三個階段。 </p>
