什么是浏览器内核和JavaScript引擎?

617 阅读5分钟

前言

学前端也有个小半年了,对浏览器的一些认识也很暧昧,大概也就是知道市场上有哪些浏览器,用的什么内核,哪个更好用一点。今天休息就搜集了一些资料,在这里就当是自己学习总结。

一.认识浏览器内核

1.定义

排版引擎(layout engine):所谓的浏览器内核,也就是指浏览器的排版引擎,也有的地方称为浏览器引擎(browser engine),页面渲染引擎(rendering engine),样板引擎,模板引擎。这么多叫法很容易让人误解,其实它们说的都是同一个东西,它只不过是不同的人翻译过来叫法不同,不同教材上叫法不同,从而有了多种叫法。

2.作用:

排版引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因

3.著名的浏览器引擎

-   **Gecko**: 早期被Netscape和Mozilla Firefox浏览器浏览器使用
-   **Trident**:微软开发,被IE4~IE11浏览器使用,但是Edge浏览器已经转向Blink
-   **Webkit**:苹果基于KHTML开发、开源的,用于Safari,Google Chrome之前也在使用
-   **Blink**:是Webkit的一个分支,Google开发,目前应用于Google Chrome、Edge、Opera等

- ***以下是一些浏览器内核的生命线***

image.png

图片来源:(zh.wikipedia.org/wiki/%E6%B5…)

4.那我们国内的浏览器是什么情况呢

  • 目前我们国内还没有自己的内核,国内的浏览器都是用的开源内核,自己写一套UI,优化一下的产物
  • 国内的浏览器大多数使用的都是Trident+Webkit/Blink双核,比如QQ、UC、360、2345等
  • 也有一些使用的Webkit/Blink单核:像一些带有高速关键字的浏览器,比如搜狗、360极速浏览器等
  • 双核浏览器是为了兼容性更好,当我们打开一些老旧网站时,选择兼容模式,则使用的是Trident内核。平时一般使用兼容高速模式,加载网页的速度会更快一些,则使用的是WebKit/Blink内核。双核浏览器是一个不仅仅具有ie浏览器内核同时兼容非ie浏览器内核的浏览器,可以让用户在浏览器当中体验不同的需求
  • 这么一说感觉国内的浏览器好像兼容性更好是吧,但是在扩展(插件)有限,还有广告满天飞,主页太混乱,还有很多东西不能修改,甚至还捆绑软件这才是它令人讨厌的原因吧。
  • 但是有的时候你不得不用,比如教师资格证报名

image.png

5.2022年浏览器的市场份额

image.png 数据来源:statcounter

二、 浏览器的渲染过程

1. 浏览器是怎样渲染一个网页的呢?

首先回去解析我们的HTML,然后生成DOM数,如果在解析HTML的过程中遇到css代码,就暂停解析HTML,而去加载和解析css代码,遇到javascript代码也会暂停解析HTML,然后有JavaScript引擎来解析Js代码。

image.png

2.浏览器内核和JavaScript引擎的关系

  • 浏览器内核包含JavaScript引擎,因为每个不同的浏览器内核不一样,所以也就没有统一的叫法
  • 这里我们先以WebKit浏览器内核为例,WebKit内核事实上由两部分组成的:
    1. WebCore:负责HTML解析、布局、渲染等等相关的工作
    2. JavaScriptCore:解析、执行JavaScript代码

3.为什么需要JavaScript引擎呢?

  • JavaScript是不能直接被计算机识别的,高级的编程语言都是需要转成最终的机器指令来执行的;
  • 事实上我们编写的JavaScript无论你交给浏览器或者Node环境执行,最后都是需要被CPU执行的,其它高级编程语言也一样。
  • 但是CPU只认识自己的指令集,实际上是机器语言,才能被CPU所执行
  • 所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行

4.比较常见的JavaScript引擎有哪些呢?

  • SpiderMonkey:第一款JavaScript引擎,由Brendan Eich开发(也就是JavaScript作者)
  • Chakra:微软开发,用于IE浏览器,不过2022.06.16微软将永久关停IE浏览器,不过关停并不带表就没有人还用,还得有个慢慢过渡的过程它才会慢慢淡出我

image.png

  • JavaScriptCore:WebKit中的JavaScript引擎,Apple公司开发
  • V8:Google开发的强大JavaScript引擎,也帮助Chrome从众多浏览器中脱颖而出,也是目前用得最多的js引擎
  • 等等...

总结

浏览器内核就是用来解析HTML,CSS,JavaScript代码的集合体,然后向我们展示页面内容的,JaveScript引擎就是用来解析执行JavaScript代码的,它可以集成在浏览器上,也可以集成在任何C++环境上,Node正是集成了V8引擎,所以能让我们能在Node环境运行javaScript代码.