一. 載入和執行——優化JavaScript規則：
1. 將指令碼放在底部；
2. 減少頁面中外鏈指令碼檔案的數量：
比如，下載單個100kb的檔案將比下載4個25kb的檔案更快。這個可以通過離線打包工具或者類似Yahoo！combo handler的實時線上服務來實現；
3. HTML４為標籤定義了一個擴充套件屬性：defer：
指明本元素所含的指令碼不會修改DOM，因此程式碼能安全的延遲執行，例如：
|
1 |
<script type="text/javascript" src="file1.js" defer></script> |
帶有defer屬性的標籤可以放置在文件任何位置，對應的js檔案將在頁面解析到標籤時開始下載，但並不會執行，直到DOM載入完成（onload事件被觸發之前）。當一個帶有defer屬性的JavaScript檔案下載時，它不會阻塞瀏覽器的其他程式，因此這類檔案可以與頁面中的其他資源並行下載。
世界每天在變化，前端也不例外。關於defer，還有async，最新情況請看：https://html.spec.whatwg.org/mul … l#attr-script-defer。簡單總結如下：
①defer、async只能用於外鏈檔案；
②既沒有設定defer，也沒有設定async時，指令碼檔案按在頁面中出現的位置載入執行，並且阻塞頁面解析；
③若設定了defer，指令碼檔案按在頁面中出現的位置載入，並且不會阻塞頁面解析，等頁面解析完onload事件被觸發前執行；
④若設定了async，指令碼檔案按在頁面中出現的位置載入執行，載入過程不會阻塞頁面解析，執行過程會阻塞頁面解析；
⑤既設定async，也設定了defer，因為各瀏覽器的效果不同，請自行檢測。
4. 動態指令碼元素：
|
1 2 3 4 |
var script = document.getElement("script"); script.type = "text/javascript"; script.src = "file1.js"; document.getElementsByTagName("head")[0].appendChild(script); |
進一步封裝：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function loadScript(url, callback){ var script = document.createElement("script"); script.type = "text/javascript"; if(script.readyState){//使用特徵檢測（Feature detection）IE script.onreadystatechange = function(){ if(script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; }else{//其他瀏覽器 script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } |
5. XMLHttpRequest 指令碼注入：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var xhr = new XMLHttpRequest(); xhr.open('get', 'file1.js', true); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ var script = document.createElement('script'); script.type = 'text/javascript'; script.text = xhr.responseText; document.body.appendChild(script); } } }; |