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

資訊專欄INFORMATION COLUMN

前端性能之回流與重繪(reflow && repaint)

ytwman / 1482人閱讀

摘要:寫在金三銀四之際。一個節(jié)點觸發(fā)了,瀏覽器會檢查中其他所有節(jié)點的顯示方式一個節(jié)點觸發(fā)了會導(dǎo)致它的祖先節(jié)點,后代節(jié)點以及在它之后的節(jié)點全部。對性能的影響大于。解決方式控制我們無力去改變,對性能損害的程度,我們能做的只有減少它們發(fā)生的次數(shù)。

寫在金三銀四之際。
因為種種原因想要謀求新的發(fā)展,不得已翻起了塵封已久的高程書;寫起了各種經(jīng)典CSS布局;回顧起記憶略顯模糊的幾個項目。感慨著太多太多的知識點自己都不夠深入甚至缺乏認識,卻又不能急功近利,囫圇吞棗。
牢騷發(fā)完了,苦水吐完了,進入正題。
萬惡之源——無知

回流(reflow),重繪(repaint)都是瀏覽器更新頁面視圖的方式,區(qū)別在于:

對于元素視覺上的改變(如改變outline,background-color,visibility等)會觸發(fā)repaint;

對于元素布局上的改變(增刪節(jié)點,觸發(fā)resize事件,修改style屬性等)會觸發(fā)reflow;

repaint和reflow是DOM操作影響性能的主要原因。一個節(jié)點觸發(fā)了repaint,瀏覽器會檢查DOM Tree中其他所有節(jié)點的顯示方式;一個節(jié)點觸發(fā)了reflow會導(dǎo)致它的祖先節(jié)點,后代節(jié)點以及在它之后的節(jié)點全部reflow。reflow對性能的影響大于repaint。

一個前端開發(fā)人員對這些概念一無所知是一件很恐怖的事情,想想他在寫代碼的時候不知道哪些操作會對性能造成影響,可能會出現(xiàn)這種情況:

var toChange = document.getElementById("target");
toChange.style.background = "#333";
toChange.style.color = "#fff";
toChange.style.border = "1px solid #00f";

這無疑是可以優(yōu)化的,下面我們來看看如何減少reflow,repaint的次數(shù)。

解決方式——控制

我們無力去改變repaint,reflow對性能損害的程度,我們能做的只有減少它們發(fā)生的次數(shù)。

脫離

動畫時時刻刻都在操作著DOM,為了避免動畫使得其他節(jié)點也在時時刻刻reflow,可以將動畫所在的元素設(shè)為position: fixed或者position: absolute,使其脫離文檔流,這個元素reflow時不會影響其他節(jié)點的布局,雖然還是會產(chǎn)生repaint,但相對來說得到了優(yōu)化。

合并

能一次完成的操作就不要分兩次。比如說添加多個節(jié)點時使用DocumentFragment:

var docFragm = document.createDocumentFragment();
var elem, contents;
for(var i = 0; i < textlist.length; i++) {
    elem = document.createElement("p");
    contents = document.createTextNode(textlist[i]);
    elem.appendChild(contents);
    docFragm.appendChild(elem);
}
document.body.appendChild(docFragm);

再比如像上面style那個例子,如果已知變化后樣式,將這些樣式寫成一個class,再去改變元素的class或者直接修改cssText屬性,這兩種方式都將多次reflow縮減為一次。

復(fù)制

對復(fù)制品進行操作也是一種解決方案,比如需要對已有節(jié)點進行DOM操作使用cloneNode():

var original = document.getElementById("container");
var cloned = original.cloneNode(true);
cloned.setAttribute("width", "50%");
var elem, contents;
for(var i = 0; i < textlist.length; i++) {
    elem = document.createElement("p");
    contents = document.createTextNode(textlist[i]);
    elem.appendChild(contents);
    cloned.appendChild(elem);
}
original.parentNode.replaceChild(cloned, original);

使用cloneNode()要注意的是,唯一的參數(shù)代表是否進行深復(fù)制。另外cloneNode()無法復(fù)制事件監(jiān)聽函數(shù),以及表單控件的value。
又比如獲取offsetWidth,getComputedStyle()這些取值操作每次都會觸發(fā)reflow,在第一次調(diào)用時存起來也是復(fù)制的一種。

舍棄

在做好了其他優(yōu)化措施的前提下想要進一步提升性能有時需要舍棄,比如減小動畫幀數(shù),即增大動畫函數(shù)執(zhí)行的間隔,這樣動畫流暢程度會降低,但整個應(yīng)用的性能得到了提升。

其他

減少table的使用,table造成的reflow是其他塊級元素的三倍;

盡量避免改變DOM Tree中高層節(jié)點的class,減小reflow的影響;

利用各種選擇器規(guī)則減少待操作節(jié)點的數(shù)量;

最后,我認為理解reflow和repaint的原理及觸發(fā)情況是十分重要的,在寫每一行代碼時都應(yīng)該明確它對性能的影響。

參考文章:
REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?

Effecitve JavaScript

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/93407.html

相關(guān)文章

  • 性能:深入理解瀏覽器渲染原理 reflow &amp; repaint

    摘要:之后,如果渲染樹發(fā)生了變動,那么可能會觸發(fā)回流或重繪中的一個或二者。在書寫時要避免不必要的層級,書寫時避免嵌套過深規(guī)則過于復(fù)雜,尤其是后代選擇器,匹配選擇器也會耗費更多的。 剛?cè)胄星岸说臅r候是不是經(jīng)常看到有文章說盡量不要用CSS通配符*,CSS選擇器層疊最好不要超過三層,HTML少使用table,結(jié)構(gòu)也要盡量簡單一些...這一切說的不無道理,過多的使用確實會造成瀏覽器渲染的性能降低,當(dāng)...

    WelliJhon 評論0 收藏0
  • 前端性能優(yōu)化——回流重繪

    摘要:前言最近在研究,接著就研究回顧起回流與重繪了?;亓髋c重繪,好像大家都很熟悉的樣子,但是要具體來說說,又說不出什么來。注意回流必將引起重繪,而重繪不一定會引起回流。 前言 最近在研究virtual dom,接著就研究回顧起回流(reflow)與重繪(repaint)了。 回流與重繪,好像大家都很熟悉的樣子,但是要具體來說說,又說不出什么來。下面我是我稍做的整理: 瀏覽器渲染流程 在理解這...

    endiat 評論0 收藏0
  • 前端性能優(yōu)化——回流重繪

    摘要:前言最近在研究,接著就研究回顧起回流與重繪了?;亓髋c重繪,好像大家都很熟悉的樣子,但是要具體來說說,又說不出什么來。注意回流必將引起重繪,而重繪不一定會引起回流。 前言 最近在研究virtual dom,接著就研究回顧起回流(reflow)與重繪(repaint)了。 回流與重繪,好像大家都很熟悉的樣子,但是要具體來說說,又說不出什么來。下面我是我稍做的整理: 瀏覽器渲染流程 在理解這...

    Michael_Lin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<