瀏覽器渲染頁面過程

一、瀏覽器載入和渲染html的順序

二、js的載入

3、因為瀏覽器的載入是從上到下一行一行的載入的，所以如果頁面同事定義了兩個相同命名的js函式，後面的函式會覆蓋前面的函式。

三、html頁面載入和解析流程

四、 domcontentloaded事件

domcontentloaded事件在許多webkit瀏覽器以及ie9上都可以使用。

domcontentloaded事件本身不會等待css檔案、、iframe載入完成。

觸發時機：載入完頁面，解析完所有標籤（不包括執行css和js），並如規範中所說的設定interactive和執行每個靜態的script標籤中的js，然後觸發。而js的執行，需要等待位於它前面的css載入（如果是外聯的話）、執行完成，因為js可能會依賴位於它前面的css計算出來的樣式。

現代瀏覽器會併發的預載入css, js，也就是一開始就併發的請求這些資源，但是，執行css和js的順序還是按原來的依賴順序（js的執行要等待位於其前面的css和js載入、執行完）。先載入完成的資源，如果其依賴還沒載入、執行完，就只能等著。

img是否需要解碼、繪圖（paint）出來，確實需要等css載入、執行完才能知道。也就是說，css會阻塞img的展現！那麼js呢？

在有js而沒有css的頁面中，img居然能夠在收到資料後就立刻開始解碼、繪圖（paint)，也就是說，js並沒有阻塞img的展現！這跟我們以前理解的js會阻塞img資源的傳統觀念不太一樣，看來chrome對img的載入和展現做了新的優化。

執行順序簡單歸納為：

立即執行函式 =》domready  =》 onload

五、js執行時機

head裡的

ｉｅ下，用document.write方法引用js檔案時，js檔案會出現尚未載入就直接呼叫的情況，因此建議將引用的js檔案單獨放在乙個script塊中。以確保引用的js檔案完全載入後，再繼續執行後面的document.write內容。

在js裡出現同名函式後，你在web頁面裡呼叫改js函式後，總是呼叫頁面中最後乙個載入的函式。

六、jquery domreardy事件

在jquery裡面，我們可以看到兩種寫法:$(function(){}) 和$(document).ready(function(){})

這兩個方法的效果都是一樣的，都是在dom文件樹載入完之後執行乙個函式（注意，這裡面的文件樹載入完不代表全部檔案載入完）。

而window.onload是在dom文件樹載入完和所有檔案載入完之後執行乙個函式。也就是說$(document).ready要比window.onload先執行。

那麼jquery裡面$(document).ready函式的實現：

document.ready =function (callback) , 
false
)       }
//相容ie
else
if(document.attachevent) })}
else
if (document.lastchild ==document.body) 
}  window.onload =function () ;
document.ready(function () );

七、 dom（文件物件模型 document object model）

參考：w3c html5規範：

瀏覽器渲染頁面過程

瀏覽器渲染頁面過程

瀏覽器渲染頁面過程

瀏覽器渲染頁面的過程

相關推薦