如何减少浏览器的reflow和repaint

来源: 电脑维修教程   阅读:     发表时间:

本文主要是结合本身的一些项目经验,给各人提出了几点减少浏览器reflow和repaint的要领和注意事项,但愿对各人能有所帮手。 1.制止在document上直接进行频

本文主要是结合本身的一些项目经验,给各人提出了几点减少浏览器reflow和repaint的要领和注意事项,但愿对各人能有所帮手。

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动画方面尤其值得考虑。

以上是:解决如何减少浏览器的reflow和repaint问题的详细资料教程

?
热门链接: 机顶盒 | 主板维修 | 声卡怎么安装 | 路由器怎么设置 | 电脑内存维修技术 | 维修大全?| 主板维修资料 | 电脑声卡音响故障维修 | 内存 | 显示器 | 电源维修教程 | cpu | 硬盘 | 显卡 |win8操作系统教程|linux操作系统教程|ubuntu操作系统教程|mac苹果操作系统教程|execl教程
友情链接: ?苹果手机维修?| 更多...