浏览器工作原理简介

由第一节 浏览器简介中我们知道，浏览器有很多种，由不同的商家生产，功能上也有所不同。那么浏览器是如何渲染HTML、CSS、JS成一个漂亮且有用的网页的呢？

如果把浏览器比作一个机器人加工厂，HTML就是零散的零件，CSS就是涂色的的工具，JS就是内置的程序，以便我们使用指令，能让其动起来。

以此类推，开发简单网页，我们只需要掌握HTML即可，如果希望网页有点样式，还需要学习CSS，如果还希望网页能做一些交互或者展示动态的数据等功能，还需要掌握Javascript。也就是：

HTML + CSS + Javascript = 一个好看且有用的网页

也有这样一个比喻：HTML是骨架，CSS是皮肤，JS是骨骼肌肉

那么浏览器这个加工厂，内部又有怎样的构成呢？—— 浏览器内核

浏览器内核简介

浏览器内核分成两部分：渲染引擎和js引擎。由于js引擎越来越独立，内核就倾向于只指渲染引擎。

渲染引擎

渲染引擎其实就是网页浏览器的排版引擎，也被称为样版引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。

部分浏览器使用的渲染引擎如下：

• firefox使用gecko引擎（开源：https://developer.mozilla.org/zh-CN/docs/Mozilla/Gecko）
• IE使用Trident引擎(微软已停止维护，IE时代已终结)
• 2015年微软推出自己新的浏览器，原名叫斯巴达，后改名edge,使用edge引擎
• opera最早使用Presto引擎，后来弃用，跟随谷歌使用的引擎
• chrome\safari\opera使用webkit引擎（开源：https://webkit.org/）
• 13年chrome和opera开始使用Blink引擎（基于webkit发展）

更多渲染殷勤可参考：https://baike.baidu.com/item/%E6%8E%92%E7%89%88%E5%BC%95%E6%93%8E/8371898?fromtitle=gecko&fromid=7348782

渲染引擎工作流程

• HTML解析器解析DOM树（解析为DOM树上个节点，同时解析CSS样式）
• 渲染树结构（具有一定的视觉效果，并按照一定顺序排列在屏幕上）
• 布局渲染树（为每个节点分配固定坐标）
• 绘制DOM树（渲染引擎会遍历所有的节点，由UI后端绘制）

webkit工作流程

gechko工作流程

JavaScript引擎

部分浏览器使用的JavaScript引擎如下：
JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。

• 老版本IE使用Jscript引擎
• IE9之后使用Chakra引擎
• edge浏览器仍然使用Chakra引擎
• firefox使用monkey系列引擎
• safari使用的SquirrelFish系列引擎
• Opera使用Carakan引擎
• chrome使用V8引擎(开源)。nodeJs其实就是封装了V8引擎

浏览器引入JS的渲染过程

图片来源于：https://zhuanlan.zhihu.com/p/27628685

了解了浏览器的工作原理，在遇到问题时，才能更好的分析问题所在，以至于之后能做出更好的优化。

关于我

• 一个推崇全栈开发的前端开发人员

• 微信: itrzzh
  

• 公众号：全栈道
  

• 个人网站：https://www.iotzzh.com
  

• 知识星球：全栈道
  

• B站：https://space.bilibili.com/285025688

• 抖音：全栈道

• github：https://github.com/iotzzh

• gitee: https://gitee.com/iotzzh

捐赠鼓励

开源不易，如果《全栈道》对你有些帮助，可以请作者喝杯咖啡，算是对开源做出的一点点鼓励吧！