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

一、什么是浏览器内核

浏览器内核即浏览器底层最核心和最基础的那一部分，它主要负责对网页当中的 html、 css、 JavaScript进行解释然后在浏览器当中进行渲染最终呈现给用户，也就是说内核的工作就是渲染，所以我们常常把浏览器内核称为 渲染引擎（Rendering Engine）也称为 布局引擎（Layout Engine）、 排版引擎。

另外，由于不同浏览器的渲染内核不同，对 html、 css、 JavaScript的语法解释也存在差异（兼容问题），因此我们在开发过程中需要在不同内核的浏览器当中进行网页渲染效果的测试。

二、五大浏览器四大内核

五大主流浏览器分别为：IE,火狐（Firefox）,谷歌(Chrome),Safari,Opera

四大内核分别是：Trident,Webkit,Blink,Gecko

对照表：

浏览器内核ChromeBlinkFireFoxGeckoSafariWebkitOperaBlinkIETrident

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

我想说的是：浏览器内核对页面的渲染，其实就是浏览器的渲染进程即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—————

[公众号回复“电子书”，送你经典前端电子书籍]

喜欢本文的朋友们，欢迎关注微信公众号 张培跃，收看更多精彩内容