前端优化系列 - 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

目录
相关文章
|
3天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
17 0
|
1天前
|
缓存 编解码 JavaScript
在JavaScript小游戏开发中,优化游戏性能是非常重要的
【6月更文挑战第16天】JavaScript小游戏性能优化涉及动画流畅度和减少重绘:使用requestAnimationFrame替代定时器;减少DOM操作,利用DocumentFragment或虚拟DOM;Canvas/WebGL高效渲染;压缩图像,使用雪碧图;分层渲染与视口裁剪;Web Workers处理后台计算;缓存计算结果;事件委托;定期性能分析。优化是持续过程,需结合具体需求调整。
20 8
|
2天前
|
Web App开发 前端开发 网络协议
性能工具之常见压力工具是否能模拟前端
【6月更文挑战7天】性能工具之常见压力工具是否能模拟前端
7 0
|
3天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
3天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
59 1
前端JS发起的请求能暂停吗?
|
6天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
23 2
|
11天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0
|
14天前
|
前端开发 JavaScript API
Vue.js:渐进式JavaScript框架-前端开发
Vue.js:渐进式JavaScript框架-前端开发
21 3
|
20天前
|
缓存 前端开发 JavaScript
基于JavaScript的前端性能优化技术探讨
基于JavaScript的前端性能优化技术探讨
29 1
|
23天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
24 1