1 .瀏覽器渲染引擎從網(wǎng)絡(luò)層求的文檔,一般情況下文檔會(huì)被分成8kb的大小傳輸万皿。
2 .對(duì)html進(jìn)行解析摧找。解析出Dom Tree
1.解析算法:不是使用常見的自上而下,或者是自下而上的方法進(jìn)行分析牢硅。
2.解析過程需要反復(fù)蹬耘。html是動(dòng)態(tài)代碼。例如腳本元素中的代碼可能會(huì)修改html代碼
3.容錯(cuò)機(jī)制的實(shí)現(xiàn)唤衫,原則上是不規(guī)范的標(biāo)簽也是可以顯示的婆赠。
4.將文本的html文檔,提煉出關(guān)鍵信息佳励,嵌套層級(jí)的樹形結(jié)構(gòu)休里,便于計(jì)算擴(kuò)展
5.dom樹的構(gòu)建是一個(gè)深度遍歷的過程,及當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)赃承。
3 .css解析出Style Rules
1.也是一個(gè)樹形結(jié)構(gòu)妙黍,根據(jù)css文件整理出來的類似dom Tree的樹形結(jié)構(gòu)
2.將多個(gè)css文件中的樣式合并解析出具有樹形結(jié)構(gòu)的style Rules.
4 .將二者關(guān)聯(lián)成Render Tree
1.是一個(gè)計(jì)算好樣式,與html對(duì)應(yīng)的tree瞧剖。
2.在webkit中拭嫁,解析樣式和創(chuàng)建呈現(xiàn)器的過程被稱為附加。每個(gè)DOM節(jié)點(diǎn)都由一個(gè)‘a(chǎn)ttach’方法抓于,附加是同步進(jìn)行的做粤,將節(jié)點(diǎn)插入DOM樹需要調(diào)用新的節(jié)點(diǎn)“attach”方法。
3.樣式計(jì)算捉撮。瀏覽器的默認(rèn)樣式怕品,自定義樣式表,inline樣式元素巾遭,html可視化屬性肉康。
4.規(guī)則的權(quán)重順序。style-id-class-h1
5 .Layout根據(jù)render Tree計(jì)算每個(gè)節(jié)點(diǎn)的信息
1.通過計(jì)算渲染樹中渲染對(duì)象的信息灼舍,計(jì)算出每一個(gè)渲染對(duì)象的位置和尺寸吼和,將其安置在瀏覽器窗口的正確位置,有時(shí)我們修改了dom骑素,可能還需要重新布局
2.對(duì)渲染樹的布局分為全局和局部炫乓,全局對(duì)整個(gè)渲染樹進(jìn)行重新布局,局部布局可以對(duì)渲染樹的某個(gè)部分進(jìn)行重新布局
3.布局是一個(gè)從上到下,從內(nèi)到外的遞歸過程厢岂,從根渲染光督,然后渲染下一級(jí)元素
6 .Painting:根據(jù)計(jì)算好的信息繪制整個(gè)頁面
1.繪制工作是使用用戶界面基礎(chǔ)組件完成的阳距。
2.repaint塔粒,屏幕的一部分要重畫,比如某個(gè)css的背景顏色發(fā)生改變筐摘,但是元素的幾何尺寸沒有變卒茬。
3.reflow,元素的幾何尺寸變了,我們需要重新計(jì)算render tree咖熟。
4.修改網(wǎng)頁的字體的時(shí)候也會(huì)觸發(fā)reflow圃酵。
7 .解析中出現(xiàn)的其他操作
1.瀏覽器解析文檔的時(shí)候,的那個(gè)碰到j(luò)s文件的時(shí)候會(huì)立即停止解析腳本馍管,停止解析文檔郭赐。如果腳本是外部的,會(huì)等待腳本下載完畢确沸,在繼續(xù)解析文檔捌锭。
2.如果腳本解析在解析文檔的時(shí)候請求dom樣式信息,那么這里如果沒有加載和解析樣式罗捎,腳本就會(huì)得到錯(cuò)誤的回復(fù)观谦,解決的辦法就是:放在樣式表加載和解析的時(shí)候,禁止所有的腳本桨菜,而對(duì)于webkit瀏覽器豁状,僅當(dāng)腳本嘗試訪問樣式屬性可能未受到加載的樣式表影響時(shí),才會(huì)禁止該腳本倒得。