要理解浏览器的工作原理首先要对浏览器有一个初步的认识（几个主流的浏览器：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

https://www.jianshu.com/p/1e455a9226ce

浅谈浏览器加载原理

原文：https://www.cnblogs.com/Shellcoochi/p/11752906.html