浏览器渲染过程
浏览器的渲染过程可以理解为一个人的诞生过程。
1.浏览器会开启两条线程，一条渲染UI层（即html标签和css样式），一条渲染JavaScript脚本；
（一个人的诞生不仅有美好的躯体和外表，还具备与人沟通交流的交互功能)
2.浏览器会将html标签渲染成一个DOM树，每个标签都是一个节点，挂载到根节点document上；
（一个人的躯体通常由五脏六腑、头脑四肢等结构组成）
3.浏览器会把css样式解析成一个样式结构体，并且会去掉浏览器不能识别的样式，如通常设置的一些浏览器前缀-moz-、-webkit-、-o-、-ms-。
（有了躯体当然还要有美丽的衣服锦上添花，有些演出的衣服还贴有标签，如果不是自己名字的衣服，就不能穿）
4.DOM树和样式结构体结合之后就会生成render树，render树就是带有样式的DOM树，但是不包含隐藏的元素。
（完整的躯体加完整的外衣就组成了一个完美的人）
5.虽然开启了两条线程，但一般渲染UI层的时候，JS线程会停止，反之渲染脚本的时候，UI线程会停止。这是因为JS中难免会遇到修改样式的脚本，所以UI层会重新渲染，在这个过程中，浏览器会不断的回流与重绘。
（人除了诞生之后会有美丽的外衣，自己也具备换衣服的功能，所以在自己换衣服的时候旁人就得停止）
浏览器的回流与重绘
浏览器的回流与重绘就像在样本间看精装修的房子。
1.回流：
当DOM元素发生了宽高尺寸变化，布局变化，隐藏与否变化，就会导致页面重新构建，这就是回流。
回流操作主要有盒子模型、定位、改变文字结构等，常见的回流操作有：
width | height | margin | padding | border | display | overflow
top | bottom | left | right | position | float
font-size | font-family | font-weight | text-align | vertival-align | line-height | white-space
2.重绘：
当DOM元素外观风格发生变化，就是重绘，常见的重绘操作有：
color | background | border-radius | visibility | border-radius | outline | box-shadow | text-decoration
3.总结：
回流必定触发重绘，而重绘不一样引发回流。有一个很好的方式区分回流还是重绘，看过房子的人在面对精装修的房子一般会有一个问题，在看样板间的时候很难区分哪些是交房的时候已经装修好的，哪些不是，有句玩笑话是搬不动的就是已经装修完成的（交房的时候）。这种情况用在浏览是回流还是重绘的理解上很到位。回流指的是会影响空间、格局，而重绘指的是外观、色彩、填充、装饰。所以这就是为什么回流会影响性能，设想只是换个沙发桌子很容易，直接网购，送货人都可以帮你安装好。如果交房的时候水电系统有问题，需要重新安装，那无疑是个大工程。看，程序就是生活。