web前端知识点归纳笔记：关于浏览器内核的多线程机制

一、什么是浏览器内核

浏览器内核即浏览器底层最核心和最基础的那一部分，它主要负责对网页当中的html、css、JavaScript进行解释然后在浏览器当中进行渲染最终呈现给用户，也就是说内核的工作就是渲染，所以我们常常把浏览器内核称为渲染引擎（Rendering Engine）也称为布局引擎（Layout Engine）、排版引擎。
另外，由于不同浏览器的渲染内核不同，对 html、css、 JavaScript的语法解释也存在差异（兼容问题），因此我们在开发过程中需要在不同内核的浏览器当中进行网页渲染效果的测试。

二、五大浏览器四大内核

五大主流浏览器分别为：IE,火狐（Firefox）,谷歌(Chrome),Safari,Opera
四大内核分别是：Trident,Webkit,Blink,Gecko

对照表：

浏览器	内核
Chrome	Blink
FireFox	Gecko
Safari	Webkit
Opera	Blink
IE	Trident

三、内核是浏览器的进程之一

我想说的是：浏览器内核对页面的渲染，其实就是浏览器的渲染进程即Renderer进程。该进程拥有多个线程，这些线程共同来完成页面的渲染任务。那么都有哪些线程呢，如下：

1、浏览器GUI（Graphical User Interface-----图形用户界面）渲染线程

• 负责对浏览器界面进行渲染。
• 当刷新或由于某些操作对界面局部渲染时，该线程会被执行。
• 注意，GUI渲染线程和JavaScript引擎线程是互斥的（不会同时执行的），即当JavaScript引擎线程执行时GUI线程会被冻结，GUI更新需要等到JavaScript引擎线程空闲时，才会执行。

2、JavaScript引擎线程

• 负责解析、运行JavaScript脚本。
• 一个标签页（渲染进程）中只会有一个JavaScript引擎线程运行JavaScript脚本。（JS是单线程的）
• 同样注意，因为GUI渲染线程与JavaScript引擎线程是互斥的，所以如果JS执行的时间过长，会造成页面的渲染不连贯，甚至渲染加载阻塞。

3、浏览器定时器触发线程（setTimeout、setInterval）

• setTimeout和setInterval所在的线程。
• 由于JavaScript引擎是单线程的，如果处于阻塞线程状态势必会影响计时的准确性，所以浏览器中的定时器并不是由JavaScript引擎来计数的。
• 该线程只是计时，一旦计时完毕后，会将触发的脚本添加到JavaScript引擎的处理队列中，等待JavaScript引擎空闲后再执行。
• 注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。

4、浏览器事件触发线程

• JS脚本的执行不会影响到html元素事件的触发，由于JS单线程关系，会将触发后需要执行的JS脚本添加到JavaScript引擎的处理队列中，当JavaScript引擎空闲时才会去执行。
• 注意，该线程只是触发，触发后要执行的代码依然要放到JS引擎线程中去执行。

5、浏览器http异步请求线程

• 在XMLHttpRequest在连接后会通过浏览器新开一个线程请求。
• 当状态发生变化时，如果之前有设置回调，会将这个回调再放入JavaScript引擎的处理队列中，再由JavaScript引擎执行。
  —————END—————
  [公众号回复“电子书”，送你经典前端电子书籍]
  喜欢本文的朋友们，欢迎关注微信公众号 张培跃，收看更多精彩内容