我們都知道，頁面加載是有順序的。讓我們先來理一下頁面的展示過程：

當你輸入url并按下回車時

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

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

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

• GUI渲染線程 ，負責渲染瀏覽器界面，解析HTML、css，構建DOM樹和RenderObject樹，布局和繪制 ——一旦界面因為某種操作引發(fā)了回流，此線程就會執(zhí)行
• JS引擎線程 ——和GUI線程互斥，在js引擎執(zhí)行時，GUI線程被掛起
• 事件觸發(fā)線程 ——依賴js的隊列機制完成（當一個事件觸發(fā)時該線程會把事件添加到待處理隊列的隊尾，等待js引擎處理）
• 定時器觸發(fā)線程 ——依賴js的隊列機制完成
• 異步http請求線程

這其中有一個重要的地方：JavaScript執(zhí)行線程和渲染線程互斥 ！而且JavaScript線程的優(yōu)先級最高！
所以一旦在HTML中發(fā)現(xiàn)了<script> ，瀏覽器便會暫停其余HTML元素的顯示轉而去“馬上加載JS代碼”，這可能會導致兩個問題的發(fā)生：

• 頁面「一片空白」
• 報錯 —— JS無法訪問未知（還沒開始的）加載內容

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

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

但事實上，我們更需要一種方法，讓JS在“瀏覽器獲得內容后、真正展示在屏幕上前”就開始執(zhí)行。
比較幸運（也可能是不幸）的是，jQuery實現(xiàn)了這個方法：

$(document).ready(function(){
	//...
})

不過據(jù)說jQuery的ready和原生JS的DOMContentLoaded效果是一樣的：網(wǎng)頁中所有 DOM 結構繪制完畢后就執(zhí)行（可能 DOM 元素關聯(lián)的內容并沒有加載完）
除此之外，JS中的 window.onload 和jQuery中的 $(window).load() 是等價的

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

function init(){
	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 ("<script id='__ie_onload defer' src='javascript:void(O);'><\/script>" );
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
	if( this.readyState == " complete" ) {
		init() //調用加截處理器
	};
}
//針對Safari 
if (/WebKit/i.test(navigator.userAgent)) {
	var timer = setinterval( function (){
		if( /loaded | complete/.test(document.readyState)) {
			init() //調用加載處理器
		}
}. 10);
//針對其他瀏覽器
window.onload = init;

到此這篇關于在頁面加載之后執(zhí)行JavaScript的文章就介紹到這了,更多相關頁面加載后執(zhí)行js內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論