一、什么是浏览器内核
浏览器内核即浏览器底层最核心和最基础的那一部分,它主要负责对网页当中的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—————
[公众号回复“电子书”,送你经典前端电子书籍]
喜欢本文的朋友们,欢迎关注微信公众号 张培跃,收看更多精彩内容