浏览器的渲染流程
应该都非常熟悉，大概过程是
通过浏览器的渲染引擎来对html css js 代码解析处理，然后渲染显示用户可以在屏幕上看到的页面。
并且这个期间渲染引擎需要通过一些api 对dom 进行一些增删改等操作。
拿到html文档以后渲染引擎就开始对文档从上倒下执行顺序解析。
首先就是
1.对html进行解析成dom树，是一种树状结构
2.在对css 进行解析成cssom树
3.然后两者结合成一棵渲染树
4.然后对dom进行布局计算，精确找到元素节点在屏幕上的具体的位置和大小样式
这个期间就涉及到了css的一些概念操作，比如盒模型、浮动元素、文本流、BFC等。
5.然后就是进行绘制，
绘制就是对渲染对象进行绘制，绘制到屏幕上，
绘制的过程中是将渲染对象转换成像素的过程。
6.最后就是合成。
浏览器暴露dom的api 给到开发者，开发者就可以用这些api 对dom 进行操作。
而浏览器扮演的角色可想而知就是在用户和屏幕可以看到的网页之间的桥梁接口。
性能相关
那这么繁琐复杂的渲染过程当中肯定有很多大量的计算和步骤，
常见的优化手段就是 减少重排和减少重绘。
这两个都是上面渲染时的两个重要的步骤。
减少两个步骤可以轻步骤的复杂程度。
重排就是减少对布局的设定，比如少去对元素的尺寸、浏览器的尺寸、元素的添加和删除进行操作。就可以不触发这个重新排列布局的过程。
重绘就是对元素恶的外观进行改变后的触发。比图改变元素的背景颜色、字体的颜色等。
重绘不一定会触发重排 但是重排一定会触发重绘。
因为布局的变化需要重新绘制元素才能反应新的布局。
但是颜色等外观的变化 一般不会触发排列布局的变化。
框架相关
还有就是框架有点脱离浏览器渲染过程来进行抽象层的处理，因为都不会直接操作dom。
所以react vue都采用虚拟dom 和diff算法等技术，使得不会直接去操作dom ，能更高效的更新页面。在渲染过程中使用抽象层去管理dom.
但是这些框架也不是完全脱离渲染流程，因为最终他们都是要将这个变化应用到真实的dom 上。减少了直接操作dom 的次数提高了性能优化和响应速度。
