前幾天研究了乙個下開發者工具的performance面板，挺有意思的。檔案的載入順序又對頁面效能有著至關重要的影響。所以我用performance面板研究了以下幾種配置的載入順序，把過程和結果記錄下來，供以後開發時參考，相信對其他人也有用。
js放在body最後的載入。
js放在body前面的載入。
async，defer的載入。
settimeout的載入。
onload事件的載入。
domcontentloaded事件的載入。
onreadystatechange事件的載入。
加入jquery的載入。
利用開發者工具的performance面板可以檢視首屏時間和載入情況。方法是：
開啟chrome開發者工具的performance面板。
點選左上角實心小圓點右邊的重新整理圖示。（快捷鍵：ctrl + shift + e）
**如下：
div
var a = 1;
while(a < 1000000000)
圖一表示一直到2800ms才開始渲染首屏；圖二表示css先載入，js後載入，他們是同時載入的，並且雖然js先載入完，但是並沒有執行，而是等到css載入完並執行之後再執行的，這也符合了誰寫在前面誰先執行的規範。
從第一張圖可以得出，js的執行阻塞了首屏的渲染，一直到2800ms才開始渲染首屏。這表示js的執行阻塞了渲染。
**如下：
div
var a = 1;
while(a < 1000000000)
圖一表示一直到2800ms才開始渲染首屏；圖二表示css先載入，js後載入，他們是同時載入的，並且雖然js先載入完，但是並沒有執行，而是等到css載入完並執行之後再執行的，這也符合了誰寫在前面誰先執行的規範。
從第一張圖可以得出，js的執行阻塞了首屏的渲染，一直到2800ms才開始渲染首屏。這符合我們的預期。
所以從上面2個例項可以得出：
那麼如何讓js不阻塞頁面的渲染，提高首屏時間呢？我們繼續進行例項。
我們給script標籤加上defer。**如下：
div
var a = 1;
while(a < 1000000000)
從第一張圖中可以看出，首屏時間並沒有變化。
我們給script標籤加上async。**如下：
div
var a = 1;
while(a < 1000000000)
var a = 1;
while(a < 1000000000)
從第一張圖中可以看出，首屏時間並沒有變化。
我們給haha.js加上settimeout。**如下：
div
settimeout(function()
}, 2000);
可以看到，首屏時間得到極大優化，大約100ms就出現首屏，並且直到2000ms才開始執行js。
所以有很多人利用settimeout進行延遲載入，延遲幾秒後再通過js插入script標籤進行載入js。但是這樣有乙個確定，就是我們精確地確定這個延遲時間。
我們給haha.js加上onload。**如下：
div
window.onload = function ()
}
可以看到，不僅首屏時間得到優化，而且js很早就開始執行了，大約從55ms就開始載入js。
那給haha.js加上domcontentloaded事件呢？。**如下：
div
document.addeventlistener("domcontentloaded", function(event)
});
可以看到，雖然在domcontentloaded事件之後(大約51.5ms)立即執行js，但是這個時候domcontentloaded事件並沒有結束，直到js執行完成之後才結束，然後才進行頁面渲染。大大延遲了首屏時間。
那給haha.js加上onreadystatechange事件呢？。**如下：
div
document.onreadystatechange = function () }}
可以看到，首屏時間得到優化，而且在readystate為complete之後(大約48ms)立即執行js，但是這個時候並不能判斷dom是否已經載入完成。
我先引入jquery再引入haha.js。**如下：
div
var a = 1;
while(a < 1000000000)
可以看到，首屏時間奇蹟般的得到了優化。就算我們並沒有使用ready方法，但是也得到了優化。可能jquery裡面進行了某些優化處理吧。
而且，經過試驗，當haha.js裡面用domcontentloaded事件時，首屏時間也奇蹟般的得到了優化。所以我猜測，jquery對domcontentloaded事件進行了處理，讓他提前結束？？？
誰先載入誰先執行，除非async。
defer沒卵用。
有jquery用jquery，沒jquery用onload，千萬別單獨使用domcontentloaded。(其中的機制可要好好琢磨了。)
為軟體加面板
詳細資訊 輔助開發工具 將skinmagictrial.lib,skinmagictrial.dll,f檔案拷到當前目錄 lib加入工程中.initinstance 函式中 verify 1 initskinmagiclib afxgetinstancehandle null null,null v...
JS換面板及cookie讀寫
要做 切換，就涉及到js訪問cookie的問題 function getcookieval offset 獲得cookie解碼後的值 function setcookie name,value 設定cookie值 function delcookie name 刪除cookie function g...
JS 基礎回看 tag
1.document.write 可用於直接向 html 輸出流寫內容。簡單的說就是直接在網頁中輸出內容。2.alert 字串或變數 3.confirm str confirm 訊息對話方塊通常用於允許使用者做選擇的動作。4.prompt str1,str2 prompt 彈出訊息對話方塊,通常用於...