瀏覽器運(yùn)行機(jī)制圖:
瀏覽器的運(yùn)行機(jī)制:
1、構(gòu)建DOM樹(parse):渲染引擎解析HTML文檔翔脱,首先將標(biāo)簽轉(zhuǎn)換成DOM樹中的DOM node(包括js生成的標(biāo)簽)生成內(nèi)容樹(Content Tree/DOM Tree);
2利诺、構(gòu)建渲染樹(construct):解析對應(yīng)的CSS樣式文件信息(包括js生成的樣式和尾部css文件)赞庶,而這些文件信息以及HTML中可見的指令(如<b></b>),構(gòu)建渲染樹(Rendering Tree/Frame Tree)眷细;
3拦盹、布局渲染樹(reflow/layout):從根節(jié)點(diǎn)遞歸調(diào)用,計(jì)算每一個元素的大小溪椎、位置等普舆,給出每一個節(jié)點(diǎn)應(yīng)該在屏幕上出現(xiàn)的精確坐標(biāo)恬口;
4、繪制渲染樹(paint/repaint):遍歷渲染樹沼侣,使用UI后端層來繪制每個節(jié)點(diǎn)祖能。
重繪(repaint或redraw):
~ 當(dāng)盒子的位置、大小以及其他屬性蛾洛,例如顏色养铸、字體大小等都確定下來之后,瀏覽器便把這些原色都按照各自的特性繪制一遍轧膘,將內(nèi)容呈現(xiàn)在頁面上钞螟。
~ 重繪是指一個元素外觀的改變所觸發(fā)的瀏覽器行為,瀏覽器會根據(jù)元素的新屬性重新繪制谎碍,是元素呈現(xiàn)新的外觀鳞滨。
~ 觸發(fā)重繪的條件:改變元素改觀屬性。如color蟆淀、background-color等拯啦。
*** 注意:table及內(nèi)部元素可能需要多次計(jì)算才能確定好其在渲染樹中節(jié)點(diǎn)的屬性值,比同等元素要花兩倍的時間熔任,這就是我們盡量避免使用table布局頁面的原因之一褒链。
重排(重構(gòu)/回流/reflow):
~ 當(dāng)渲染樹中的一部分(或全部)因元素的規(guī)模尺寸,布局疑苔,隱藏等改變而需要重新構(gòu)建甫匹,這就稱為回流(reflow)。每個頁面至少需要一次回流夯巷,就是在頁面第一次加載的時候赛惩。
~ 重繪和重排的關(guān)系:在回流的時候,瀏覽器會使渲染樹中受到影響的部分失效趁餐,并重新構(gòu)造這部分渲染樹喷兼,完成回流后,瀏覽器會重新繪制受影響的部分到屏幕中后雷,該過程稱為重繪季惯。
~ 所以,重排必定會引發(fā)重繪臀突,但重繪不一定引發(fā)重排勉抓。
~ 觸發(fā)重排的條件:任何頁面布局和幾何屬性的改變都會觸發(fā)重排,比如:
1候学、頁面渲染初始化藕筋;(無法避免)
2、添加或刪除可見的DOM元素梳码;
3隐圾、元素位置改變伍掀,或者使用動畫;
4暇藏、元素尺寸的改變-----大小蜜笤,外邊距,邊框盐碱;
5把兔、瀏覽器窗口尺寸的變化(resize事件發(fā)生時);
6瓮顽、填充內(nèi)容的改變县好,比如文本的改變或圖片大小改變而引起的計(jì)算機(jī)值寬度和高度的改變;
7趣倾、讀取某些元素的屬性:(offsetLeft/Top/Width/Height聘惦,clientTop/Left/Width/Height,scrollTop/Left/Width/Height儒恋,width/height,getComputedStyle黔漂,currentStyle)
重繪和重排的代價:耗時诫尽,導(dǎo)致瀏覽器卡慢。
優(yōu)化:
~ 1炬守、瀏覽器自己的優(yōu)化:瀏覽器會維護(hù)一個隊(duì)列牧嫉,把所有會引起回流、重繪的操作放入這個隊(duì)列减途,等隊(duì)列中的操作到了一定的數(shù)量或者到了一定的時間間隔酣藻,瀏覽器就會flush隊(duì)列,進(jìn)行一個批處理鳍置。這樣就會讓多次的回流辽剧,重繪變成一次回流重繪。
~ 2税产、我們要注意的優(yōu)化:我們要減少重繪和重排就是要減少對渲染樹的操作怕轿,則我們可以合并多次的DOM和樣式的修改。并減少對style樣式的請求辟拷。
(1)直接改變元素的className撞羽;
(2)display: none; 先設(shè)置元素為display: none; 然后進(jìn)行頁面等操作;設(shè)置完成后將元素設(shè)置為display: block; 這樣的話就引發(fā)兩次重繪和重排衫冻;
(3)不要經(jīng)常訪問瀏覽器的flush隊(duì)列屬性诀紊;如果一定要訪問,可以利用緩存隅俘。將訪問的值存儲下來邻奠,接下來使用就不會再引發(fā)回流了笤喳;
(4)使用cloneNode(true or false)和replaceChild技術(shù),引發(fā)一次回流和重繪惕澎;
(5)將需要多次重排的元素莉测,position屬性設(shè)為absolute或fixed,元素脫離了文檔流唧喉,他的變化不會影響到其他元素捣卤;
(6)如果需要創(chuàng)建多個DOM節(jié)點(diǎn),可以使用DocumentFragment創(chuàng)建完成一次性加入document八孝;
(7)盡量不要使用table布局董朝。