开发者社区> atuanxy> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端优化系列 - JS混淆引入性能天坑

简介: 现在前端渲染变得越来越普遍。前端渲染主要依赖JS去完成核心逻辑,JS正变得越来越重要。本文详细谈谈JS混淆对性能的影响。
+关注继续查看

前言

现在用户手机性能,浏览器性能,网络性能,越来越好,后端逻辑逐渐向前端转移,前端渲染变得越来越普遍。前端渲染主要依赖JS去完成核心逻辑,JS正变得越来越重要。而JS文件是以源码的形式传输,可以在Chrome Devtools上轻易地被修改和调试。我们一般不希望核心业务逻辑轻易的被别人了解,往往会通过代码混淆的方式去进行保护。

那么,代码混淆对JS性能是否有影响呢?我们下面讨论一个真实的案例,看看混淆如何让JS性能变差100倍,并详细介绍如何去跟进和处理类似问题。

混淆引入性能问题

通常JS混淆有两种方式,一种是正则替换,强度比较弱,很容易被破解;另外一种是修改抽象语法树,比较难破解。

一些比较重要的JS文件,一般会使用修改抽象语法树的方式去进行混淆保护。相关的原理请参考知乎上的文章:前端如何给 JavaScript 加密

一般来说,JS混淆会引入多余代码,修改原来的抽象语法树,可能会引入性能问题,但性能影响一般非常小。

但是,也有异常的情况,我们在一个业务上发现它的isdsp_securitydata_send.js执行非常耗时,竟然达到惊人的1.6秒。Trace信息如下,

1ed8a5ea00cd480c2b2fc54d7feafa17bd6156e0

而使用它未混淆的源码去执行时,发现在15毫秒就执行完了。这是一个非常明显的混淆引入性能问题的案例。

分析性能问题

大部分问题,在找到根本原因之后,我们都会觉得非常简单,也很容易解决。而分析问题原因的过程和方法则更加重要,我们下面分享一些通用的分析问题的方法。

(1)确认性能问题

一般来说,确认一个JS执行是否存在性能问题,使用Chrome Trace还是比较方便的。我们下面先说说怎么看Trace信息。

a5b442158e027234740e32b0d99945b15518fac2

上图中,

v8.run 对应内核的V8ScriptRunner::runCompiledScript, 代表blink端的JS的执行时间,即JS执行的实际耗时。

V8.Execute 代表v8内部的JS执行时间,与v8.run代表的意义一样,耗时也相近。

颜色与V8.ParseLazy一样的部分,代表JS编译耗时,从上图可以看到,编译耗时占了绝大部分。

注:上图仅仅为了展示Trace中V8相关的含义,不是我们要讨论的JS耗时问题。

我们再来看看存在性能问题的Trace信息,

d238a889e528fff6fd8fa8a1ae13a20f4aa68711

从上图可以看到,v8.run下面几乎没有蓝色的片段,即几乎没有编译耗时,基本上都是JS代码执行的耗时。

这样我们可以判断,isdsp_securitydata_send.js 执行的耗时达到了惊人的1.6秒,而这个JS的逻辑非常简单,它很有可能是存在严重性能问题的。

注:上图是isdsp_securitydata_send.js在真实环境执行消耗的时间。

(2)分析问题原因

在上面我们已经定位到isdsp_securitydata_send.js的执行耗时存在较大问题,那么可以怎么去定位问题的准确原因呢?

我们先将问题简化,把这个JS抽取出来单独去执行,比如,使用下面示例代码:

<html>
<body>
</body>
</html>

然后抓取该示例代码的Trace信息,

cfb79d8d4248dcae328ae331d82d34823a49332c

从上面Trace可以看到,里面一些JS函数的执行非常耗时,每个耗时都有几百毫秒。

但这个外联的JS是无法定位到代码行的,我们可以将外联JS文件的内容直接拷贝到上述<script>标签里面去执行,看看具体的代码行在哪里?

e0fb785b862616b012bc5250276d5ab4d5bb9eb5

从上图可以发现,耗时的代码在2117行,直接点击可以定位到具体的代码行,

249e6f93155ca653a4a7ee8d6d4c390103b7f305

从上图可以看到,下面函数执行非常耗时,耗时800多毫秒。

function a(r) {
  var n = Mo;
  var a = sn;
  for (var o = S; o < r[L[No + J[Lo](U)](U) + P[Qo + Z[Lo](U)](U)]; o++) {
    var t = ((r[yr[No + J[Lo](U)](U) + mv + xv](o) - _) * cr + X - a) % V + _;
    n += String[Oa[Wo + D[Lo](U)](U) + ad + fr[Qo + Z[Lo](U)](U) + kt](t);
    a = t
  }
  return n
}

上述函数为什么会非常耗时呢?这里就是JS引擎专家发挥的地方了! 我们通过分析JS引擎的执行发现,String[Oa[Wo + D[Lo](U)](U) + ad + fr[Qo + Z[Lo](U)](U) + kt](t) 这一句代码,其实是 s += String.fromCharCode(p) 混淆之后的结果。

这种混淆会带来什么问题呢?V8和JSC引擎的字符串拼接查找性能都非常弱,比如,String["toS" + "tring"](),number to string,都是V8和JSC引擎的超级弱点。

JS字符串拼接的性能为什么会很差呢?
在JavaScript中,字符串是不可变的(immutable),只能被另外一个字符串替换。

var combined = "";
for (var i = 0; i < 1000000; i++) {
    combined = combined + "hello ";
}

上述示例代码中,combined + "hello " 不会直接修改combined变量,而会新建一个临时对象存储计算结果,然后再使用该临时对象替换combined变量。所以上述for循环中会产生海量的临时变量,JS引擎GC需要大量工作来清理这些临时变量,从而会影响性能。
注:上述解析来自Why is + so bad for concatenation?

我们再进一步去验证去掉字符串混淆的代码效果,(注:出于信息安全考虑,不提供去混淆的JS示例)

<html>
<body>
<script type="text/javascript" src="https://xxx.js"></script>
</body>
</html>

我们看看改动之后的JS执行的Trace信息,

f28ba7a3467eacadcb6f555d9644337d399bc9d9

从上图可以看到,isdsp_securitydata_send.js在几毫秒就执行完了。

我们再在真实的业务页面上验证优化后的效果,

0aa24c073fcf6e6ceab56bff8e69f365c2b9a79d

执行耗时直接从1.6秒,优化为15毫秒,优化幅度大于100倍!

解决性能问题

从上面的分析可以看到,JS混淆引入了大量的字符串拼接,从而导致性能大幅下降。

那么,解决问题的方案也就很显然了,那就是去掉这些字符串拼接,即降低混淆的强度,把字符串混淆部分去掉。

去掉字符串混淆部分之后,isdsp_securitydata_send.js的执行耗时变为15毫秒,完美的实现了优化。

结束语

现在前端渲染非常流行,页面大部分逻辑由JS控制。从我们长期进行页面性能优化的经验来看,页面性能优化的20-40%与浏览器内核相关,而60-80%与前端JS相关,即前端JS是性能优化的重中之重。

那么,前端JS优化有那些比较好的实践呢?内核直接参与分析前端JS,成本非常大,并非长久之计,内核更应该做的是赋能前端。

在赋能前端方面,内核可以做那些事情呢?

(1)将一些通用的前端分析方法整理成文档,供前端参考。

(2)将一些人工分析总结的经验,固化到自动化的工具,比如,WDPS Lighthouse。

(3)提供一些更有效的分析工具。比如,在Trace中更清晰的展现JS引擎的运行逻辑。

(4)与前端更多交流合作,建立互信,深入合作研究疑难问题和普遍问题。

参考文档

前端如何给 JavaScript 加密

Why is + so bad for concatenation?

Optimization killers

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【SolidJs】仅次于原生JS的超级性能!SolidJs框架教程【中】
Children 在SolidJs中,如果在组件中写一些children,并非仅仅作为展示,而需要在子组件中处理children时,需要用到children函数。
0 0
【SolidJs】仅次于原生JS的超级性能!SolidJs框架教程【上】(2)
背景 今天被战友种草了一款前端框架,打开链接看文章,在各个指标的比较下,SolidJs脱颖而出,下面简单介绍一下这个框架,然后开始记录一下学习笔记。(Golang的事情暂时放一放,毕竟咱是专业前端「手动狗头」)。
0 0
【SolidJs】仅次于原生JS的超级性能!SolidJs框架教程【上】(1)
背景 今天被战友种草了一款前端框架,打开链接看文章,在各个指标的比较下,SolidJs脱颖而出,下面简单介绍一下这个框架,然后开始记录一下学习笔记。(Golang的事情暂时放一放,毕竟咱是专业前端「手动狗头」)。
0 0
运行在生产系统中的企业级 JavaScript 应用的性能问题分析指南
企业级 JavaScript 应用部署在生产系统并运行后,如果出现性能问题,则找出引起这些性能问题的根源,往往不像找出引起运行时故障或者异常的根源那么简单。
0 0
【Web性能】Javascript 代码性能优化条目31条
【Web性能】Javascript 代码性能优化条目31条
0 0
如何使用 Google CrUX 分析和比较 JS 框架的性能
在美国本土流量前 100 万的站点中(按流量统计),Vue 的性能追平了 React。
0 0
JavaScript的垃圾回收机制,清除无用变量,释放多余内存,展现更好的性能
本篇文章将讲解一下javascript的垃圾回收机制。同时,我们必须先具备作用域链的概念,不懂的小伙伴可以先花3分钟观看一下这篇文章,简单了解一下作用域链的知识——从零开始讲解JavaScript中作用域链的概念及用途
0 0
JavaScript高级程序设计-性能整理(三)
取得 WebGL 上下文后,就可以开始 3D 绘图了。如前所述,因为 WebGL 是 OpenGL ES 2.0 的 Web版,所以本节讨论的概念实际上是 JavaScript 所实现的 OpenGL 概念。可以在调用 getContext()取得 WebGL 上下文时指定一些选项。这些选项通过一个参数对象传入,选项就是参数对象的一个或多个属性。
0 0
JavaScript高级程序设计-性能整理(二)
MutationObserver 接口是出于性能考虑而设计的,其核心是异步回调与记录队列模型。为了在大量变化事件发生时不影响性能,每次变化的信息(由观察者实例决定)会保存在 MutationRecord 实例中,然后添加到记录队列。这个队列对每个 MutationObserver 实例都是唯一的,是所有 DOM变化事件的有序列表。
0 0
JavaScript高级程序设计-性能整理(一)
除了<script>标签,还有其他方式可以加载脚本。因为 JavaScript 可以使用 DOM API,所以通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本。只要创建一个 script 元素并将其添加到DOM 即可。
0 0
+关注
atuanxy
刘翔,阿里巴巴UC内核技术专家。负责UC内核性能优化及阿里集团前端页面优化,专注于Web体验优化和PWA技术研究。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载