为 V8 提个醒： 通过明确的编译提示加快 JavaScript 启动速度

|

让 JavaScript 快速运行是响应式网络应用程序的关键。即使有了 V8 的高级优化，在启动过程中解析和编译关键 JavaScript 仍会造成性能瓶颈。了解在初始脚本编译期间编译哪些 JavaScript 函数可以加快网页加载速度。

在处理从网络加载的脚本时，V8 必须为每个函数做出选择：要么立即编译（“急于”），要么推迟编译。如果未编译的函数后来被调用，V8 就必须按需编译。

如果一个 JavaScript 函数最终在页面加载过程中被调用，那么急于编译它是有好处的，因为：

  • 在脚本的初始处理过程中，我们至少需要进行一次轻量级解析，以找到函数的结尾。在 JavaScript 中，要找到函数结尾需要解析全部语法（没有可以计算大括号的捷径–语法太复杂了）。先进行轻量级解析，然后再进行实际解析是重复工作。
  • 如果我们决定急切地编译一个函数，这项工作就会在后台线程上进行，其中部分工作会与从网络加载脚本的工作交错进行。如果我们只在函数被调用时编译该函数，那么并行化工作就来不及了，因为主线程在函数编译完成前无法继续工作。

有关 V8 如何解析和编译 JavaScript 的更多信息，请点击此处。

元素周期表

选择正确的函数进行急切编译将使许多网页受益匪浅。例如，在我们对流行网页进行的实验中，20 个网页中有 17 个得到了改善，前台解析和编译时间平均缩短了 630 毫秒。

我们正在开发一项名为 “显式编译提示 ”的功能，让网页开发人员能够控制哪些 JavaScript 文件和函数会被急切编译。Chrome 136 现已推出一个版本，在该版本中，您可以选择单个文件进行急迫编译。

如果你有一个可以选择进行急迫编译的 “核心文件”，或者你可以在源文件之间移动代码以创建这样一个核心文件，那么这个版本就特别有用。

您可以通过插入神奇注释来触发整个文件的急切编译

//# allFunctionsCalledOnLoad

来触发整个文件的急切编译。

但应谨慎使用这一功能–编译过多会消耗时间和内存！

亲身体验编译提示

您可以通过让 v8 记录函数事件来观察编译提示的运行情况。例如，你可以使用以下文件建立一个最小测试。

index.html：

<script src=“script1.js”></script>
<script src=“script2.js”></script>

script1.js：

function testfunc1() {
console.log('testfunc1 called!')；
}

testfunc1()；

script2.js：

//# allFunctionsCalledOnLoad

function testfunc2() {
console.log('testfunc2 called!')；
}

testfunc2()；

请记住，运行 Chrome 浏览器时用户数据目录要保持清洁，这样代码缓存才不会干扰实验。命令行示例如下

rm -rf /tmp/chromedata && google-chrome --no-first-run --user-data-dir=/tmp/chromedata --js-flags=--log-function_events > log.txt

导航到测试页面后，您可以在日志中看到以下函数事件：

$ grep testfunc log.txt
function,preparse-no-resolution,5,18,60,0.036,179993,testfunc1
function,full-parse,5,18,60,0.003,181178,testfunc1
function,parse-function,5,18,60,0.014,181186,testfunc1
function,interpreter,5,18,60,0.005,181205,testfunc1
function,full-parse,6,48,90,0.005,184024,testfunc2
function,interpreter,6,48,90,0.005,184822,testfunc2

由于 testfunc1 是懒散编译的，因此当它最终被调用时，我们会看到解析函数事件：

function,parse-function,5,18,60,0.014,181186,testfunc1

对于 testfunc2，我们看不到相应的事件，因为编译提示迫使它被急切地解析和编译。

显式编译提示的未来

从长远来看，我们希望能够选择单个函数进行急切编译。这样，网络开发人员就能准确控制他们想要编译的函数，并挤出最后一点编译性能来优化他们的网页。敬请期待！

本文文字及图片出自 Giving V8 a Heads-Up: Faster JavaScript Startup with Explicit Compile Hints

你也许感兴趣的：

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注