css 重排与重绘

在介绍浏览器的重排与重绘之前，先了解一下浏览器的工作原理一旦我们了解了浏览器是如何工作的，我们就可以更好的去驾驭它。
现代浏览器通常拥有两个重要的执行线程，这两个线程相互配合来渲染出页面：

主线程

通常情况下，主线程主要负责以下工作：运行JavaScript、计算HTML元素的CSS样式、布局页面、把页面元素绘制成一个或多个位图、把这些位图移交给排版线程

排版线程

通常情况下，排版线程主要负责以下工作：通过GPU渲染位图，并显示在屏幕上、向主线程请求更新位图的可见部分或即将可见的部分、判断出当前页面处于可见的部分、判断出即将通过页面滚动而可见的部分、随着用户滚动页面来移动这些部分（可见部分的和即将可见的部分）

GPU

排版线程通过GPU把位图绘制到了屏幕上。
GPU比较擅长于：绘制位图到屏幕、重复的绘制同一个位图、在不同的位置，以不同的旋转角度，或者不同的缩放大小来绘制同一个位图。
GPU相对慢的地方：将位图加载到显存里。

重排与重绘

浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树和渲染树。
DOM树表示页面结构，渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点（隐藏的DOM元素 disply值为none 在渲染树中没有对应的节点）。渲染树中的节点被称为“帧”或“盒”,符合CSS模型的定义，理解页面元素为一个具有填充，边距，边框和位置的盒子。一旦 DOM和渲染树构建完成，浏览器就开始显示（绘制）页面元素。
当