要理解浏览器的工作原理首先要对浏览器有一个初步的认识（几个主流的浏览器：IE、Chrome、Firefox、afari、Opera），浏览器中最核心的部分是渲染引擎（Rendering Engine），也就是所谓的“浏览器内核”
其实浏览器的内核除渲染引擎外还包括JS引擎，前者决定了浏览器如何显示网页的内容以及页面的格式信息，主要负责对网页愈发的解释并渲染；后者则是对JavaScript进行解释、编译和执行，从而使网页达到一些动态效果
最开始的时候二者并没有很明确的区分，只不过随着JS引擎越来越独立，后来提起内核我们就更倾向于指的是渲染引擎
浏览器的工作流程
当我们在浏览器地址栏中敲如url回车后浏览器工作流程大致是这样的：浏览器开启网络请求线程，向服务器发送完整的http请求，再由服务器把数据返回到浏览器中，期间经历了一系列流程如：DNS查询、TCP/IP请求构建、五层因特网网络协议等
浏览器在接收到内容后首先会根据文件的编码格式如UTF-8将字节流转为字符流，然后语法解析器根据标签的开始、标签的结束、属性等将html解析成Token（比如<p class='test' >helloworld</p> 就可以拆分为<p标签的开始、class='test'属性、</p>标签的结束）接下来就会把这些词构成一颗DOM树
浏览器也会将CSS样式解析成CSSOM树，之后会根据样式的Selector将CSSOM和DOM合并成为Render Tree，最后浏览器会根据Render Tree 计算布局与元素的大小并绘制整个页面。
浏览器是多进程的
浏览器是多进程的，有一个主控进程，以及每一个tab页面都会新开一个进程（某些情况下多个tab会合并进程）
进程可能包括主控进程，插件进程，GPU，tab页（浏览器内核）等。
- Browser进程：浏览器的主进程（负责协调、主控），只有一个
- 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
- GPU进程：最多一个，用于3D绘制
- 浏览器渲染进程（内核）：默认每个Tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白tab会合并成一个进程
浏览器渲染引擎是多线程的
- js引擎线程
- JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序
- GPU渲染线程
- 注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
- 定时器线程
- 传说中的setInterval与setTimeout所在线程
- 浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
- 因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
- 注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。
- 事件触发线程
- 异步http请求线程
- 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
- 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。
回流与重绘
【回流】
回流是指窗口尺寸被修改、发生滚动操作，或者元素位置相关属性被更新时会触发布局过程，在布局过程中要计算所有元素的位置信息。由于HTML使用的是流式布局，如果页面中的一个元素的尺寸发生了变化，则其后续的元素位置都要跟着发生变化，也就是重新进行流式布局的过程，所以被称之为回流
触发回流包括如下操作：
1、DOM元素的几何属性变化
2、DOM树的结构变化
3、改变元素的一些样式
4、调整浏览器窗口大小
5、获取下列属性
offsetTop\offsetLeft\offsetWidth\offsetHeight\scrollTop\scrollLeft\scrollWidth\scrollHeight\clientTop\clientLeft\clientWidth\clientHeight\getComputedStyle()\currentStyle()
触发回流一定会触发后续的重绘操作，而且对一个元素的回流，可能会影响到父级元素。比如子元素浮动后，父元素会出现高度塌陷的情况。所以，性能优化的重点在于尽量只触发小规模的重绘，尽量不触发回流
【重绘】
重绘是指当与视觉相关的样式属性值被更新时会触发绘制过程，在绘制过程中要重新计算元素的视觉信息，使元素呈现新的外观由于元素的重绘repaint只发生在渲染层 render layer上。所以，如果要改变元素的视觉属性，最好让该元素成为一个独立的渲染层render layer
下面以元素显示为例，进行说明。实现元素显示隐藏的方式有很多
display: none/block，会引起回流，从而引起重绘，性能较差
visibility: visibile/hidden，只引起重绘，但由于没有成为一个独立的渲染层，会引起整个页面（或当前渲染层）的重绘，性能较好
opacity: 0/1，opacity小于1时，会产生render layer。所以opacity在0、1的变化中，引起了render layer的生成和销毁，因此，也会引起回流，从而引起重绘，性能较差。如果opacity: 0/0.9，则只会引起重绘
如果对一个元素使用硬件加速渲染，如具有CSS 3D属性，则不会进行重绘和回流。但如果使用硬件渲染的元素过多，会造成GPU的传输压力
【性能优化】
下面列举一些减少回流次数的方法
1、不要一条一条地修改DOM样式，而是修改className或者修改style.cssText
2、在内存中多次操作节点，完成后再添加到文档中去
3、对于一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示
4、在需要经常获取那些引起浏览器回流的属性值时，要缓存到变量中
5、不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间
此外，将需要多次重绘的元素独立为render layer渲染层，如设置absolute，可以减少重绘范围；对于一些进行动画的元素，可以进行硬件渲染，从而避免重绘和回流
【参考】：
https://www.cnblogs.com/xiaohuochai/p/9174471.html