HTML——reflow(回流)和repaint(重繪)

1.reflow(回流)

當(dāng)DOM的變化影響了元素的幾何信息(比如元素的尺寸吹散,位置),瀏覽器需要重新計算元素的幾何屬性八酒,將其安放在界面的正確位置空民,這個過程叫做回流⌒呙裕回流也叫重排界轩。

引起回流的方式:

1.頁面初始化時,最消耗性能的一次回流衔瓮;

2.刪除或者添加可見的元素時浊猾;

3.元素的位置發(fā)生改變時;

4.元素的大小改變時(例如改變了元素的內(nèi)外邊距热鞍,寬高与殃,邊框大小)碍现;

5.元素的內(nèi)容發(fā)生變化(字體幅疼、文字、圖片更換)昼接;

6.改變?yōu)g覽器窗口尺寸(例如 resize 事件發(fā)生時)爽篷;

7.激活 CSS 偽類(例如 :hover);

8.設(shè)置 style 屬性的值慢睡,因為通過設(shè)置 style 屬性改變節(jié)點樣式的話逐工,每一次設(shè)置都會觸發(fā)一次回流铡溪;

9.查詢某些屬性或調(diào)用某些計算方法:offsetWidth、offsetHeight 等泪喊,會觸發(fā)回流棕硫,為了 “即時性” 和 “準(zhǔn)確性” 。

2.重繪 (repaint)

當(dāng)一個元素的外觀發(fā)生變化袒啼,但沒有改變布局哈扮,重新繪制元素外的過程,叫做重繪蚓再。

引起重繪的方式

1.可見性(visibility)和透明度(opacity)的改變滑肉;

2.顏色的改變;

3.背景的改變摘仅;

4.陰影靶庙、輪廓的改變;

5.文本方向(text-decoration)的改變等娃属。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末六荒,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子矾端,更是在濱河造成了極大的恐慌掏击,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件须床,死亡現(xiàn)場離奇詭異铐料,居然都是意外死亡渐裂,警方通過查閱死者的電腦和手機豺旬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來柒凉,“玉大人族阅,你說我怎么就攤上這事∠ダ蹋” “怎么了坦刀?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蔬咬。 經(jīng)常有香客問我鲤遥,道長,這世上最難降的妖魔是什么林艘? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任盖奈,我火速辦了婚禮,結(jié)果婚禮上狐援,老公的妹妹穿的比我還像新娘钢坦。我一直安慰自己究孕,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布爹凹。 她就那樣靜靜地躺著厨诸,像睡著了一般。 火紅的嫁衣襯著肌膚如雪禾酱。 梳的紋絲不亂的頭發(fā)上微酬,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天,我揣著相機與錄音宇植,去河邊找鬼得封。 笑死,一個胖子當(dāng)著我的面吹牛指郁,可吹牛的內(nèi)容都是我干的忙上。 我是一名探鬼主播,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼闲坎,長吁一口氣:“原來是場噩夢啊……” “哼疫粥!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起腰懂,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤梗逮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后绣溜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體慷彤,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年怖喻,在試婚紗的時候發(fā)現(xiàn)自己被綠了底哗。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡锚沸,死狀恐怖跋选,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情哗蜈,我是刑警寧澤前标,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站距潘,受9級特大地震影響炼列,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜音比,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一俭尖、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧硅确,春花似錦目溉、人聲如沸明肮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽柿估。三九已至,卻和暖如春陷猫,著一層夾襖步出監(jiān)牢的瞬間秫舌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工绣檬, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留足陨,地道東北人。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓娇未,卻偏偏與公主長得像墨缘,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子零抬,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,933評論 2 355

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