导读｜Hippy使用JS引擎进行异步渲染，在用户从点击到打开首屏可交互过程中会有一定的耗时，影响用户体验。如何优化这段耗时？腾讯客户端开发工程师李鹏，将介绍QQ浏览器通过切换JS引擎来优化耗时的探索过程和效果收益。在分析Hippy耗时瓶颈、对比业界可选引擎方案后，最终QQ浏览器通过选择使用Hermes引擎、将JS离线生成Bytecode并使用引擎直接加载Bytecode，让首帧耗时优化50%起。希望本文对面临同样困扰的你有帮助。

背景

目前QQ浏览器（下简称QB）使用Hippy的业务超过100个，基本上95%的核心业务都是使用Hippy作为首要技术栈来开发。但是跟Native相比较而言，Hippy是使用JS引擎进行异步渲染，在用户从点击到打开首屏可交互过程中会有一定的耗时，影响用户体验。如何优化耗时，尽量对齐Native体验，想必是许多开发者都在思考优化的事情。

本文主要介绍QQ浏览器通过切换JS引擎来优化耗时的探索过程和效果收益。本文我将分析Hippy执行流程及耗时瓶颈、对比业界JS引擎方案，最终选择使用Hermes引擎。之后分析将JS离线生成Bytecode，使用引擎直接加载Bytecode的能力。值得一提的是，在业务无需修改一行代码的前提下，Hippy的包加载速度提高80%，首帧耗时优化50%起。下面我将展开讲述。

Hippy业务耗时瓶颈分析

Hippy整个启动流程依赖JS线程的执行。我们其实可以将整个过程抽象看成一个串行的操作，以QB冷启动首页Feed流，结合线上数据性能监控可以看到如下阶段耗时：

注：TTI = Time To Interact，意思是从业务创建到业务可交互所花费的时间，因为衡量业务可交互比较复杂，各个业务对可交互的定义不一样，所以这里以首帧上屏为准来衡量；

通过打点分析得到，用户从打开业务创建RootView开始，到最终首帧上屏总共耗时1488毫秒，其中主要在Module初始化、创建HippyCore（bootstrap.js以及common包执行耗时）、业务包执行耗时上。其中加载执行业务包耗时1303毫秒，占整体TTI的87%。

如果我们能够优化加载执行业务包的耗时，那么我们就可以极大的降低TTI。在iOS上Hippy使用的是系统提供的JavascriptCore引擎来运行JS代码，所以我们要分析一下JSC的执行过程。

JavascriptCore执行流程分析

具体流程：词法分析，输出tokens；语法分析，生产AST（抽象语法树）；从AST生成字节码； 通过Low Level解释器执行字节码；使用JIT加速解释执行机器码（带JIT的版本）。

注：本文JSC是指苹果官方提供的JavascriptCore.framework，JSC分带JIT与不带JIT的版本，带JIT的版本目前只有苹果自家的Safari能够使用，公开的JavascriptCore因为安全原因（JIT可以动态执行机器码），实际是不带JIT的版本。下面讨论的也是指不带JIT的JSC版本。

整个流程，在JS代码被解释执行前，绝大部分时间消耗是在字节码生成上。如果能将Bytecode生成前置缓存起来，每次执行JS的时候直接取缓存的Bytecode，那将会极大降低耗时。但是很可惜的是，JavascriptCore属于系统库，并没有提供这个能力。我们可以考虑选择其他支持Bytecode的引擎替换掉JSC。

可选引擎对比

除了JSC，常见的开源引擎包括V8、QuickJS、Hermes。