《图解HTML》第二节 浏览器的工作原理简介

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

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

这就全靠于浏览器内核啦~

浏览器内核简介

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

1.jpg

渲染引擎

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

部分浏览器使用的渲染引擎:

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

更多渲染殷勤可参考:https://baike.baidu.com/item/排版引擎/8371898?fromtitle=gecko&fromid=7348782

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

2.png

gechko工作流程

3.jpg

JavaScript引擎

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

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

4.png

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

目录
相关文章
|
6月前
|
Web App开发
在HTML中用meta控制浏览器默认模式
在HTML文档的`<head>`标签中,通过添加不同的`<meta>`标签可指定浏览器默认使用的内核。使用`<meta name="renderer" content="webkit">
83 1
|
6月前
|
Web App开发 移动开发 JavaScript
基于VML与HTML5 Canva实现的跨浏览器饼图与折线图
基于VML与HTML5 Canva实现的跨浏览器饼图与折线图
37 5
|
24天前
|
存储 移动开发 前端开发
|
2月前
|
前端开发 JavaScript 异构计算
简述浏览器的渲染原理
浏览器渲染原理主要包括以下步骤:1)解析HTML文档生成DOM树;2)解析CSS生成CSSOM树;3)结合DOM与CSSOM生成渲染树;4)布局计算(回流)确定元素大小和位置;5)绘制(Paint)将节点转为图形内容;6)合成(Composite)多层图像。整个过程从文档解析到最终输出完整网页,并通过优化技术提升性能。
|
6月前
|
前端开发
超文本标记语言(HTML)简介
超文本标记语言(HTML)简介
|
6月前
|
开发者
HTML 实体字符简介
HTML 实体字符简介
|
6月前
|
JavaScript 前端开发 UED
HTML标签的工作原理是什么?
【6月更文挑战第28天】HTML标签的工作原理是什么?
44 1
|
6月前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
5月前
|
JavaScript 前端开发 物联网
文本,Vue实现打印的方式,打印机的种类有多少,浏览器打印html,右键,2打印插件,3指令打印,vue-print-nb
文本,Vue实现打印的方式,打印机的种类有多少,浏览器打印html,右键,2打印插件,3指令打印,vue-print-nb
|
5月前
|
缓存 JavaScript 前端开发
前端 JS 经典:浏览器中 ESModule 的工作原理
前端 JS 经典:浏览器中 ESModule 的工作原理
51 0