浏览器工作原理和V8引擎

        首先介绍一下浏览器内核的概念：我们知道在浏览器上显示的画面，都是浏览器通过某些手段处理html,css,js文件，然后在网页上显示画面，浏览器内核（又称浏览器的排版引擎layout engine）就是负责处理这些html,css,js文件的，不同浏览器可能会有不同的内核。比如Webkit基于KHTML开发，用于Safari，Google Chrome之前也在使用，Blink是基于WebKit,目前应用于Google Chrome,Edge,Opera等。

      浏览器解析过程：浏览器对HTML进行解析，遇到css代码会下载，遇到js即加载js代码，我们知道，C,C++,Java,JavaScript等都是高级语言，所以我们浏览器是无法直接解析识别JavaScript代码的，此时就不得不提到JS引擎了，JS引擎的作用是将js代码转换为机器指令，而我们常提到的V8引擎，就是一种JavaScript引擎，常见的JavaScript引擎还有SpiderMonkey,Chakra(微软开发)，JavaScriptCore。这里以WebKit为例，WebKIt由两个部分组成：1.WebCore:负责HTML解析、布局、渲染等工作。2.JavaScriptCore:解析、执行JavaScript代码。（提一句：小程序中编写的JavaScript代码就是被JSCore执行的，渲染层由Webview所解析）

 如上图，是我在网上找的图片,可以看到：HTML被解析程DOM Tree,CSS代码被解析后附属到DOM Tree 上，然后生成Render Tree，这里的Layout是指JS可以直接操作某些DOM结点，比如通过createElement添加DOM结点，然后重新生成新的Render Tree,之后Painting是在浏览器上绘制这些肉眼可见的图像，然后就是展示在我们眼前形形色色的网页了

       V8引擎的定义：V8是主要由C++编写的Google高性能的JavaScript和WebAssembly引擎（超过100w行C++代码），用于Chrome和Node.js。V8可以独立运行，也可以嵌入到任何C++应用程序中。

         V8引擎的工作原理：

 由图可以看到：JavaScript代码首先被Parse模块解析成AST抽象语法树，而后若函数只执行一次，由Ignition转换为字节码（bytecode）,最后运行结果，我们可以看到下半部分还有一个过程，Ignition还可以收集信息，比如函数参数的类型信息（因为JavaScript目前没有对函数参数类型进行约束，而JavaScript的超集TypeScript则在JavaScript基础上增添了类型约束的功能）,TurboFan是一 个编译器,可以将字节码编译为CPU可以直接执行的机器码，如果一个函数被多次调用,那么就会被标记为热点函数,那么就会经过TurboFan转换成优化的机器码,提高代码的执行性能;但是,机器码实际上也会被还原为ByteCode ,这是因为如果后续执行函数的过程中,类型发生了变化(比如sum函数原来执行的是number类型,后来执行变成了string类型) ,之前优化的机器码并不能正确的处理运算,就会逆向的转换成字节码;

 V8引擎的细节:

JavaScript源码是如何被解析的？（Parse过程）

 Blink将源码交给V8引擎，Stream获取到源码后进行编码转换，Scanner会进行语法分析，将代码转换为tokens,紧接着tokens会被转换为AST树，那么其中为何要进行PreParser（预编译）呢？原因如下：1.有的JavaScript代码一开始并不会执行，对所有的JavaScript代码进行解析，会影响到运行效率，所以V8引擎就实现了Lazy Parsing(延迟解决)的方案，将不必要的函数进行预编译，就是只解析需要的内容。

初始化全局对象：

在Parse阶段，代码被解析，V8引擎在内部创建一个全局对象Global Object(GO)，该对象包含Date，Number,String,setInterval,setTimeout，还有在程序代码中定义的变量（全部初始化赋值为undefined）等等，其中还有window属性指向自己（即window:this）。

V8为了执行代码，V8引擎内部会有一个执行上下文栈（Execution Context Stack,ECStack),而为了执行全局代码还会创建一个全局执行上下文（Globa Execution Context），在执行时会创建变量对象VO指向GO,当给属性赋值的时候，便会将变量的值由undefined改掉，这就是为什么下面这段代码执行结果是undefined,而不是直接报错

console.log(a)

var a="JavaScript"