浏览器网页重绘重排

首先看浏览器生成页面的过程

浏览器网页重绘重排_第1张图片
生成页面过程

是什么

网页生成的时候,至少会渲染一次后面可能会不断重新渲染;重新渲染需要重新生成布局(重排)和重新绘制(重绘)。

重新渲染的情况

  1. 修改DOM
  2. 修改样式表
  3. 用户事件

重排一定会重绘,重绘不一定触发重排(为什么?)

重新渲染很耗费资源,需要减少重绘重排

1.不要将读写操作放在一个语句里,因为在样式写操作后如果有下面属性的读操作都会触发浏览器重新渲染

offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()
  1. table元素重排重绘成本高于div

你可能感兴趣的:(浏览器网页重绘重排)