浏览器的工作原理

工作流程

我们在访问一个网站时，会输入域名，DNS负责将域名解析为一个ip地址。

首先，服务器会根据ip地址返回一个html网页，遇到css文件和js文件时，会去下载文件，直到下载好完整的文件

接下来，如何执行该文件呢？

引入浏览器内核，浏览器内核又称为排版引擎等，可以用来渲染展示页面。

浏览器内核的工作流程：

在整个文件中，首先是html文件和style sheets，利用HTML Parse和CSS Parse可以将html标签转换为DOM Tree和style rule，经过Attachment，形成Render Tree（渲染树）经过Layout布局修饰，使其可以适应不同大小的浏览器，最后可以将网页绘制出来，最终展现出来。

那么，你是否发现我们并未涉及到js代码？

在上述过程中，html文件会形成DOM树，众所周知，我们可以利用js代码，来操作dom。

那么，js代码又是如何执行的呢？

此时，我们要引入js引擎，不得不提的是v8引擎

这时，是不是有点混淆浏览器引擎（排版引擎）和js引擎了？

要说的是：浏览器引擎用于渲染层的工作，js引擎用于逻辑层的工作，两者是缺一不可的

那么，我们来说一下js引擎是如何工作的呢？

js引擎的工作是负责js代码的运行

工作流程：

众所周知，高级语言最终会转换为机器码在CPU中执行，其实，js引擎的工作就是将js代码转换为机器码，实现js的执行

首先js代码会进行Parse解析（包括词法解析和语法解析），形成AST(抽象语法树)，然后经过Ignation库，将AST转换为字节码文件，然后转换成汇编语言，然后转换为机器语言（01010101...），（还有一个TurboFan库，可以提取Ignation中的大量重复使用的代码，形成优化的机器码，提高运行效率）

还有一个预解析的概念，我们知道，不是所有的代码都会在解析后被执行，那么如果提前解析它，会降低效率，此时可以将这些代码进行预解析，提高效率。