美文网首页
页面重绘重载优化

页面重绘重载优化

作者: 奈何明月照沟渠 | 来源:发表于2017-07-08 14:33 被阅读0次

    三、优化(减少回流、重绘)
    浏览器本身的优化策略:浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。但有时候我们写的一些代码可能会强制浏览器提前flush队列,这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 style信息的时候,就会让浏览器flush队列。
    减少对render tree的操作(合并多次多DOM和样式的修改),并减少对一些style信息的请求,尽量利用好浏览器的优化策略
    方法:

    1. 将多次改变样式属性的操作合并成一次操作。
      2.将需要多次重排的元素,position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
    2. 在内存中多次操作节点,完成后再添加到文档中去。例如要异步获取表格数据,渲染到页面。可以先取得数据后在内存中构建整个表格的html片段,再一次性添加到文档中去,而不是循环添加每一行。
    3. 由于display属性为none的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发2次重排。
    4. 在需要经常取那些引起浏览器重排的属性值时,要缓存到变量。

    相关文章

      网友评论

          本文标题:页面重绘重载优化

          本文链接:https://www.haomeiwen.com/subject/fyzdhxtx.html