第在頁面加載之后執(zhí)行JavaScript我們都知道，頁面加載是有順序的。讓我們先來理一下頁面的展示過程：

當(dāng)你輸入url并按下回車時(shí)

首先從本地查找域名，有的話直接用hosts文件里的ip地址，否則查詢DNS，得到ip地址建立TCP連接進(jìn)行三次握手客戶端發(fā)送http請求服務(wù)端處理，并返回結(jié)果給客戶端關(guān)閉TCP連接需要四次揮手瀏覽器收到結(jié)果，開始解析資源（JS、CSS、HTML），解析HTML生成的dom樹，和同時(shí)解析css生成的cssom樹結(jié)合生成渲染樹根據(jù)渲染樹渲染頁面

當(dāng)然，再詳細(xì)的比如：如何解析生成DOM樹、瀏覽器在三次握手四次揮手的同時(shí)做了什么、CSSOM樹是怎么和DOM樹一一對應(yīng)的這些如果你不是在做系統(tǒng)，似乎是無關(guān)緊要的至少對本文來說是這樣的。

經(jīng)過上面的步驟，瀏覽器已經(jīng)拿到了想要的結(jié)果，下一步：瀏覽器渲染進(jìn)程啟用多個(gè)線程協(xié)助完成頁面渲染

GUI渲染線程，負(fù)責(zé)渲染瀏覽器界面，解析HTML、css，構(gòu)建DOM樹和RenderObject樹，布局和繪制一旦界面因?yàn)槟撤N操作引發(fā)了回流，此線程就會(huì)執(zhí)行JS引擎線程和GUI線程互斥，在js引擎執(zhí)行時(shí)，GUI線程被掛起事件觸發(fā)線程依賴js的隊(duì)列機(jī)制完成（當(dāng)一個(gè)事件觸發(fā)時(shí)該線程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾，等待js引擎處理）定時(shí)器觸發(fā)線程依賴js的隊(duì)列機(jī)制完成異步http請求線程

這其中有一個(gè)重要的地方：JavaScript執(zhí)行線程和渲染線程互斥！而且JavaScript線程的優(yōu)先級(jí)最高！

所以一旦在HTML中發(fā)現(xiàn)了script，瀏覽器便會(huì)暫停其余HTML元素的顯示轉(zhuǎn)而去馬上加載JS代碼，這可能會(huì)導(dǎo)致兩個(gè)問題的發(fā)生：

頁面「一片空白」報(bào)錯(cuò)JS無法訪問未知（還沒開始的）加載內(nèi)容

所以，我們需要一種方法來暫停JS執(zhí)行。

很多人第一時(shí)間會(huì)選擇window.onload：恕我直言，這確實(shí)不是好的方法，它讓用戶等的太久了。你稍微一查就能知道：onload方法會(huì)等待頁面上所有的文字、table、img加載完成后才觸發(fā)。如果你真的要用，筆者倒是更推薦DOMContentLoaded，這個(gè)onload的變異產(chǎn)品會(huì)等到文字加載完成后立即觸發(fā)你完全不必考慮圖片的大小對頁面初始加載時(shí)間的影響，如果你不會(huì)調(diào)用圖片的話（前面說了，JS無法訪問未知加載內(nèi)容）。

但事實(shí)上，我們更需要一種方法，讓JS在瀏覽器獲得內(nèi)容后、真正展示在屏幕上前就開始執(zhí)行。

比較幸運(yùn)（也可能是不幸）的是，jQuery實(shí)現(xiàn)了這個(gè)方法：

$(document).ready(function(){

//...

})

不過據(jù)說jQuery的ready和原生JS的DOMContentLoaded效果是一樣的：網(wǎng)頁中所有DOM結(jié)構(gòu)繪制完畢后就執(zhí)行（可能DOM元素關(guān)聯(lián)的內(nèi)容并沒有加載完）

除此之外，JS中的window.onload和jQuery中的$(window).load()是等價(jià)的

哦，這里并不是盲目推崇jQuery，你完全可以去自己封裝一個(gè)。比如jQuery的ready()和JS的DOMContentLoaded實(shí)際上都實(shí)現(xiàn)了（或基于）這樣一段代碼：

functioninit(){

if(arguments.callee.done)return;

arguments.callee.done=true;

if(timer)clearInterval(timer);

//...

//判斷瀏覽器

//針對Mozilla/Opera9

if(document.addEventListener){

document.addEventListener('DOMContentLoaded',init,false)

//針對IE

document.write("scriptid='__ie_onloaddefer'src='javascript:void(O);'\/script

varscript=document.getElementById("__ie_onload");

script.onreadystatechange=function(){

if(this.readyState=="complete"){

init()//調(diào)用加截處理器

//針對Safari

if(/WebKit/i.test(navigator.userAgent)){

vartimer=setinterval(function(){

if(/loade