这一题考的其实是网页性能的问题,我们先理解下对网页性能产生影响到因素,了解下网页是怎么生成的

网页生成的过程,大致可以分为五步:

  1. html代码转化为dom
  2. css代码转化为cssom
  3. 结合dom和cssom,生成一颗渲染树(包含每个节点的视觉信息)
  4. 生成布局layout,即将所有的渲染树的节点进行平面合成
  5. 将布局绘制paint在屏幕上

重绘和重排

网页生成的时候,至少会渲染一次,用户访问的过程中,还会不断的重新渲染
以下三种情况会导致页面重新渲染
修改dom
修改样式表
用户事件
重新渲染,就需要重新生成布局和重新绘制,前者叫重排reflow,后者叫重绘repaint
需要注意的是重绘不一定需要重排,比如改变网页元素的颜色,就会只发生重绘,不会发生重排,因为布局没有改变,但是重排一定会导致重绘,如何改变一个网页元素的位置,就会同时触发重排和重绘,因为布局改变了

对于性能的影响
重绘和重排会不断触发,这是不可避免的,但是,他们是非常耗费资源的,是导致网页性能低下根本原因
要提高网页性能,就是要降低重排和重绘的频率和成本,尽量少触发重新渲染

一般来说,样式的写操作之后,如果有下面这些属性的读操作,都会引发浏览器立即重新渲染

1
2
3
4
offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputeStyle()

所以,从性能角度考虑,尽量不要把读操作和写操作,放在一个语句里,一般的规则是
样式表越简单,重绘和重排就越快
重排和重绘的dom层级越高,成本就越高
table元素的重绘和重排成本,要高于div元素

转载请保持原始链接

原始链接: https://ru23.com/note/8463a2db.html