浏览器的工作过程

1. 浏览器使用HTTP协议或者HTTPS协议向服务端请求页面
2. 将请求回来的HTML代码解析并构建DOM树

浏览器的渲染过程：

1. 解析HTML，构建DOM tree
2. 解析CSS（CSS 解析是把 CSS 规则应用到 DOM 树上，为 DOM 结构添加显示相关属性的过程），构建CSSOM tree
3. 合并DOM tree和CSSOM tree，生成render tree
4. 布局（layout/reflow），计算各元素尺寸、位置
5. 绘制（paint/repaint），绘制页面像素信息
6. 浏览器将各层的信息发送给GPU，GPU将各层合成，显示在屏幕上

解析html 为DOM 树 :

1）HTML字节流解码变为字符流。根据不同编码方式，如UTF-8 GBK来解码
2）词法分析：将字符流解析为一个个词语
3）语法分析：通过不同标签，生成node节点
4）构建DOM树：将node节点组织成DOM树

关于Repaint 和 Reflow

repaint重绘：

如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，则只会引起浏览器 repaint，repaint 的速度明显快于 reflow

reflow回流：

当某个部分发生了变化影响了布局，需要倒回去重新渲染， 该过程称为reflow（回流）。比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距大小等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染，所以reflow的代价是比较大的

reflow一定引起repaint，而repaint不一定要reflow

在哪些情况下会导致reflow发生：

• 改变窗囗大小

• 改变文字大小

• 添加/删除样式表

• 内容的改变，如用户在输入框中输入

• 激活伪类，如:hover

• 操作class属性

• 通过脚本操作DOM

• 设置style属性

优化方法，尽量避免reflow：

• 尽可能限制reflow的影响范围，修改DOM层级较低的结点。不要通过父级元素影响子元素样式。最好直接加在子元素上。改变子元素样式尽可能不要影响父元素和兄弟元素的尺寸。

• 不要一条一条的修改DOM的style，最好通过设置class的方式。 避免触发多次reflow和repaint。

• 经常reflow的元素，如动画，可将position设为fixed或absolute，使其脱离文档流，不影响其它元素的布局。

• 权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。

• 尽量不使用tables布局。tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

• 避免使用css expression（每次都会重新计算）。

• 减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。

• 避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。

• 尽量不要频繁的增加、修改、删除元素，可以先把DOM节点抽离到内存中进行复杂的操作然后再display到页面上。（display:none的节点不会被加入render tree，而visibility:hidden会；display:none会触发reflow，而visibility:hidden只会触发repaint，因为layout没有变化）。

参考https://blog.csdn.net/u013100656/article/details/79888106