成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

20170629-重排與重繪

Dogee / 2761人閱讀

摘要：完成重排后，瀏覽器會(huì)重新繪制受到影響的部分到屏幕中，該過(guò)程稱為重繪重繪和重排操作都是代價(jià)昂貴的操作，它們會(huì)導(dǎo)致應(yīng)用程序的反應(yīng)遲鈍，所以應(yīng)該盡可能減少這類過(guò)程的發(fā)生。

瀏覽器下載完頁(yè)面中的所有內(nèi)容：HTML、JavaScript、CSS、圖片——之后會(huì)解析并生成兩個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)：

DOM樹(shù)：表示頁(yè)面結(jié)構(gòu)

渲染樹(shù)：表示DOM節(jié)點(diǎn)如何顯示

DOM樹(shù)中的每一個(gè)需要顯示的節(jié)點(diǎn)在渲染樹(shù)中至少存在一個(gè)對(duì)應(yīng)的節(jié)點(diǎn)(隱藏的DOM元素在渲染樹(shù)中沒(méi)有對(duì)應(yīng)的節(jié)點(diǎn))。渲染樹(shù)中的節(jié)點(diǎn)被稱為“幀”或者“盒子”，理解頁(yè)面元素為一個(gè)具有填充(padding)、邊距(margin)、邊框(border)和位置(position)的盒子。一旦DOM樹(shù)和渲染樹(shù)構(gòu)建完成，瀏覽器就開(kāi)始顯示(繪制 paint)頁(yè)面元素

當(dāng)DOM的改變影響了元素幾何屬性（例如寬和高）——瀏覽器就需要重新計(jì)算元素的幾何特性，同樣其他元素的幾何屬性和位置也會(huì)因此受到影響。瀏覽器會(huì)使渲染樹(shù)中受到影響的部分失效，并重新構(gòu)造渲染樹(shù)。這個(gè)過(guò)程稱為重排(reflow)。完成重排后，瀏覽器會(huì)重新繪制受到影響的部分到屏幕中，該過(guò)程稱為重繪(repaint)

重繪和重排操作都是代價(jià)昂貴的操作，它們會(huì)導(dǎo)致web應(yīng)用程序的UI反應(yīng)遲鈍，所以應(yīng)該盡可能減少這類過(guò)程的發(fā)生。

引起重排的原因

添加或刪除可見(jiàn)的DOM元素

元素位置改變

元素尺寸改變

內(nèi)容改變（例如：文本改變或圖片被另一個(gè)不同尺寸的圖片替代）

頁(yè)面渲染初始化

瀏覽器窗口尺寸改變

渲染樹(shù)變化的排隊(duì)與刷新

由于每次重排都會(huì)產(chǎn)生計(jì)算消耗，大多數(shù)瀏覽器通過(guò)隊(duì)列化修改和批量執(zhí)行來(lái)優(yōu)化重排過(guò)程（將多個(gè)重排過(guò)程合并成一次）。然而，某些操作會(huì)強(qiáng)制刷新隊(duì)列并要求隊(duì)列中的重排立即執(zhí)行（這樣會(huì)使瀏覽器的優(yōu)化策略失效）。

獲取布局信息的操作會(huì)導(dǎo)致強(qiáng)制刷新隊(duì)列，使得瀏覽器不得不執(zhí)行渲染隊(duì)列中的“待處理變化”并觸發(fā)重排以返回正確的值

offsetTop，offsetLeft，offsetWidth，offsetHeight

scrollTop，scrollLeft，scrollWidth，scrollHeight

clientTop，clientLeft，clientWidth，clientHeight

getComputedStyle()

優(yōu)化方法：盡量不要在布局信息改變時(shí)查詢它，可以在布局信息改變完畢之后再去查詢

最小化重繪和重排

重繪和重排的代價(jià)非常昂貴，因此一個(gè)好的提高程序響應(yīng)速度的策略就是減少此類操作的發(fā)生。為了減少發(fā)生次數(shù)，應(yīng)該合并多次對(duì)DOM和樣式的修改，然后一次處理掉。

合并多次對(duì)樣式的修改 
var el = document.getElementById("myDiv")
el.style.borderLeft = "1px"
el.style.borderRight = "2px"
el.style.padding = "5px"

上面的例子中，存在兩個(gè)問(wèn)題：

每個(gè)樣式屬性的改變都會(huì)影響元素的集合結(jié)構(gòu)，最糟糕的情況下，會(huì)導(dǎo)致瀏覽器觸發(fā)三次重排(大部分現(xiàn)代瀏覽器都為此做了優(yōu)化，只會(huì)觸發(fā)一次重排)

上面的代碼訪問(wèn)了4次DOM

優(yōu)化方法：使用cssText屬性，合并所有的改變?nèi)缓笠淮翁幚?/p> 

var el = document.getElementById("myDiv")
el.style.cssText +="border-left: 1px; border-right: 2px; padding: 5px;";
批量修改DOM

當(dāng)需要對(duì)DOM元素進(jìn)行一系列操作時(shí)，可以通過(guò)以下步驟來(lái)減少重繪和重排的次數(shù)

使元素脫離文檔流

對(duì)其進(jìn)行一些列操作

把元素帶回文檔中

使元素脫離文檔流的方法：

隱藏元素，施加修改，重新顯示

使用document fragment在當(dāng)前DOM之外構(gòu)建一個(gè)子樹(shù)，再把它拷貝會(huì)文檔

將元素元素拷貝到另一個(gè)脫離文檔的節(jié)點(diǎn)中，修改副本，完成后再替換原始元素。

緩存布局信息

在上面的介紹中講到了，瀏覽器通過(guò)隊(duì)列化修改和批量執(zhí)行的方式減少重排次數(shù)。但是當(dāng)查詢布局信息時(shí)（如獲取偏移量、滾動(dòng)位置、計(jì)算出的樣式值），瀏覽器為了返回最新值，會(huì)刷新隊(duì)列并應(yīng)用所有的變更。因此最好的做法應(yīng)該是盡量減少布局信息的獲取次數(shù)，獲取后把它復(fù)制給局部變量，然后再操作局部變量。

IE和:hover

避免在大量元素上使用:hover這種效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112191.html

相關(guān)文章

  • 20170629-重排與重繪

    摘要：完成重排后，瀏覽器會(huì)重新繪制受到影響的部分到屏幕中，該過(guò)程稱為重繪重繪和重排操作都是代價(jià)昂貴的操作，它們會(huì)導(dǎo)致應(yīng)用程序的反應(yīng)遲鈍，所以應(yīng)該盡可能減少這類過(guò)程的發(fā)生。 瀏覽器下載完頁(yè)面中的所有內(nèi)容：HTML、JavaScript、CSS、圖片——之后會(huì)解析并生成兩個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)： DOM樹(shù)：表示頁(yè)面結(jié)構(gòu) 渲染樹(shù)：表示DOM節(jié)點(diǎn)如何顯示 DOM樹(shù)中的每一個(gè)需要顯示的節(jié)點(diǎn)在渲染樹(shù)中至少存...

    Miracle 評(píng)論0 收藏0

  • 20170629-重排與重繪

    摘要：完成重排后，瀏覽器會(huì)重新繪制受到影響的部分到屏幕中，該過(guò)程稱為重繪重繪和重排操作都是代價(jià)昂貴的操作，它們會(huì)導(dǎo)致應(yīng)用程序的反應(yīng)遲鈍，所以應(yīng)該盡可能減少這類過(guò)程的發(fā)生。 瀏覽器下載完頁(yè)面中的所有內(nèi)容：HTML、JavaScript、CSS、圖片——之后會(huì)解析并生成兩個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)： DOM樹(shù)：表示頁(yè)面結(jié)構(gòu) 渲染樹(shù)：表示DOM節(jié)點(diǎn)如何顯示 DOM樹(shù)中的每一個(gè)需要顯示的節(jié)點(diǎn)在渲染樹(shù)中至少存...

    shiweifu 評(píng)論0 收藏0

  • 重排與重繪

    摘要：原文地址在頁(yè)面的生命周期中，一些效果的交互都有可能發(fā)生重排和重繪，這些都會(huì)使我們付出高額的性能代價(jià)。更比而言，重排會(huì)產(chǎn)生比重繪更大的開(kāi)銷。觸發(fā)重繪的操作主要有背景色等屬性的改變我們應(yīng)當(dāng)注意的是重繪不一定導(dǎo)致重排，但重排一定會(huì)導(dǎo)致重繪。 原文地址：http://www.cun-xu.cn/index.ph... 在頁(yè)面的生命周期中，一些效果的交互都有可能發(fā)生重排（Layout）和重繪（P...

    warmcheng 評(píng)論0 收藏0

  • JavaScript：回流（重排）與重繪

    摘要：回流也被稱為重排，其實(shí)從字面上來(lái)看，重排更容易讓人形象易懂即重新排版整個(gè)頁(yè)面。重繪當(dāng)頁(yè)面元素樣式改變不影響元素在文檔流中的位置時(shí)如，，，瀏覽器只會(huì)將新樣式賦予元素并進(jìn)行重新繪制操作。你真的了解回流和重繪嗎 簡(jiǎn)單先了解一下瀏覽器的渲染過(guò)程（圖片來(lái)自于網(wǎng)絡(luò)） showImg(https://segmentfault.com/img/bVbaC2e?w=624&h=289); 瀏覽器生成渲染...

    Jioby 評(píng)論0 收藏0

  • innerHTML vs createElement

    摘要：，當(dāng)元素插入后仍然保留對(duì)元素的指針。能夠獲得事件處理函數(shù)，而生成的新無(wú)法獲得原先設(shè)置的事件處理函數(shù)。某些情況下，更加快速。無(wú)疑，在大多數(shù)情況下，更為快速且更加易用，但是使用的時(shí)候小心上述的那個(gè)問(wèn)題就好。 WilsonLius blog 首發(fā)地址兩者生成dom的方式有什么優(yōu)劣呢？首先讓我們看一個(gè)小問(wèn)題再引入正題～ 如何重復(fù)插入一個(gè)相同的html結(jié)構(gòu)呢？ //錯(cuò)誤的 window.onlo...

    paulli3 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Dogee

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<