乐趣区

关于前端:JavaScript代码是怎么在浏览器里面运行起来的

jiezi

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

浏览器内核

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

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

浏览器渲染过程

  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☭

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

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

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

退出移动版