【js高级必备】你不了解的，浏览器内核解析网页的原理

1、网上通常说的解说原理

从你输入url解析DNS地址通过dns服务器地址，找到对应的网页资源进行下载，下载下来后页面就开始渲染页面

大家有没有想过页面是如何被渲染的呢？

页面又是如何去加载css文件，html文件和js文件呢？

这些就要说到浏览器的内核

2.浏览器的内核执行原理

浏览器内核执行分为两个引擎，一个是浏览器的排版引擎，还有一个是js引擎

排版引擎要是是执行css和HTML的。下面我来给大家说一下排版引擎

关于一些排版引擎介绍

（1）Trident
Triident 是Interent Explorer（IE）浏览器使用的引擎。Trident 在 Windows 操作系统中被设计为一个功能模块，使得其他软件的开发人员可以便捷地将网页浏览功能加入到其开发的应用程序里。

国内很多的双核浏览器提供了“兼容模式”，该模式便是使用了 Trident 引擎。其代表软件有遨游、世界之窗、QQ浏览器、猎豹安全浏览器、360安全浏览器、360极速浏览器等。

（2）EdgeHTML
微软公司在 Windows10 操作系统中提供了一个新的浏览器 Microsoft Edge，其最显著的特点是使用了新引擎EdgeHTML。EdgeHTML 在速度方面有了极大的提升，在 Trident 基础上删除了过时的旧技术支持代码，增加了许多对现代浏览器的技术支持。

（3）Gecko
Gecko 是 Mozilla FierFox（火狐浏览器）使用的引擎，其特点是源代码完全公开，可开发程度很高，全世界的程序员都可以为其编写代码、增加功能。Gecko 原本是有网景公司开发的，现在由 Mozilla 基金会维护。Gecko 是跨平台的，支持在 Windows、 Linux 和 macOS 等操作系统上运行。

（4）WebKit
WebKit 是一个开放源代码的浏览器引擎，其所包含的 WebCore 排版引擎和 JavaScriptCore引擎来自于 KDE 项目组的 KHTML 和 KJS 。苹果公司采用了 KHTML 作为开发 Safari 浏览器的引擎后，衍生出了 WebKit 引擎，并按照开源协议开放了WebKit 的源代码。 WebKit 具有高效稳定、兼容性好、源码结构清晰、易于维护的特点。 Google Chrome 浏览器也曾经使用过 WebKIt引擎。

（5）Blink
Blink 是一个由 Google 公司和 Opera Software ASA 开发的浏览器排版引擎， Google 公司将这个引擎作为开源浏览器 Chromium 项目的一部分。Blink 是 WebKit 中 WebCore 组件的一个分支，并且在 Chrome （ 28 及后续版本 ）、Opera（ 15 及后续版本 ）等浏览器中使用。

目前国内大部分浏览器都采用了 WebKit 或 Blink 内核，一些双核浏览器将其作为 “ 急速模式 ” 的内核。在移动设备中，iPhone 和 iPad 等苹果 IOS 平台使用 WebKit 内；Android 4.4 之前的 Android 系统浏览器内核是 WebKit ， 在 Android 4.4 系统中更改为 Blink 。

关于浏览器的js引擎

Chrome     V8

Firefox    SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）

Safari     Nitro（4-）

Opera Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）

IE -> Edge    JScript（IE3.0-IE8.0 / Chakra（IE9+之后）

备注：SpiderMonkey是第一款JS引擎，JavaScript之父Brendan Eich在网景的时候写的，从某种意义上来说，火狐才是正统。

重点来了，这些引擎都是如何工作的？

  1. 先来说说排版引擎的执行顺序

当浏览器访问服务器的时候，默认第一个开始下载的就是index.html，就从这个文件开始执行，

先是会解析这个html，发现有引入的css，就开始解析css，发现有js就下载下来，执行js解析会停止html的解析，当js解析完毕后，会再来解析html，解析html的时候，会先把html解析成DomTree

     当然这个时候css也会被解析成css的样式规则（StyleRules），当形成各自的dom数和cssom时，js会在这个形成过程之前把一个html操作和css操作执行完毕，才会形成各自的树，整个解析完毕后会组合成一个渲染树（randeTree），当时一个渲染树的时候，会有另一个引擎，layout引擎（布局引擎，来对不同的显示器进行排版布局），这也引发了一个知识点，重绘必会引起重排，而重排不会引起重绘的原理

   等这些操作完毕之后，我们也就解释完毕了排版引擎的整个工作流程

 

2.再来说说js引擎的原理

   我们就以谷歌的V8引擎来做案例

    如果你拜读过v8引擎的源码你就不难发现js引擎在执行js的过程

js引擎会把js代码先Parse通过词法分析和语法分析成一个AST抽象语法树，类似于什么呢？

       如果你定义一个变量   var age ="10";
var name =10;,  经过词法分析成这样

 

再经过V8中的IGNITION函数把AST语法书转译成bytecode的，再由字节码转译成不同型号的CPU能执行的机器码，交给CPU去处理，在转译字节码之前 Ignition函数还会干一件是，就是会把一些常用的js代码通过Turtofun函数优化存储起来，在下一次调用的时候就不用再去编译这段代码，这里引出来一个知识点

  为什么我们要用typescript呢？因为typescript会指定 你的入参类型或者你定义变量类型，能优化在v8解析js过程中的效率，当然我们也更期待官方js能出这个约束，那么也就淘汰的typescript了，

 

跑远了

到现在  js与元素都已经渲染解析完毕了

如果你有学到  请一键三连，不要白嫖哟，欢迎探讨