重绘与回流

重绘与回流

重绘(redraw)

  • 元素外观的改变所触发的浏览器行为,例如改变visibility、outline、背景色等属性。
  • 浏览器会根据元素的新属性重新绘制,使元素呈现新的外观
  • 重绘不会带来重新布局,并不一定伴随重排

重绘元素

减少重绘

  • 将多次改变样式属性的操作合并成一次操作
  • 经常获取那些引起浏览器重排的属性值时,要缓存到变量

重排也叫回流(reflow)

  • DOM元素的几何属性变化
  • DOM树的结构变化
  • 获取某些属性

回流元素

减少回流

  • 将需要多次重排的元素设置为absolute,例如有动画效果的元素
  • 动态添加节点数据的时候,当全部添加完成后才进行dom的append操作
  • 对于display:none的元素操作不会引发其他元素的重排(可以让操作很复杂的元素先进行隐藏然后在显示)

新建dom过程

  • 获取DOM后分割为多个图层
  • 对每个图层的节点计算样式结果(Recalculate style–样式重计算)
  • 为每个节点生成图形和位置(Layout–回流和重布局)
  • 将每个节点绘制填充到图层位图中(Paint Setup和Paint–重绘)
  • 图层作为纹理上传至GPU
  • 符合多个图层到页面上生成最终屏幕图像(Composite Layers–图层重组)

Chrome创建图层的条件

  • 3D或透视变换(perspective transform)CSS属性
  • 使用加速视频解码的video节点
  • 拥有3D(WebGL)上下文或加速的2D上下文的canvas节点
  • 混合插件(如Flash)
  • 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
  • 拥有加速CSS过滤器的元素
  • 元素有一个包含复合层的后代节点(一个元素拥有一个子元素,该子元素在自己的层里)
  • 元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

优点

  • 用translate替代top改变 => top会触发回流但是translate不会 (应用:当有页面有浮窗的时候)
  • 用opacity替代visibility => visibility会触发重绘,opacity没有重绘的过程,而重绘的过程是生成图层,但是opacity实际上是直接改变图层的alpha通道
  • 不要一条一条地修改 DOM 的样式,预先定义好 class,然后修改 DOM 的 className
  • dom先display:none修改完成后再显示
  • 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量(变量在外面赋值)
  • 不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
  • 动画实现的速度的选择
  • 对于动画新建图层 transform:translateZ(0) 或者使用transform:translate3d(0,0,0)(看情况而定是否使用)
  • 启用 GPU 硬件加速

  转载请注明: 迷一样的自信 重绘与回流

 上一篇
懒加载与预加载 懒加载与预加载
懒加载与预加载懒加载(基本对于图片) 减少无效资源的加载 并发加载的资源过多会阻塞js的加载影响网站的正常使用 图片进入可是区域之后请求图片资源 电商等图片很多的情况,页面很长的业务场景适用 预加载 图片等静态资源在使用之前的提前请求 资
2018-05-13
下一篇 
浏览器的存储 浏览器的存储
浏览器的存储cookie生成方式(cookie) http response header中的set-cookie js中可以通过document.cookie可以读写cookie 作用(cookie) 用于浏览器端与服务器端的交互(主要
2018-05-13
  目录