在介绍浏览器的重排与重绘之前,先了解一下浏览器的工作原理一旦我们了解了浏览器是如何工作的,我们就可以更好的去驾驭它。
现代浏览器通常拥有两个重要的执行线程,这两个线程相互配合来渲染出页面:
主线程
通常情况下,主线程主要负责以下工作:运行JavaScript、计算HTML元素的CSS样式、布局页面、把页面元素绘制成一个或多个位图、把这些位图移交给排版线程
排版线程
通常情况下,排版线程主要负责以下工作:通过GPU渲染位图,并显示在屏幕上、向主线程请求更新位图的可见部分或即将可见的部分、判断出当前页面处于可见的部分、判断出即将通过页面滚动而可见的部分、随着用户滚动页面来移动这些部分(可见部分的和即将可见的部分)
GPU
排版线程通过GPU把位图绘制到了屏幕上。
GPU比较擅长于:绘制位图到屏幕、重复的绘制同一个位图、在不同的位置,以不同的旋转角度,或者不同的缩放大小来绘制同一个位图。
GPU相对慢的地方:将位图加载到显存里。
重排与重绘
浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树和渲染树。
DOM树表示页面结构,渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点(隐藏的DOM元素 disply值为none 在渲染树中没有对应的节点)。渲染树中的节点被称为“帧”或“盒”,符合CSS模型的定义,理解页面元素为一个具有填充,边距,边框和位置的盒子。一旦 DOM和渲染树构建完成,浏览器就开始显示(绘制)页面元素。
当