减少浏览器的reflow和repaint_html/css_WEB-ITnose
程序员文章站
2022-05-15 16:25:40
...
1.避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下几种:
(1). 先将元素从document中删除,完成修改后再把元素放回原来的位置
(2). 将元素的display设置为”none”,完成修改后再把display修改为原来的值
(3). 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document
2.集中修改样式
(1). 尽可能少的修改元素style上的属性
(2). 尽量通过修改className来修改样式
(3). 通过cssText属性来设置样式值
3. 缓存Layout属性值
对于Layout属性中非引用类型的值(数字型),如果需要多次访问则可以在一次访问时先存储到局部变量中,之后都使用局部变量,这样可以避免每次读取属性时造成浏览器的渲染。
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;
4.设置元素的position为absolute或fixed
在元素的position为static和relative时,元素处于DOM树结构当中,当对元素的某个操作需要重新渲染时,浏览器会渲染整个页面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间,这在当今越来越多的Javascript动画方面尤其值得考虑。
(1). 先将元素从document中删除,完成修改后再把元素放回原来的位置
(2). 将元素的display设置为”none”,完成修改后再把display修改为原来的值
(3). 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document
2.集中修改样式
(1). 尽可能少的修改元素style上的属性
(2). 尽量通过修改className来修改样式
(3). 通过cssText属性来设置样式值
3. 缓存Layout属性值
对于Layout属性中非引用类型的值(数字型),如果需要多次访问则可以在一次访问时先存储到局部变量中,之后都使用局部变量,这样可以避免每次读取属性时造成浏览器的渲染。
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;
4.设置元素的position为absolute或fixed
在元素的position为static和relative时,元素处于DOM树结构当中,当对元素的某个操作需要重新渲染时,浏览器会渲染整个页面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间,这在当今越来越多的Javascript动画方面尤其值得考虑。
推荐阅读
-
win8专业版 ie10和360浏览器无法加载本地html网页的css样式文件_html/css_WEB-ITnose
-
如何减少浏览器的reflow和repaint_javascript技巧
-
Chrome(谷歌浏览器)和Firefox浏览器flash的swf文件发黑不透明问题解决方法_html/css_WEB-ITnose
-
很多浏览器是不是不支持表格的bordercolorlight和bordercolordark属性丫?_html/css_WEB-ITnose
-
Chrome(谷歌浏览器)和Firefox浏览器flash的swf文件发黑不透明问题解决方法_html/css_WEB-ITnose
-
div+csS中的一些技巧和浏览器兼容的办法_html/css_WEB-ITnose
-
探讨,:IE浏览器中的浏览器模式 和 文档模式 区别_html/css_WEB-ITnose
-
减少浏览器的reflow和repaint_html/css_WEB-ITnose
-
在
- 标签内设置list-style-type:disc样式后,为什么在IE11和火狐浏览器显示效果不一样?如何使ie11显示成火狐的样子?_html/css_WEB-ITnose
-
用php 和 html写的程序 每次重新打开都乱码。必须每次打开调整浏览器的view_html/css_WEB-ITnose