重繪(redraw或repaint),重排(reflow)

瀏覽器運(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布局董朝。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市干跛,隨后出現(xiàn)的幾起案子子姜,更是在濱河造成了極大的恐慌,老刑警劉巖楼入,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件哥捕,死亡現(xiàn)場離奇詭異,居然都是意外死亡嘉熊,警方通過查閱死者的電腦和手機(jī)遥赚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來阐肤,“玉大人凫佛,你說我怎么就攤上這事≡邢В” “怎么了愧薛?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長衫画。 經(jīng)常有香客問我毫炉,道長,這世上最難降的妖魔是什么碧磅? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任碘箍,我火速辦了婚禮,結(jié)果婚禮上鲸郊,老公的妹妹穿的比我還像新娘丰榴。我一直安慰自己,他們只是感情好秆撮,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布四濒。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪盗蟆。 梳的紋絲不亂的頭發(fā)上戈二,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天,我揣著相機(jī)與錄音喳资,去河邊找鬼觉吭。 笑死,一個胖子當(dāng)著我的面吹牛仆邓,可吹牛的內(nèi)容都是我干的鲜滩。 我是一名探鬼主播,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼节值,長吁一口氣:“原來是場噩夢啊……” “哼徙硅!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起搞疗,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤嗓蘑,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后匿乃,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體桩皿,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年幢炸,在試婚紗的時候發(fā)現(xiàn)自己被綠了业簿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡阳懂,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出柜思,到底是詐尸還是另有隱情岩调,我是刑警寧澤,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布赡盘,位于F島的核電站号枕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏陨享。R本人自食惡果不足惜葱淳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望抛姑。 院中可真熱鬧赞厕,春花似錦、人聲如沸定硝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至诲侮,卻和暖如春镀虐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背沟绪。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工刮便, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人绽慈。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓恨旱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親久信。 傳聞我的和親對象是個殘疾皇子窖杀,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容