站长

<ul><li>浏览器的渲染机制： 浏览器使用流式布局模型 浏览器会将 html 解析成 Dom 将 css 解析成 CSSDOM，然后将两者合并成 Render Tree 通过 render tree 将每一个节点按照给定的大小、位置、样式渲染到页面上 因为使用的流式布局，所以通常只对 render tree 遍历一次就行了(table除外，所以少用table)</li></ul><hr><ul><li>回流和重绘的关系： 回流必将引起重绘，重绘不一定会引起回流。</li></ul><hr><ul><li>回流：<ul><li>当元素的尺寸、结构之类的属性发生改变的时候，浏览器会重新渲染部分或全部文档，这个过程称谓回流。</li><li>会引起回流的操作：<ul><li>页面首次渲染</li><li>浏览器窗口大小改变</li><li>增删 dom 元素</li><li>更改元素大小、位置、字体大小</li><li>触发元素伪类例如： :hover</li></ul></li><li>(回流也叫重排，两个词都很形象，就像式平铺的一滩水，有个地方挖了个坑或者填了块土，导致地形发生改变，故称回流/重排)</li></ul></li></ul><hr><ul><li>重绘：<ul><li>一些样式的属性发生变化但是不会影响页面的结构发生改变，被称为重绘。</li><li>会引起重绘的操作：<ul><li>更改元素的颜色、背景颜色..</li></ul></li><li>(重绘，即重新绘制)</li></ul></li></ul>

浏览器的渲染机制、回流和重绘