标签：you   details   请求   回调函数   循环   时间间隔   int   关系   rom   

先从进程、线程说起

形象一点比喻，比如一开一家饭店，那就是一个进程，饭店里只请一个员工干活那就是单线程，如果有多个员工干活那就是多线程。
通常来说，打开一个程序就是开了一个进程（也有些程序是多进程的），系统会给它开辟一块内存用于运行。
对于进程线程专业一点说辞：

• 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
• 线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）
• 不同进程之间也可以通信，不过代价较大
• 现在，一般通用的叫法：单线程与多线程，都是指在一个进程内的单和多。（所以核心还是得属于一个进程才行）

浏览器是多进程的

浏览器是多进程的。chrome中 更多工具 => 任务管理器 查看。
浏览器之所以能够运行，是因为系统给它的进程分配了资源（cpu、内存）
简单点理解，每打开一个Tab页，就相当于创建了一个独立的浏览器进程（并不绝对，譬如打开多个空白标签页后，会发现多个空白标签页被合并成了一个进程）。
浏览器都有哪些进程：

Browser进程

浏览器的主进程（负责协调、主控），只有一个。作用有

• 负责浏览器界面显示，与用户交互。如前进，后退等
• 负责各个页面的管理，创建和销毁其他进程
• 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
• 网络资源的管理，下载等

第三方插件进程

每种类型的插件对应一个进程，仅当使用该插件时才创建

GPU进程

最多一个，用于3D绘制等

浏览器渲染进程（浏览器内核）

（Renderer进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。主要作用为

• 页面渲染，脚本执行，事件处理等

浏览器多进程的好处

某个扩展插件或者标签页面出问题不至于影响到整个浏览器。

浏览器内核（渲染进程 - 重点）

对于前端来说，主要关注的是渲染进程，因为页面的渲染，JS的执行，事件的循环，都在这个进程内进行。
该进程内的一些主要线程：

1、GUI渲染线程

• 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
• 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
• 注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。（所以说JS执行会阻塞HTML解析）

2、JS引擎线程

• 也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）
• JS引擎线程负责解析Javascript脚本，运行代码。
• JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序（JS单线程）
• 同样注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

3、事件触发线程

• 归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
• 当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
• 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
• 注意，由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）

4、定时触发器线程

• 传说中的setInterval与setTimeout所在线程
• 浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
• 因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
• 注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。

5、异步http请求线程

• 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
• 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

页面渲染

不同浏览器的渲染引擎

• Firefox：Gecko
• Safari：Webkit
• Chrome：Blink（旧版本Webkit）
• IE：Trident
• Edge：EdgeHTML

正常网页加载流程是这样的

1. 浏览器一边下载HTML网页，一边开始解析。也就是说，不等到下载完就开始解析。
2. 解析过程中，浏览器发现 script 元素，就暂停解析，把页面渲染的控制权交给 JavaScript 引擎。（script标签的defer、async属性，见下面的外链）
3. 如果 script 元素引用外部脚本，就下载该脚本再执行，否则直接执行代码。
4. JavaScript 引擎执行完毕，控制权交还给渲染引擎，恢复往下解析HTML网页。
5. HTML代码解析为DOM，CSS代码解析为CSSOM（CSS Object Model）。
6. DOM和CSSOM合成渲染树（render tree）。
7. 计算渲染树布局（layout），将渲染树绘制到屏幕。

HTML解析

回流重绘

你真的了解回流重绘吗？

浏览器工作原理

标签：you   details   请求   回调函数   循环   时间间隔   int   关系   rom   

原文地址：https://www.cnblogs.com/samfung/p/12483900.html