共计 2173 个字符,预计需要花费 6 分钟才能阅读完成。
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 |
浏览器渲染过程
HTML
首先会被浏览器内核中的HTML Parser
解析,最终会构建成一颗DOM 树。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 最重要的两局部:
WebCore
:负责 HTML、CSS 的解析、布局、渲染等相干工作;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 的繁难流程
- 浏览器内核将源码 以流的形式 交给 v8 引擎,v8 引擎获取到源码并进行编码转换
- 词法剖析 Scanner,将代码转成 tokens
- 语法分析 Parser、Preparser,间接将 tokens 转换成 AST 树结构
- 字节码生成
- parser 就是间接将 tokens 转换成 AST 树结构
- preParse 称之为预解析,为什么须要预解析呢?
- 这是因为并不是所有的 js 代码一开始就会被执行,如果对所有的 js 代码都进行解析,会影响网页运行效率。所以 v8 引擎就实现了 提早解析 的计划,将不必要的函数进行预解析,也就是只解析临时须要的内容,而对函数的全量解析是在函数被调用时才会进行
- 比方咱们在一个函数 outer 外部定义了另外一个函数 inner,那么 inner 函数就会进行预解析
上面看一下在线解析 AST 的示例👇
浏览器内核与 JS 引擎本篇就简略聊这么多,先浅浅的理解一下。对于 V8 的货色很多,也有很多十分绝妙的设计,更多 V8 相干的戳这里,一步步解锁吧!
我是 甜点 cc☭
微信公众号:【看见另一种可能】
酷爱前端开发,也喜爱专研各种跟本职工作关系不大的技术,技术、产品趣味宽泛且浓重。本号次要致力于分享集体经验总结,心愿能够给一小部分人一些渺小帮忙。
心愿能和大家一起致力营造一个良好的学习气氛,为了集体和家庭、为了我国的互联网物联网技术、数字化转型、数字经济倒退做一点点奉献。数风流人物还看中国、看今朝、看你我。