1. 引言

本周精读的文章是 V8 引擎 Lazy Parsing,看看 V8 引擎为了优化性能,做了怎样的尝试吧!

这篇文章介绍的优化技术叫 preparser,是通过跳过不必要函数编译的方式优化性能。

2. 概述 & 精读

解析 Js 发生在网页运行的关键路径上,因此加速对 JS 的解析,就可以加速网页运行效率。

然而并不是所有 Js 都需要在初始化时就被执行,因此也不需要在初始化时就解析所有的 Js!因为编译 Js 会带来三个成本问题:

  1. 编译不必要的代码会占用 CPU 资源。
  2. 在 GC 前会占用不必要的内存空间。
  3. 编译后的代码会缓存在磁盘,占用磁盘空间。

因此所有主流浏览器都实现了 Lazy Parsing(延迟解析),它会将不必要的函数进行预解析,也就是只解析出外部函数需要的内容,而全量解析在调用这个函数时才发生。

预解析的挑战

本来预解析也不难,因为只要判断一个函数是否会立即执行就可以了,只有立即执行的函数才需要被完全解析。

使得预解析变复杂的是变量分配问题。原文通过了堆栈调用的例子说明原因:

Js 代码的执行在堆栈上完成,比如下面这个函数:

function f(a, b) {
const c = a + b;
return c;
} function g() {
return f(1, 2);
// The return instruction pointer of `f` now points here
// (because when `f` `return`s, it returns here).
}

这段函数的调用堆栈如下:

首先是全局 This globalThis,然后执行到函数 f,再对 a b 进行赋值。在执行 f 函数时,通过 <rip g>(return instruction pointer) 保存 g 堆栈状态,再保存堆栈跳出后返回位置的指针 <save fp>(frame pointer),最后对变量 c 赋值。

这看上去没有问题,只要将值存在堆栈就搞定了。但是将变量定义到函数内部就不一样了:

function make_f(d) {
// ← declaration of `d`
return function inner(a, b) {
const c = a + b + d; // ← reference to `d`
return c;
};
} const f = make_f(10); function g() {
return f(1, 2);
}

将变量 d 申明在函数 make_f 中,且在返回函数 inner 中用到了 d。那么函数的调用栈就变成了这样:

需要创建一个 context 存储函数 f 中变量 d 的值。

也就是说,如果一个在函数内部定义的变量被子 Scope 使用时,Js 引擎需要识别这种情况,并将这个变量值存储在 context 中。

所以对于函数定义的每一个入参,我们需要知道其是否会被子函数引用。也就是说,在 preparser 阶段,我们只要少能分析出哪些变量被内部函数引用了。

难以分辨的引用

预处理器中跟踪变量的申明与引用很复杂,因为 Js 的语法导致了无法从部分表达式推断含义,比如下面的函数:

function f(d) {
function g() {
const a = ({ d }

我们不清楚第三行的 d 到底是不是指代第一行的 d。它可能是:

function f(d) {
function g() {
const a = ({ d } = { d: 42 });
return a;
}
return g;
}

也可能只是一个自定义函数参数,与上面的 d 无关:

function f(d) {
function g() {
const a = ({ d }) => d;
return a;
} return [d, g];
}

惰性 parse

在执行函数时,只会将最外层执行的函数完全编译并生成 AST,而对内部模块只进行 preparser

// This is the top-level scope.
function outer() {
// preparsed
function inner() {
// preparsed
}
} outer(); // Fully parses and compiles `outer`, but not `inner`.

为了允许惰性编译函数,上下文指针指向了 ScopeInfo 的对象(从代码中可以看到,ScopeInfo 包含上下文信息,比如当前上下文是否有函数名,是否在一个函数内等等),当编译内部函数时,可以利用 ScopeInfo 继续编译子函数。

但是为了判断惰性编译函数自身是否需要一个上下文,我们需要再次解析内部的函数:比如我们需要知道某个子函数是否对外层函数定义的变量有所引用。

这样就会产生递归遍历:

由于代码总会包含一些嵌套,而编译工具更会产生 IIFE(立即调用函数) 这种多层嵌套的表达式,使得递归性能比较差。

而下面有一种办法可以将时间复杂度简化为线性:将变量分配的位置序列化为一个密集的数组,当惰性解析函数时,变量会按照原先的顺序重新创建,这样就不需要因为子函数可能引用外层定义变量的原因,对所有子函数进行递归惰性解析了。

按照这种方式优化后的时间复杂度是线性的:

针对模块化打包的优化

由于现代代码几乎都是模块化编写的,构建起在打包时会将模块化代码封装在 IIFE(立即调用的闭包)中,以保证模拟模块化环境运行。比如 (function(){....})()

这些代码看似在函数中应该惰性编译,但其实这些模块化代码从一开始就要被编译,否则反而会影响性能,因此 V8 有两种机制识别这些可能被立即调用的函数:

  1. 如果函数是带括号的,比如 (function(){...}),就假设它会被立即调用。
  2. 从 V8 v5.7 / Chrome 57 开始,还会识别 uglifyJS 的 !function(){...}(), function(){...}(), function(){...}() 这种模式。

然而在浏览器引擎解析环境比较复杂,很难对函数进行完整字符串匹配,因此只能对函数头进行简单判断。所以对于下面这种匿名函数的行为,浏览器是不识别的:

// pre-parser
function run(func) {
func()
} run(function(){}) // 在这执行它,进行 full parser

上面的代码看上去没毛病,但由于浏览器只检测被括号括住的函数,因此这个函数不被认为是立即执行函数,因此在后续执行时会被重复 full-parse。

也有一些代码辅助转换工具帮助 V8 正确识别,比如 optimize-js,会将代码做如下转换。

转换前:

!function (){}()
function runIt(fun){ fun() }
runIt(function (){})

转换后:

!(function (){})()
function runIt(fun){ fun() }
runIt((function (){}))

然而在 V8 v7.5+ 已经很大程度解决了这个问题,因此现在其实不需要使用 optimize-js 这种库了~

4. 总结

JS 解析引擎在性能优化做了不少工作,但同时也要应对代码编译器产生的特殊 IIFE 闭包,防止对这种立即执行闭包进行重复 parser。

最后,不要试图总是将函数用括号括起来,因为这样会导致惰性编译的特性无法启用。

讨论地址是:精读《V8 引擎 Lazy Parsing》 · Issue #148 · dt-fe/weekly

如果你想参与讨论,请 点击这里,每周都有新的主题,周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

关注 前端精读微信公众号

special Sponsors

版权声明:自由转载-非商用-非衍生-保持署名(创意共享 3.0 许可证

精读《V8 引擎 Lazy Parsing》的更多相关文章

  1. 深入浏览器工作原理和JS引擎(V8引擎为例)

    浏览器工作原理和JS引擎 1.浏览器工作原理 在浏览器中输入查找内容,浏览器是怎样将页面加载出来的?以及JavaScript代码在浏览器中是如何被执行的? 大概流程可观察以下图: 首先,用户在浏览器搜 ...

  2. [翻译] V8引擎的解析

    原文:Parsing in V8 explained 本文档介绍了 V8 引擎是如何解析 JavaScript 源代码的,以及我们将改进它的计划. 动机 我们有个解析器和一个更快的预解析器(~2x), ...

  3. 一文搞懂V8引擎的垃圾回收

    引言 作为目前最流行的JavaScript引擎,V8引擎从出现的那一刻起便广泛受到人们的关注,我们知道,JavaScript可以高效地运行在浏览器和Nodejs这两大宿主环境中,也是因为背后有强大的V ...

  4. Chrome V8引擎系列随笔 (1):Math.Random()函数概览

    先让大家来看一幅图,这幅图是V8引擎4.7版本和4.9版本Math.Random()函数的值的分布图,我可以这么理解 .从下图中,也许你会认为这是个二维码?其实这幅图告诉我们一个道理,第二张图的点的分 ...

  5. (译)V8引擎介绍

    V8是什么? V8是谷歌在德国研发中心开发的一个JavaScript引擎.开源并且用C++实现.可以用于运行于客户端和服务端的Javascript程序. V8设计的初衷是为了提高浏览器上JavaScr ...

  6. 浅谈Chrome V8引擎中的垃圾回收机制

    垃圾回收器 JavaScript的垃圾回收器 JavaScript使用垃圾回收机制来自动管理内存.垃圾回收是一把双刃剑,其好处是可以大幅简化程序的内存管理代码,降低程序员的负担,减少因 长时间运转而带 ...

  7. V8引擎嵌入指南

    如果已读过V8编程入门那你已经熟悉了如句柄(handle).作用域(scope)和上下文(context)之类的关键概念,以及如何将V8引擎作为一个独立的虚拟机来使用.本文将进一步讨论这些概念,并介绍 ...

  8. 浅谈V8引擎中的垃圾回收机制

    最近在看<深入浅出nodejs>关于V8垃圾回收机制的章节,转自:http://blog.segmentfault.com/skyinlayer/1190000000440270 这篇文章 ...

  9. 深入出不来nodejs源码-V8引擎初探

    原本打算是把node源码看得差不多了再去深入V8的,但是这两者基本上没办法分开讲. 与express是基于node的封装不同,node是基于V8的一个应用,源码内容已经渗透到V8层面,因此这章简述一下 ...

随机推荐

  1. DIV水平垂直布局

    <%@ page language="java" pageEncoding="utf-8" import="java.util.*,com.ta ...

  2. 【贪心+背包】BZOJ1334 [Baltic2008]Elect

    Description 从N个数中选出任意个数且和尽量大,但要满足去掉任意一个和就小于总和的一半.n<=300, ai<=1e5. Solution 这个条件其实就是 去掉选出的最小的一个 ...

  3. BZOJ_3282_Tree_LCT

    BZOJ_3282_Tree_LCT Description 给定N个点以及每个点的权值,要你处理接下来的M个操作. 操作有4种.操作从0到3编号.点从1到N编号. 0:后接两个整数(x,y),代表询 ...

  4. JQuery 将div中的内容替换掉

    $("#div2").children().replaceWith($("#userText").val());谷歌没有效果. $("#div2&qu ...

  5. setContentType与setCharacterEncoding的区别

    setCharacterEncoding只是设置字符的编码方式 setContentType除了可以设置字符的编码方式还能设置文档内容的类型 1.setCharacterEncoding respon ...

  6. MYSQL—— 基础入门,select 查询涉及到的关键字组合详解(进阶篇)

    SELECT查询组合使用的关键字很多,首先将最简单常用的关键字进行区分及使用,后续再继续补充............ 以下所有的关键字组合使用,主要以两个表students与students_scor ...

  7. openstack学习(1)

    OpenStack项目结构 OpenStack架构 1. horizon以图形的方式管理所有的project,包括nova虚拟机的创建,neutron网络,cinder存储,glance镜像等:    ...

  8. Entity Framework Core 关联删除

    关联删除通常是一个数据库术语,用于描述在删除行时允许自动触发删除关联行的特征:即当主表的数据行被删除时,自动将关联表中依赖的数据行进行删除,或者将外键更新为NULL或默认值. 数据库关联删除行为 我们 ...

  9. 钉钉开发获取APPKEY, APPSECRET, CorpId和SSOSecret

    首先用自己的钉钉账号注册一个企业: https://oa.dingtalk.com/index.htm 一.获取应用APPKEY及APPSECRET方法: 1.登录钉钉开放平台创建应用: https: ...

  10. Visio打开或取消箭头的自动吸附和自动连接

    在用Visio画图时Visio的自动对齐.自动连接.自动吸附功能确实能带了很多便利.但在画连接线时,Visio总是自动连接箭头与图形的固定节点,想要微调一下连接位置,就显得很不方便,需要关闭自动连接功 ...