1. 網(wǎng)頁(yè)解析的過(guò)程
- 輸入U(xiǎn)RL地址后, 下載index.html文件
- 解析html文件,遇到css或者js文件,再下載
2. 瀏覽器的內(nèi)核
常見(jiàn)的瀏覽器內(nèi)核有
- Trident ( 三叉戟):IE、360安全瀏覽器、搜狗高速瀏覽器、百度瀏覽器、UC瀏覽器;
- Gecko( 壁虎) :Mozilla Firefox;
- Presto(急板樂(lè)曲)-> Blink (眨眼):Opera
- Webkit :Safari、360極速瀏覽器、搜狗高速瀏覽器、移動(dòng)端瀏覽器(Android、iOS)
- Webkit -> Blink :Google Chrome,Edge
經(jīng)常說(shuō)的瀏覽器內(nèi)核指的是瀏覽器的排版引擎:
排版引擎(layout engine),也稱(chēng)為瀏覽器引擎(browser engine)、頁(yè)面渲染引擎(rendering engine)或樣版引擎。
3. 解析引擎的工作流程
4. 渲染頁(yè)面的詳細(xì)流程
5. HTML解析過(guò)程
默認(rèn)情況下服務(wù)器會(huì)給瀏覽器返回index.html文件,所以解析HTML是所有步驟的開(kāi)始:
解析HTML,會(huì)構(gòu)建DOM Tree:
6. 解析css規(guī)則
解析的html過(guò)程中,如果遇到CSS的link元素,那么會(huì)由瀏覽器負(fù)責(zé)下載對(duì)應(yīng)的CSS文件:
- 注意:下載CSS文件是不會(huì)影響DOM的解析的;
解析出對(duì)應(yīng)的規(guī)則樹(shù):稱(chēng)之為 CSSOM(CSS Object Model,CSS對(duì)象模型);
7. 構(gòu)建Render Tree
1. 注意一:link元素不會(huì)阻塞DOM Tree的構(gòu)建過(guò)程,但是會(huì)阻塞Render Tree的構(gòu)建過(guò)程
- 這是因?yàn)镽ender Tree在構(gòu)建時(shí),需要對(duì)應(yīng)的CSSOM Tree;
2. 注意二:Render Tree和DOM Tree并不是一一對(duì)應(yīng)的關(guān)系,比如對(duì)于display為none的元素,壓根不會(huì)出現(xiàn)在render tree中;
8. 布局(layout)和繪制(Paint)
在渲染樹(shù)(Render Tree)上運(yùn)行布局(Layout)以計(jì)算每個(gè)節(jié)點(diǎn)的幾何體。
渲染樹(shù)會(huì)表示顯示哪些節(jié)點(diǎn)以及其他樣式,但是不表示每個(gè)節(jié)點(diǎn)的尺寸、位置等信息;
布局是確定呈現(xiàn)樹(shù)中所有節(jié)點(diǎn)的寬度、高度和位置信息;
在繪制階段,瀏覽器將布局階段計(jì)算的每個(gè)frame轉(zhuǎn)為屏幕上實(shí)際的像素點(diǎn);
包括將元素的可見(jiàn)部分進(jìn)行繪制,比如文本、顏色、邊框、陰影、替換元素(比如img)
8. 回流和重繪
8.1 理解回流reflow:(也可以稱(chēng)之為重排)
第一次確定節(jié)點(diǎn)的大小和位置,稱(chēng)之為布局(layout)。
之后對(duì)節(jié)點(diǎn)的大小、位置修改重新計(jì)算稱(chēng)之為回流。
8.2 什么情況下引起回流?
- 比如DOM結(jié)構(gòu)發(fā)生改變(添加新的節(jié)點(diǎn)或者移除節(jié)點(diǎn));
- 比如改變了布局(修改了width、height、padding、font-size等值)
- 比如窗口resize(修改了窗口的尺寸等)
- 比如調(diào)用getComputedStyle方法獲取尺寸、位置信息;
8.3 理解重繪repaint:
第一次渲染內(nèi)容稱(chēng)之為繪制(paint)。
之后重新渲染稱(chēng)之為重繪。
8.4 什么情況下會(huì)引起重繪?
比如修改背景色、文字顏色、邊框顏色、樣式等;
8.5 兩者的關(guān)系
回流一定會(huì)引起重繪,所以回流是一件很消耗性能的事情
8.6 避免發(fā)生回流
- 修改樣式時(shí)盡量一次性修改, 比如通過(guò)cssText修改,比如通過(guò)添加class修改
- 盡量避免頻繁的操作DOM, 我們可以在一個(gè)DocumentFragment或者父元素中, 將要操作的DOM操作完成,再一次性的操作;
- 盡量避免通過(guò)getComputedStyle獲取尺寸、位置等信息;
- 對(duì)某些元素使用position的absolute或者fixed
9. 特殊解析 – composite合成
默認(rèn)情況下,標(biāo)準(zhǔn)流中的內(nèi)容都是被繪制在同一個(gè)圖層(Layer)中的;
一些特殊的屬性,會(huì)創(chuàng)建一個(gè)新的合成層( CompositingLayer ),并且新的圖層可以利用GPU來(lái)加速繪制;
因?yàn)槊總€(gè)合成層都是單獨(dú)渲染的;
創(chuàng)建新圖層的常見(jiàn)屬性:
- 3D transforms
- video、canvas、iframe
- opacity 動(dòng)畫(huà)轉(zhuǎn)換時(shí);
- position: fixed
- will-change:一個(gè)實(shí)驗(yàn)性的屬性,提前告訴瀏覽器元素可能發(fā)生哪些變化;
- animation 或 transition 設(shè)置了opacity、transform;
分層確實(shí)可以提高性能,但是它以?xún)?nèi)存管理為代價(jià),因此不應(yīng)作為 web 性能優(yōu)化策略的一部分過(guò)度使用。