1.解析：浏览器通过网络请求拿到html数据时会产生一个渲染任务并将打包位渲染任务传递给 浏览器的渲染主线程，渲染主线程首先会解析html、css 生成 DOM、CSSOM树。（解析过程要点：）浏览器分配一个css预加载器，当解析html时遇到 link 等css 不会停止解析html而去解析css 因为 css预加载器会单独解析css js是单线程语言这样就可以避免 造成页面渲染阻塞。
2.样式计算：当得到第一步的生成的树后，浏览器会循环遍历dom树计算得到它的最终样式（computed style），相对单位rem也会转化为实际值px，这一步过后会得到一颗带有样式的Dom树 （也称为渲染树 render树）
3.布局：通过依次遍历render树，计算出每个节点的几何信息（节点的宽高，几何信息），display:none 不会保留在dom树中，这一过程后会得到一颗布局树
4.分层：浏览器考虑到性能问题每次修个dom节点的几何信息 都会使页面重新渲染一次，这导致性能有所负载，因此出现分层的解决方案，所谓分层就是把用户经常修改的dom节点元素单独分层 布局 ，每次用户修改时就只会重新绘制修改部分的那一层而不会整个页面重新绘制提高了浏览器性能和用交互体验。
5.绘制：浏览器渲染主线程会单独给每一层产生绘制指令集用于描述每一层该如何绘制，完成绘制后浏览器会将绘制信息提交给合成线程，合成主线成会将每一个图层分块，分块后从线程池中调用多个线程进行工作
6.光栅化：合成线程会把分块后的信息提交给系统GPU进程，gpu进程会开启多个线程负责光栅化的完成（优先完成可视区域的光栅化），光栅化的结果就是一块一夸的位图！
7.画：也是最后一个阶段了，浏览器拿到每个层、每个块的位图生成一个个指引信息（quad！），指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。变形发生在合成线程，与渲染主线程无关，这就是`transform`效率高的本质原因。合成线程会把 quad 提交给 GPU 进程，由 GPU 进程产生系统调用，提交给 GPU 硬件，完成最终的屏幕成像。