性能优化--避免回流和重绘

·  阅读 167

回流一定有重绘,重绘不一定有回流

一、定义

  • 回流:几何属性改变,例如元素位置,大小改变

    css属性:
    1、盒模型相关属性: width, height, margin, display, border等
    2、定位属性及浮动相关的属性: top, position, float等
    3、内部文字结构: text-align, overflow, font-size, line-height, vertical-align等

    操作:
    1、页面第一次渲染
    2、删除或添加元素
    3、css伪类激活,比如hover等
    4、查询元素几何信息,比如调用getBoundingClientRect,offsetWidth,offsetHeight,scrollTop,widht,height,getComputedStyle等 5、内容发生变化,比如文本被替换 6、浏览器尺寸改变

  • 重绘:填充像素的过程,改变外观。例如背景色、背景图、边框、子代、轮廓
    css属性:
    1、background-color 2、visiblity 3、outline

二、避免方法

  1. 避免使用table布局

  2. 避免分次改变css属性,比如

const a = document.getElementById('a')
a.style.width = '10px'
a.style.height = '10px'
a.style.marginTop = '10px'
复制代码

可以改为

const a = document.getElementById('a')
a.style.cssText += 'width: 10px;height: 10px;marginTop: 10px'
复制代码
  1. 减少动画复杂度,尽量使用transform代替动画里的位置变化,尽量使用opcity代替visiblity。因为transform和opcity会跳过layout和painting过程,直接被composite合成操作

  2. 使用display: none模拟删除或者添加元素

  3. 避免重复读取同一元素几何信息,可以用变量暂存

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改