摘要：如果你的文件涉及操作，可以直接在里面添加回調(diào)函數(shù)，或者說(shuō)基本上我們的文件都可以寫(xiě)在里面進(jìn)行調(diào)用其實(shí)，這和我們將文件放在底部，在上面加以及異步加載文件的效果是一樣一樣的。

如果大家想繼續(xù)看下面的內(nèi)容的話，有一個(gè)要求，就是回答我一個(gè)問(wèn)題:
你這樣寫(xiě)過(guò)代碼嗎？

window.onload = function(){
    $(".gravatar").on("click",function(){
        //...
    });
    //以及其他操作DOM的節(jié)點(diǎn)
}

如果答案是 yes. 那么，bingo, 這里我們將深入講解，這樣寫(xiě)代碼到底有沒(méi)有IQ。
如果答案是 No. 那么，2333333, 你也可以看一下。 萬(wàn)一哪天用上了呢？
可能會(huì)有童鞋反問(wèn)，那么，我改怎么寫(xiě)呢？
沒(méi)錯(cuò)，這里就是說(shuō)的就是這個(gè)。
使用過(guò)jquery的童鞋，應(yīng)該知道有一個(gè)叫做ready的方法.
即:

$(document).ready(function(){
    //操作DOM相關(guān)
    //...
})

那這個(gè)和上面的寫(xiě)法有什么區(qū)別呢？ 誰(shuí)比較好一點(diǎn)呢(指性能)？
wait wait wait ~
這問(wèn)題有點(diǎn)多誒。 不急。 想想看， jquery老大哥 就是幫你 提高性能的，肯定是下面那種好呢。
Why?
原因我們接著說(shuō).

頁(yè)面加載就是從你輸入網(wǎng)址+enter開(kāi)始，發(fā)生的一些列過(guò)程，最終到頁(yè)面顯示。 從微觀上分的話，頁(yè)面加載有兩部分
一個(gè)是以DOMContentLoaded觸發(fā)為標(biāo)志的DOM樹(shù)的渲染完成
一個(gè)是以輔助資源img,font加載完成為觸發(fā)標(biāo)志的onload事件
他們兩個(gè)的具體區(qū)別就是"資源的加載"這個(gè)關(guān)鍵點(diǎn).

在獲得數(shù)據(jù)響應(yīng)后,頁(yè)面開(kāi)始解析,發(fā)生的過(guò)程為:
(1) 解析HTML結(jié)構(gòu)。
(2) 加載外部腳本和樣式表文件。
(3) 解析并執(zhí)行腳本代碼。
(4) 構(gòu)造HTML DOM模型。//ready執(zhí)行
(5) 加載圖片等外部文件。
(6) 頁(yè)面加載完畢。//load執(zhí)行

其實(shí)，說(shuō)到這里，這篇文章就已經(jīng)結(jié)束了。
想得美。
這只是，頁(yè)面加載很淺的一塊，前端能在頁(yè)面加載上做的工作其實(shí)超級(jí)多。 要知道， 從你輸入網(wǎng)站 + enter鍵后，發(fā)生的過(guò)程為:
重定向=>檢查DNS緩存=> DNS解析 => TCP連接 => 發(fā)請(qǐng)求 => 得到響應(yīng)=> 瀏覽器處理 => 最后onload

你可以數(shù)一數(shù)，前文的頁(yè)面加載和這里的頁(yè)面加載的范圍到底是怎樣的一個(gè)區(qū)別. 也就是說(shuō)上文的頁(yè)面加載其實(shí) 只算是
瀏覽器處理=> 最后onload這一過(guò)程。 懂吧。 很小很小。
所以，這里我們先從宏觀上來(lái)講解一下，頁(yè)面加載的整個(gè)流程.

這樣，干講頁(yè)面加載真的很沒(méi)趣誒， 又沒(méi)有吃的，又沒(méi)有程序員鼓勵(lì)師，又沒(méi)有l(wèi)eader的加薪，憑借的是本寶寶的 滿腔熱情 和 對(duì)技術(shù)的執(zhí)著。 感動(dòng)吧~
開(kāi)玩笑的， 意淫了之后。我們說(shuō)正事。
如果我們想深入了解宏觀頁(yè)面加載，需要掌握ECMA5新給出的一個(gè)API。 performance . 是不是 感覺(jué)很熟悉呢？

以前，我們來(lái)檢查瀏覽器的時(shí)候，大部分情況下是使用

console.time(specialNum);
console.timeEnd(specialNum);

或者

new Date().getTime();
//或者
Date.now();

上面說(shuō)的兩種方法， 獲取的精度都是毫秒級(jí)(10^-6)，對(duì)于一些非常精確的測(cè)試，他們的作用來(lái)還是蠻有限的，而且獲取數(shù)據(jù)的方式，也比較complicated.
ES5提出的performance可以獲取到，微秒級(jí)別(10^-9). 而且，能夠得到后臺(tái)事件的更多時(shí)間數(shù)據(jù)。
他的兼容性是IE9+ 。 覺(jué)得已經(jīng)足夠了。

通常，我們可以從performance.timing對(duì)象上，獲得我們想要的一切時(shí)間值.具體有哪些，我就不贅述了。直接看一張圖:

（from Sam Dutton）
比如，我們獲得重定向時(shí)間用:

var time = performance.timing;
var redirect = time.redirectEnd - time.redirectStart; //單位為微秒

這就已經(jīng)夠我們用的啦。
里面需要進(jìn)行一點(diǎn)解釋
即DOMContentLoaded事件 是在domContentLoaded那段觸發(fā)的。圖中所指的domContentLoaded其實(shí)分為兩塊, 一個(gè)是domContentLoadedEventStart和domContentLoadedEventEnd. 詳見(jiàn)下述說(shuō)明:(from 賴(lài)小賴(lài)小賴(lài))

// 獲取 performance 數(shù)據(jù)
var performance = {
    // memory 是非標(biāo)準(zhǔn)屬性，只在 Chrome 有
    // 財(cái)富問(wèn)題：我有多少內(nèi)存
    memory: {
        usedJSHeapSize:  16100000, // JS 對(duì)象（包括V8引擎內(nèi)部對(duì)象）占用的內(nèi)存，一定小于 totalJSHeapSize
        totalJSHeapSize: 35100000, // 可使用的內(nèi)存
        jsHeapSizeLimit: 793000000 // 內(nèi)存大小限制
    },

    //  哲學(xué)問(wèn)題：我從哪里來(lái)？
    navigation: {
        redirectCount: 0, // 如果有重定向的話，頁(yè)面通過(guò)幾次重定向跳轉(zhuǎn)而來(lái)
        type: 0           // 0   即 TYPE_NAVIGATENEXT 正常進(jìn)入的頁(yè)面（非刷新、非重定向等）
                          // 1   即 TYPE_RELOAD       通過(guò) window.location.reload() 刷新的頁(yè)面
                          // 2   即 TYPE_BACK_FORWARD 通過(guò)瀏覽器的前進(jìn)后退按鈕進(jìn)入的頁(yè)面（歷史記錄）
                          // 255 即 TYPE_UNDEFINED    非以上方式進(jìn)入的頁(yè)面
    },

    timing: {
        // 在同一個(gè)瀏覽器上下文中，前一個(gè)網(wǎng)頁(yè)（與當(dāng)前頁(yè)面不一定同域）unload 的時(shí)間戳，如果無(wú)前一個(gè)網(wǎng)頁(yè) unload ，則與 fetchStart 值相等
        navigationStart: 1441112691935,

        // 前一個(gè)網(wǎng)頁(yè)（與當(dāng)前頁(yè)面同域）unload 的時(shí)間戳，如果無(wú)前一個(gè)網(wǎng)頁(yè) unload 或者前一個(gè)網(wǎng)頁(yè)與當(dāng)前頁(yè)面不同域，則值為 0
        unloadEventStart: 0,

        // 和 unloadEventStart 相對(duì)應(yīng)，返回前一個(gè)網(wǎng)頁(yè) unload 事件綁定的回調(diào)函數(shù)執(zhí)行完畢的時(shí)間戳
        unloadEventEnd: 0,

        // 第一個(gè) HTTP 重定向發(fā)生時(shí)的時(shí)間。有跳轉(zhuǎn)且是同域名內(nèi)的重定向才算，否則值為 0 
        redirectStart: 0,

        // 最后一個(gè) HTTP 重定向完成時(shí)的時(shí)間。有跳轉(zhuǎn)且是同域名內(nèi)部的重定向才算，否則值為 0 
        redirectEnd: 0,

        // 瀏覽器準(zhǔn)備好使用 HTTP 請(qǐng)求抓取文檔的時(shí)間，這發(fā)生在檢查本地緩存之前
        fetchStart: 1441112692155,

        // DNS 域名查詢開(kāi)始的時(shí)間，如果使用了本地緩存（即無(wú) DNS 查詢）或持久連接，則與 fetchStart 值相等
        domainLookupStart: 1441112692155,

        // DNS 域名查詢完成的時(shí)間，如果使用了本地緩存（即無(wú) DNS 查詢）或持久連接，則與 fetchStart 值相等
        domainLookupEnd: 1441112692155,

        // HTTP（TCP） 開(kāi)始建立連接的時(shí)間，如果是持久連接，則與 fetchStart 值相等
        // 注意如果在傳輸層發(fā)生了錯(cuò)誤且重新建立連接，則這里顯示的是新建立的連接開(kāi)始的時(shí)間
        connectStart: 1441112692155,

        // HTTP（TCP） 完成建立連接的時(shí)間（完成握手），如果是持久連接，則與 fetchStart 值相等
        // 注意如果在傳輸層發(fā)生了錯(cuò)誤且重新建立連接，則這里顯示的是新建立的連接完成的時(shí)間
        // 注意這里握手結(jié)束，包括安全連接建立完成、SOCKS 授權(quán)通過(guò)
        connectEnd: 1441112692155,

        // HTTPS 連接開(kāi)始的時(shí)間，如果不是安全連接，則值為 0
        secureConnectionStart: 0,

        // HTTP 請(qǐng)求讀取真實(shí)文檔開(kāi)始的時(shí)間（完成建立連接），包括從本地讀取緩存
        // 連接錯(cuò)誤重連時(shí)，這里顯示的也是新建立連接的時(shí)間
        requestStart: 1441112692158,

        // HTTP 開(kāi)始接收響應(yīng)的時(shí)間（獲取到第一個(gè)字節(jié)），包括從本地讀取緩存
        responseStart: 1441112692686,

        // HTTP 響應(yīng)全部接收完成的時(shí)間（獲取到最后一個(gè)字節(jié)），包括從本地讀取緩存
        responseEnd: 1441112692687,

        // 開(kāi)始解析渲染 DOM 樹(shù)的時(shí)間，此時(shí) Document.readyState 變?yōu)?loading，并將拋出 readystatechange 相關(guān)事件
        domLoading: 1441112692690,

        // 完成解析 DOM 樹(shù)的時(shí)間，Document.readyState 變?yōu)?interactive，并將拋出 readystatechange 相關(guān)事件
        // 注意只是 DOM 樹(shù)解析完成，這時(shí)候并沒(méi)有開(kāi)始加載網(wǎng)頁(yè)內(nèi)的資源
        domInteractive: 1441112693093,

        // DOM 解析完成后，網(wǎng)頁(yè)內(nèi)資源加載開(kāi)始的時(shí)間
        // 在 DOMContentLoaded 事件拋出前發(fā)生
        domContentLoadedEventStart: 1441112693093,

        // DOM 解析完成后，網(wǎng)頁(yè)內(nèi)資源加載完成的時(shí)間（如 JS 腳本加載執(zhí)行完畢）
        domContentLoadedEventEnd: 1441112693101,

        // DOM 樹(shù)解析完成，且資源也準(zhǔn)備就緒的時(shí)間，Document.readyState 變?yōu)?complete，并將拋出 readystatechange 相關(guān)事件
        domComplete: 1441112693214,

        // load 事件發(fā)送給文檔，也即 load 回調(diào)函數(shù)開(kāi)始執(zhí)行的時(shí)間
        // 注意如果沒(méi)有綁定 load 事件，值為 0
        loadEventStart: 1441112693214,

        // load 事件的回調(diào)函數(shù)執(zhí)行完畢的時(shí)間
        loadEventEnd: 1441112693215
    }
};

不過(guò)performance還有另外一個(gè)方法 now

通常，我們會(huì)將該方法和Date.now()進(jìn)行一個(gè)對(duì)比。

performance.now();  //輸出是微秒級(jí)別
Date.now();  //輸出是毫秒級(jí)別

其中Date.now()是輸出 從1970年開(kāi)始的毫秒數(shù).
performance.now()參考的是從.performance.timing.navigationStart(頁(yè)面開(kāi)始加載)的時(shí)間, 到現(xiàn)在的微秒數(shù).
這里，我們可以使用performance.now()來(lái)模擬獲取DomContentLoaded的時(shí)間。

var timesnipe = performance.now();
        document.addEventListener("DOMContentLoaded", function() {
            console.log(performance.now() - timesnipe);
        }, false);

        window.addEventListener("load", function() {
           console.log(performance.now() - timesnipe);
        }, false);
//但是這樣并不等同于,只能算作約等于
performance.timing.domContentLoadedEventStart - performance.timing.domLoading; //檢測(cè)domLoadEvent觸發(fā)時(shí)間

上面不相等的原因就在于，當(dāng)執(zhí)行script的時(shí)候，DOM其實(shí)已經(jīng)開(kāi)始解析DOM和頁(yè)面內(nèi)容， 所以會(huì)造成時(shí)間上 比 真實(shí)時(shí)間略短。另外performance還有其他幾個(gè)API,比如makr,getEntries. 不過(guò)，這里因?yàn)楹晚?yè)面顯示的關(guān)系不是很大，這里就不做過(guò)多的講解了。 有興趣，可以參考:賴(lài)小賴(lài)小賴(lài)
接下來(lái)，我們一步一步來(lái)看一下，頁(yè)面加載的整個(gè)過(guò)程.

這是頁(yè)面加載的第一步(也有可能沒(méi)有). 比如，當(dāng)一個(gè)頁(yè)面已經(jīng)遷移，但是你輸入原來(lái)的網(wǎng)站地址的時(shí)候就會(huì)發(fā)生。
或者， 比如example.com -> m.example.com/home 。 這樣耗費(fèi)的時(shí)間成本是雙倍的。 這里就會(huì)經(jīng)過(guò)兩次DNS解析，TCP連接，以及請(qǐng)求的發(fā)送。所以，在后臺(tái)設(shè)置好正確的網(wǎng)址是很重要的。
如圖:

這里，我們可以使用.performance的屬性,計(jì)算出重定向時(shí)間

redirectTime = redirectEnd - redirectStart

接著我們就到了cache,DNS,TCP,Request,以及Response的階段

如果我們的域名輸入正確的話，接著，瀏覽器會(huì)查詢本地是否有域名緩存(appCache)，如果有，則不需要進(jìn)行DNS解析，否則需要對(duì)域名進(jìn)行解析，找到真實(shí)的IP地址，然后建立3次握手連接， 發(fā)送請(qǐng)求， 最后接受數(shù)據(jù)。 通常，這一部分，可以做的優(yōu)化有:
發(fā)送請(qǐng)求的優(yōu)化:加異地機(jī)房，加CDN.(加快解析request)
請(qǐng)求加載數(shù)據(jù)的優(yōu)化:頁(yè)面內(nèi)容經(jīng)過(guò) gzip 壓縮，靜態(tài)資源 css/js 等壓縮(request到response的優(yōu)化)
ok~ 使用performance測(cè)試時(shí)間為:

// DNS 緩存時(shí)間
    times.appcache = t.domainLookupStart - t.fetchStart;
// TCP 建立連接完成握手的時(shí)間
    times.connect = t.connectEnd - t.connectStart;
//DNS 查詢時(shí)間
    times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
//整個(gè)解析時(shí)間
var lookup = t.responseEnd - t.fetchStart;

其實(shí)，只要對(duì)照那個(gè)圖查查over，不用太關(guān)注上面的式子。使用時(shí)需要注意，performance的相關(guān)操作，最好放在onload的回調(diào)中執(zhí)行，避免出現(xiàn)異常的bug.

這里的過(guò)程其實(shí)就和開(kāi)頭的時(shí)候說(shuō)的一樣
(1) 解析HTML結(jié)構(gòu)。
(2) 加載外部腳本和樣式表文件。
(3) 解析并執(zhí)行腳本代碼。
(4) 構(gòu)造HTML DOM模型。//ready執(zhí)行
(5) 加載圖片等外部文件。
(6) 頁(yè)面加載完畢。//load執(zhí)行
ok~ 這里，我們來(lái)計(jì)算一下時(shí)間:
上performance

//計(jì)算DOMContentLoaded觸發(fā)時(shí)間
var contentLoadedTime = t.domContentLoadedEventStart-t.domLoading
//計(jì)算load觸發(fā)時(shí)間
var loadTime = t.domComplete - t.domLoading;

更直觀的，我們可以在Chrome的developer工具的network選項(xiàng)里面得到我們想要的答案.

這兩個(gè)線，分別代表的是DOMContentLoaded和onload觸發(fā)的時(shí)間。 這也更能直觀的看出，DOMContentLoaded事件比onload事件先觸發(fā)吧?，F(xiàn)在回到我們開(kāi)頭的那個(gè)問(wèn)題。我們到底該將代碼寫(xiě)在什么地方呢？
這里，這個(gè)問(wèn)題就很好回答了。如果你的js文件涉及DOM操作，可以直接在DOMContentLoaded里面添加回調(diào)函數(shù)，或者說(shuō)基本上我們的js文件都可以寫(xiě)在里面進(jìn)行調(diào)用. 其實(shí)，這和我們將js文件放在body底部，在js上面加async,defer,以及hard Callback異步加載js文件的效果是一樣一樣的。
上面一部分我有篇文章已經(jīng)介紹過(guò)了，所以這里就不贅述了。
接下來(lái)我們要做的最后一件事，就是看看jquery老大哥，他的ready事件的原理到底是什么.

jquery主要做的工作就是兼容IE6,7,8實(shí)現(xiàn)DOMContentLoaded的效果.由于現(xiàn)在主流只要兼容到IE8, 剩下IE6,7我們不做過(guò)多的分析了。
目前流行的做法有兩種， 一種是使用readystatechange實(shí)現(xiàn)，另外一種使用IE自帶的doScroll方法實(shí)現(xiàn).

這其實(shí)是IE6，7，8的特有屬性，用它來(lái)標(biāo)識(shí)某個(gè)元素的加載狀態(tài)。 但是現(xiàn)在w3c規(guī)定，只有xhr才有這個(gè)事件。 所以，這里，我們一般只能在IE中使用readyStateChange否則，其他瀏覽器是沒(méi)有效果的。
詳見(jiàn):readyState兼容性分析
這樣，我們模擬jquery的ready事件時(shí)就可以使用:

document.onreadystatechange = function () {
  if (document.readyState == "interactive" || document.readyState == "complete") {
        //添加回調(diào)...
  }
}

理想很豐滿，現(xiàn)實(shí)很骨感。 事實(shí)上, 當(dāng)readyState為interactive時(shí)， Dom的結(jié)構(gòu)并未完全穩(wěn)定，如果還有其他腳本影響DOM時(shí), 這時(shí)候可能會(huì)造成bug。 另外為complete時(shí)， 這時(shí)候圖片等相關(guān)資源已經(jīng)加載完成。 這個(gè)時(shí)候模擬觸發(fā)DOMContentLoaded事件，其實(shí)和onload事件觸發(fā)時(shí)間并沒(méi)有太久的時(shí)間距離。 這種方式兼容低版本IE還是不太可靠的。
另外提供一個(gè)doScroll方式

這是IE低版本特有的，不過(guò)IE11已經(jīng)棄用了。 使用scrollLeft和scrollTop代替. doScroll 的主要作用是檢測(cè)DOM結(jié)構(gòu)是否問(wèn)題， 通常我們會(huì)使用輪詢來(lái)檢測(cè)doScroll是否可用，當(dāng)可用的時(shí)候一定是DOM結(jié)構(gòu)穩(wěn)定，圖片資源還未加載的時(shí)候。
我們來(lái)看一下jquery中實(shí)現(xiàn)doScroll的兼容:

  //低版本的IE瀏覽器，這里添加監(jiān)聽(tīng)作為向下兼容，如果doScroll執(zhí)行出現(xiàn)bug，也能保證ready函數(shù)的執(zhí)行
            document.attachEvent( "onreadystatechange", DOMContentLoaded );
            window.attachEvent( "onload", jQuery.ready );
//在ready里面會(huì)對(duì)執(zhí)行做判斷，確保只執(zhí)行一次
            var top = false;
// 如果是IE且不是iframe就通過(guò)不停的檢查doScroll來(lái)判斷dom結(jié)構(gòu)是否ready
try {
    top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
    (function doScrollCheck() {
        if ( !jQuery.isReady ) {//ready方法沒(méi)有執(zhí)行過(guò)
            try {
                // 檢查是否可以向左scroll滑動(dòng),當(dāng)dom結(jié)構(gòu)還沒(méi)有解析完成時(shí)會(huì)拋出異常
                top.doScroll("left");
            } catch(e) {
                //遞歸調(diào)用,直到當(dāng)dom結(jié)構(gòu)解析完成
                return setTimeout( doScrollCheck, 50 );
            }
            //沒(méi)有發(fā)現(xiàn)異常,表示dom結(jié)構(gòu)解析完成,刪除之前綁定的onreadystatechange事件
            
            //執(zhí)行jQuery的ready方法
            jQuery.ready();
        }
    })();
}
//看看jQuery.ready()方法:
ready:function(wait) {
    if (wait === true ? --jQuery.readyWait : jQuery.isReady) {
        //判斷頁(yè)面是否已完成加載并且是否已經(jīng)執(zhí)行ready方法
        //通過(guò)isReady狀態(tài)進(jìn)行判斷, 保證只執(zhí)行一次
        return;
    }
    if (!document.body) {
        return setTimeout(jQuery.ready);
    }
    jQuery.isReady = true; //指示ready方法已被執(zhí)行
      //這也是上面兩次綁定事件的原因,會(huì)保證只執(zhí)行一次
    if (wait !== true && --jQuery.readyWait > 0) {
        return;
    }
    //以下是處理ready的狀態(tài)
    readyList.resolveWith(document, [jQuery]);
    if (jQuery.fn.trigger) {
    //解除引用
        jQuery(document).trigger("ready").off("ready");
    }
}

以上就是jquery 兼容ready的方法。
ending~