先说一下cssom:
CSSOM(CSS Object Model):采用CSS代码，并将每个选择器呈现为树状结构 ,是对CSS样式表的对象化表示，
       同时还提供了相关API用来操作CSS样式
在W3C标准中，CSSOM包含两部分：
    Model：描述样式表和规则的模型部分；
    View：和元素视图相关的API部分
--------------------------
Model部分是CSSOM的本体，用style或者link标签即可创建：<style></style> 或者 <link rel="stylesheet" href="XXX">
View部分是CSSOM的核心，可分为三类：窗口、滚动和布局相关API。
    窗口API用于操作浏览器窗口的位置、尺寸等
    滚动可分为视口滚动和元素滚动，布局API总体上使用的最多，可以轻松获特定元素的位置和尺寸信息。
--------------------------
浏览器将域名通过网络通信从服务器拿到html文件后，执行以下步骤渲染页面
1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。
2.构建渲染树（Render Tree）。
    渲染树（Render Tree）由DOM树、CSSOM树合并而成，构建渲染树，根据渲染树计算每个可见元素的布局，并输出到绘制流程，将像素渲染到屏幕上
3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。
    重绘（repaint）：渲染树节点发生改变，但不影响空间位置及大小，改变颜色 字体等属性
    重排（reflow）(回流)：当节点发生改变，位置大小变化（如宽、高、内边距、外边距、或是float、position、display：none;等等），节点位置变化，
            此时触发浏览器重排（reflow），需要重新生成渲染树
减少重排：
    多次改变样式合并成一个，用一个class来操作
    使用DocumentFragment进行缓存操作,引发一次回流和重绘；
    需要多次重排的元素用绝对或是固定定位，例如动画元素、弹窗、返回顶部的那个图标