有關(guān)javascript的性能優(yōu)化 (repaint和reflow)
repaint(重繪) ,repaint發(fā)生更改時(shí),元素的外觀被改變,且在沒有改變布局的情況下發(fā)生,如改變outline,visibility,background color,不會(huì)影響到dom結(jié)構(gòu)渲染。
reflow(渲染),與repaint區(qū)別就是他會(huì)影響到dom的結(jié)構(gòu)渲染,同時(shí)他會(huì)觸發(fā)repaint,他會(huì)改變他本身與所有父輩元素(祖先),這種開銷是非常昂貴的,導(dǎo)致性能下降是必然的,頁面元素越多效果越明顯。
何時(shí)發(fā)生:
. DOM元素的添加、修改(內(nèi)容)、刪除( Reflow + Repaint)
. 僅修改DOM元素的字體顏色(只有Repaint,因?yàn)椴恍枰{(diào)整布局)
. 應(yīng)用新的樣式或者修改任何影響元素外觀的屬性
. Resize瀏覽器窗口、滾動(dòng)頁面
. 讀取元素的某些屬性(offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))
如何避免:
. 先將元素從document中刪除,完成修改后再把元素放回原來的位置
. 將元素的display設(shè)置為”none”,完成修改后再把display修改為原來的值
. 如果需要?jiǎng)?chuàng)建多個(gè)DOM節(jié)點(diǎn),可以使用DocumentFragment創(chuàng)建完后一次性的加入document
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment);
. 集中修改樣式
4.1盡可能少的修改元素style上的屬性
4.2盡量通過修改className來修改樣式
4.3通過cssText屬性來設(shè)置樣式值
element.style.width=”80px”; //reflow
element.style.height=”90px”; //reflow
element.style.border=”solid 1px red”; //reflow
以上就產(chǎn)生多次reflow,調(diào)用的越多產(chǎn)生就越多
element.style.cssText=”width:80px;height:80px;border:solid 1px red;”; //reflow
4.4緩存Layout屬性值
var left=elem.offsetLeft; 多次使用left也就產(chǎn)生一次reflow
4.5設(shè)置元素的position為absolute或fixed
元素脫離標(biāo)準(zhǔn)流,也從DOM樹結(jié)構(gòu)中脫離出來,在需要reflow時(shí)只需要reflow自身與下級元素
4.6盡量不要用table布局
table元素一旦觸發(fā)reflow就會(huì)導(dǎo)致table里所有的其它元素 reflow。在適合用table的場合,可以設(shè)置table-layout為auto或fixed,這樣可以讓table一行一行的渲染,這種做法也是為了限制reflow的影響范圍
4.7避免使用expression,他會(huì)每次調(diào)用都會(huì)重新計(jì)算一遍(包括加載頁面)
參考:
Yahoo! 性能工程師 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》
相關(guān)文章
Function.prototype.apply()與Function.prototype.call()小結(jié)
JavaScript 中,某個(gè)函數(shù)的參數(shù)數(shù)量是不固定的,因此要說適用條件的話,當(dāng)你的參數(shù)是明確知道數(shù)量時(shí),用 call,而不確定的時(shí)候,用 apply,然后把參數(shù) push 進(jìn)數(shù)組傳遞進(jìn)去。當(dāng)參數(shù)數(shù)量不確定時(shí),函數(shù)內(nèi)部也可以通過 arguments 這個(gè)數(shù)組來便利所有的參數(shù)2016-04-04JavaScript中的call方法和apply方法使用對比
這篇文章主要介紹了JavaScript中的call方法和apply方法使用對比,需要的朋友可以參考下2015-08-08JavaScript與DOM組合動(dòng)態(tài)創(chuàng)建表格實(shí)例
這篇文章簡單介紹了DOM 1.0一些基本而強(qiáng)大的方法以及如何在JavaScript中使用它們;你可以學(xué)到如何動(dòng)態(tài)地創(chuàng)建、獲取、控制和刪除HTML元素2012-12-12深入分析JavaScript 事件循環(huán)(Event Loop)
這篇文章主要介紹了JavaScript 事件循環(huán)(Event Loop)的的相關(guān)資料,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-06-06