浏览器内核到底有哪些？它们各自又有什么区别？

这问题其实很多刚入行的同学经常搞混，所以今天我来一次性讲明白——浏览器内核到底有哪些？它们各自又有什么区别？

说白了，浏览器内核就是浏览器的大脑，分两部分：

• 渲染引擎（Rendering Engine）：负责网页的排版渲染，HTML、CSS统统交给它。

• JS引擎（JavaScript Engine）：处理JavaScript脚本逻辑，比如你点按钮后弹出对话框这种行为。

1）常见浏览器内核盘点

下面我直接列几个主流的浏览器内核，顺便标注下代表浏览器：

1. Blink（Chrome内核）

• 代表浏览器：Google Chrome、新版Microsoft Edge、Opera、Brave、Vivaldi等

• 前身：是WebKit的一个分支，由Google主导开发

• 特点：速度快、标准支持全面、生态最强！可以说大半个地球都在用这个内核。

这个真的牛啊，性能优化一波接一波，比如页面预加载、V8引擎配合使用，很多Web开发的“标准”，基本都先在Blink阵营里试验。

1. WebKit（Safari内核）

• 代表浏览器：Apple Safari、早期的Chrome（没错Chrome刚出时是WebKit）

• 特点：苹果亲儿子，对macOS和iOS系统适配最好，资源占用少，但对一些新标准支持慢半拍。

我试过在Mac下用Safari调试网页，体验其实还行，但一到复杂页面，调试工具跟不上Chrome，略显捉急……

1. Gecko（Firefox内核）

• 代表浏览器：Mozilla Firefox

• 特点：开源，支持标准完整，有些API实现得比Chrome还早！

我之前做Web插件开发时，就被Gecko内核感动过：扩展性非常强，但就是用户群少了点，市占率被Chrome打爆了……

1. Trident（IE内核）

• 代表浏览器：Internet Explorer（IE6～IE11）

• 特点：早期主流，后来成了前端开发者的噩梦！兼容性问题一大堆！！！

我之前做政府项目，还遇到要求必须支持IE9的，页面写一半感觉人生走到了尽头……啥都要特判一堆hack……

1. EdgeHTML（旧版Edge内核）

• 代表浏览器：Windows 10 早期自带的Edge

• 特点：微软想自己搞一套新内核，最后折腾不过Chrome，宣布投降，切换到Blink。

EdgeHTML我没怎么认真用过，公司内测了一次，结果前端同事一脸绝望：页面不炸就不错了……

有小伙伴私信我想要RPA编程教程，我最近找到了一个免费学习RPA网站，提供给大家免费学习

完全免费：songshuhezi.com/rpa.html

2）还有一些冷门/实验内核（了解下）

虽然主流就那几个，但其实还有一些其他的内核，你可能听过：

• Presto：Opera老版本的内核，现在基本淘汰了。

• Servo：Mozilla搞的Rust写的实验性引擎，后来停摆了，不过理念先进。

• KHTML：WebKit的爹，最初由KDE团队开发，现在也没人维护了。

3）总结一张图，核心全在这 4）开发时需要注意的事 开发Web应用时，兼容性是永恒话题，这里分享几个我踩过的坑：

• flex 布局早期在IE根本不支持，写了一堆-ms-前缀。

• position: sticky 在老版本Safari完全无效。

• WebRTC 在Safari下坑超级多，iOS端问题尤其多。

• 用Vue做H5页面时，iPhone 12 Safari突然渲染不出圆角按钮，排查半天原来是WebKit的一个旧Bug……

最后总结一下

1）浏览器内核主要就三大派：Blink、WebKit、Gecko，其他基本淘汰或边缘化。

2）Blink现在是霸主，Chrome系一家独大，但也带来“内核垄断”问题。

3）Web开发还是要注意不同内核的兼容性差异，尤其是老版本IE或者Safari。

4）我建议调试时用Chrome为主，Safari和Firefox为辅，IE能不碰尽量别碰。