JavaScript代码是怎么在浏览器外面运行的？上面让咱们从浏览器内核和JS引擎两方面简略摸索一下

浏览器内核

浏览器内核（Rendering Engine），常见的叫法如：排版引擎、解释引擎、渲染引擎，当初风行称为浏览器内核。

浏览器内核阐明
IETridentIE、猎豹平安、360极速浏览器、百度浏览器
FireFoxGecko惋惜这几年曾经败落了，关上速度慢、降级频繁、猪一样的队友flash、神一样的对手chrome。
SafariWebkit从Safari推出之时起，它的渲染引擎就是Webkit，一提到 webkit，首先想到的便是 chrome，能够说，chrome 将 Webkit内核 深入人心，殊不知，Webkit 的鼻祖其实是 Safari。
ChromeChromium/Blink在 Chromium 我的项目中研发 Blink 渲染引擎（即浏览器外围），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采纳Blink内核。二次开发
OperaBlink

浏览器渲染过程

  1. HTML首先会被浏览器内核中的HTML Parser解析，最终会构建成一颗DOM树。
  2. CSS会被浏览器内核中的CSS Parser解析，造成CSS规定，CSS规定和DOM树联合造成一个渲染树，通过layout（布局）生成最终的渲染树。
为什么要有layout呢？因为要适配不同尺寸的屏幕。有了渲染树之后就能够绘制展示进去了。

常见的js引擎

  • SpiderMonkey：第一款js引擎，由Brendan Eich开发（js作者）。
  • Chakra：微软开发，因为IE浏览器。
  • JavascriptCore：webkit的js引擎，Apple公司开发。
  • V8：Google开发的弱小js引擎，也帮忙Chrome从泛滥浏览器中怀才不遇。

浏览器内核和js引擎的关系

这里用webkit为列，webkit最重要的两局部：

  1. WebCore： 负责HTML、CSS的解析、布局、渲染等相干工作；
  2. JavascriptCore：解析、执行js代码。

上面是Chromium的架构图

一般JavaScript引擎（轻便）

作用：javascript引擎帮忙咱们将js代码编译成CPU意识的指令集，最终被cpu执行。

一般JavaScript引擎除了编译之外还要负责执行以及内存治理。 js是解释形语言，由引擎间接读取源码，一边编译一边执行，这样效率绝对较低，而编译形语言（如c++）是把源码间接编译成可间接执行的代码执行效率更高。

随着技术的倒退，对JavaScript性能的要求越来越高，V8引擎就是在此背景下产生的，它产生的目标就是为了进步javascript执行的性能。

V8引擎（轻量）

V8引擎是一个JavaScript引擎实现，最后由一些语言方面专家设计，后被谷歌收买，随后谷歌对其进行了开源。

V8应用C++开发，在运行JavaScript之前，相比其它的JavaScript的引擎转换成字节码或解释执行，V8将其编译成原生机器码（IA-32, x86-64, ARM, or MIPS CPUs），并且应用了如内联缓存（inline caching）等办法来进步性能。

将javascript代码转换成AST

V8引擎会先将javascript代码转换成AST（形象语法树），事实上所有的编程语言都会将源代码解析成形象语法树（abstract syntax tree, AST）。

AST是计算机科学中很早的一个概念，不是V8特有的（只是V8在转换过程中做了十分多的优化），更不是javascript特有的。

AST的用处

AST的作用也不仅仅是用来在V8的编译上，比方咱们罕用的babel插件将 es6->es5 、ts->js 、死区剖析、Dead Code、编译压缩打包、css预处理器、eslint等等，这些性能的实现都离不开AST。

AST编译过程

V8执行js的繁难流程

  1. 浏览器内核将源码以流的形式交给v8引擎，v8引擎获取到源码并进行编码转换
  2. 词法剖析Scanner，将代码转成tokens
  3. 语法分析Parser、Preparser，间接将tokens转换成AST树结构
  4. 字节码生成
  1. parser就是间接将tokens转换成AST树结构
  2. preParse称之为预解析，为什么须要预解析呢？
  • 这是因为并不是所有的js代码一开始就会被执行，如果对所有的js代码都进行解析，会影响网页运行效率。所以v8引擎就实现了提早解析的计划，将不必要的函数进行预解析，也就是只解析临时须要的内容，而对函数的全量解析是在函数被调用时才会进行
  • 比方咱们在一个函数outer外部定义了另外一个函数inner，那么inner函数就会进行预解析

上面看一下在线解析AST的示例

浏览器内核与JS引擎本篇就简略聊这么多，先浅浅的理解一下。对于V8的货色很多，也有很多十分绝妙的设计，更多V8相干的戳这里，一步步解锁吧！

我是 甜点cc☭

微信公众号：【看见另一种可能】

酷爱前端开发，也喜爱专研各种跟本职工作关系不大的技术，技术、产品趣味宽泛且浓重。本号次要致力于分享集体经验总结，心愿能够给一小部分人一些渺小帮忙。

心愿能和大家一起致力营造一个良好的学习气氛，为了集体和家庭、为了我国的互联网物联网技术、数字化转型、数字经济倒退做一点点奉献。数风流人物还看中国、看今朝、看你我。