基于WebAssembly的JavaScript性能优化方案研究与实现之计算机分析

论文价格:免费 论文用途:其他 编辑:硕博论文网 点击次数:
论文字数:35899 论文编号:sb2019123016034729094 日期:2020-01-25 来源:硕博论文网

第一章 引言

1.1 研究背景和意义
JavaScript 设计之初被作为实现 HTML DOM 交互的小型脚本语言,其典型应用之一就是验证用户表单输入等。但是随着互联网的发展,
Web 应用程序的功能日趋丰富,并且应用平台也逐渐多元化。由于 JavaScript 在 Web 应用开发上的绝对垄断地位,它不得不为基于计算密集型操作的应用程序提供服务,例如图像处理,虚拟现实和游戏引擎等。虽然这些年间 JavaScript 也在不断发展,但是仍然很难应对繁杂庞大的计算量,特别是在计算资源有限的平台上。
JavaScript 目前已经成为最流行的设计语言之一,它不仅被广泛应用于客户端Web 应用程序,而且还用于移动端应用程序和桌面应用程序。目前功能齐全的JavaScript 框架即使在传统页面上也能十分方便地实现炫目的功能,但是在计算资源有限的移动端执行这些功能需要比桌面更多的运行时间。图 1 展示了 2018 年可用硬件解析运行 JavaScript 应用程序所需的时间。由图中的描述可以看出在高配置的设备中 JavaScript 脚本具有更高效的执行性能。但是随着设备配置的下降 JavaScript 的运行时间逐步增长,特别是以 Alcatel 1X 为代表的 100 美元以下的低配置移动设备。经过统计,骁龙 617 作为一种最典型配置,其脚本运行时间是苹果 A11 的 6.36 倍,而最慢的安卓 Go 则达到了 21.4 倍。在 Web 应用程序功能日趋复杂的今天,这样巨大的性能差异会严重影响用户的使用体验。所以提高 JavaScript 的执行性能以适应不同配置的平台就显得十分重要。
.........................

1.2 国内外研究现状
1.2.1 JavaScript 代码优化
在 Web 程序应用日趋广泛的今天,JavaScript 也扮演越来越重要的角色。从之前实现简单交互的验证到如今实现三维图形渲染,游戏引擎等更为复杂的处理工作。虽然在这个过程中人们尝试利用插件等方式在 Web 端引入更高效的开发语言,但是至今 JavaScript 仍然保持着非凡的垄断地位,而基于 JavaScript 实现的应用程序功能也更加复杂。例如,Ammo.js[2]是一个功能强大的 Web 端物理引擎。它拥有连续碰撞检测,自定义图形和多方式场景调节等功能。它是以 Bullet 物理引擎库通过 Emscripten[3,4]移植到 Web  端实现的,这使得 Ammo.js 可以作为 Web 端最完整的物理引擎之一。Three.js[5]是以 webgl 为基础的渲染库,封装了 3D 渲染中重要的方法。通过 Three.js可以在 Web  端创建和展示炫彩的三维计算机图形。DSP.js[6]是基于 JavaScript 的综合数字信号处理库。它包括振荡器,FFT 和 DFT 变换等大量的的数字信号分析和生成功能。A-Frame[7]是一个在 Web 端实现虚拟现实应用的框架,利用 HTML 和实体组件创建多平台的 VR 应用程序。
由于 JavaScript 承担功能的日趋复杂,也越来越多的人将研究目标转向 JavaScript性能的提升。Hackett[8]等人提出快速准确的类型推导算法来解决性能上动态类型的约束。该算法通过增加运行时类型限定的静态分析方法。生成能够紧密反应程序实际行为的信息,进而保证类型推断的准确性。通过这种方式提升 JavaScript 程序运行的效率。Grimmer[9]等人提出了高性能的跨语言优化方案。这是一种运行时允许多种语言无缝切换的优化方案。它允许程序员使用 JavaScript 代码的表示方法合法的访问外部函数或者对象,从而将所需要的样板代码减少到最少,并且可以在不同的语言中使用最符合要求的数据结构,进而达到高效的运行效率。
..........................

第二章 JavaScript 优化方法及 WebAssembly 优化可行性分析

2.1 JavaScript 性能优化现阶段 Web 平台的功能日益广泛,并且越来越受到各种应用程序的欢迎。而JavaScript 是目前 Web 上唯一支持的高级语言,其应用场景也日趋多元化。尽管JavaScript 引擎有了巨大并且持续的改进,但是 JavaScript 的性能对于密码学,图形处理或者物理引擎等计算密集型的应用来说仍然不足[33]。造成性能缺陷的并不是因为运行引擎设计不充分,而是因为 JavaScript 语言本身的缺陷[34]。JavaScript 作为一种动态类型语言,只有在运行状态时才会做类型检查,这就意味着编译器不能轻易的将操作转换成针对某种特定类型的操作指令。如果没有确切的类型信息,编译器必须发出较慢的通用机器代码来处理各种数据类型的组合,而这就带来了不可避免的性能损失。并且 JavaScript 解释执行的过程需要将纯文本代码解析生成相应的抽象语法树,然后通过遍历抽象语法树才能获取相应的机器码,进而得到编译完成的 Web 程序,这个过程也产生了性能开销。针对 JavaScript 的性能缺陷,目前也提出多种解决方案,本节主要分析目前常用的优化方案及其局限性。
2.1.1 即时编译技术
JavaScript 作为一种解释性语言,执行过程中需要对代码进行逐行的解释执行,但是每执行一次就需要解释执行一遍,从而导致运行效率低下[35]。为了提高 JavaScript的执行效率,大部分的 JavaScript 引擎都采用了即时编译技术,直接将部分 JavaScript代码编译成本地的字节码[36]。编译为字节码的优势在于执行时不需要进行重复的编译,并且可以在编译的过程中对代码进行优化,提高代码的执行效率。JavaScript 动态类型的开销主要来自运行时类型解析和运行时属性查找。目前开发者已经研究出多种技术对动态类型推导过程进行优化,这些技术主要包括类型推断[37],类型特化和内联缓存[38]。类型推断基于程序分析或从语言汇总的类型系统来识别变量类型。
.......................

2.2 优化方案可行性分析
WebAssembly 标准是一种高效的二进制编码格式,能够以接近本地代码的执行效率在 Web 端运行。由于 WebAssembly 是由微软,火狐,谷歌和苹果一起推出的,所有主流浏览器的最新版本都支持 WebAssembly。此外,现有语言的各种编译器,如 C,C  ++和 Rust,以及专为 WebAssembly 设计的新语言,都支持它作为编译目标。该生态系统为程序员提供了针对不同应用选择最合适特征编程语言的自由,例如,一种有利于性能而不是易于使用的计算密集型应用程序。目前许多开发者都积极的在各种应用场景下使用 WebAssembly。
例如,Egret Engine [47]是白鹭科技开发的知名游戏引擎,通过引入 WebAssembly技术,可以将 HTML5 代码编译成机器码运行,进一步使得游戏引擎的运行效率提升300%。Unity3D[48]是一款为玩家提供三维视频游戏,实时三维动画等互动内容的游戏开发工具,并且支持包括 Windows,Mac 和 Android 等多个平台。从 2018 年开始Unity3D 正式开始支持 WebAssembly,并且依靠 WebAssembly 的强大性能为玩家提供稳定的服务。WebAssembly 在各浏览器环境下广泛应用,而许多黑客也青睐于这种性能接近本地层代码的语言,越来越多的恶意挖矿脚本被编译成 WebAssembly 形式,增加脚本的运行效率并且使得用户不易发现。这也说明了 WebAssembly 在运算性能上具有很大的优势。Magnum[49]是一款轻量级和模块化的游戏、数据可视化 OpenGL 图形处理引擎,为了保证运行的效率,在网页环境下必须将代码转换为 WebAssembly的二进制形式。
综上所述,WebAssembly 技术已经可以在现有的应用场景中发挥稳定的作用。对于现有的 JavaScript 优化方案,由于无法从根本上解决 JavaScript 设计上的问题,导致无法提供很稳定的优化效果。除此之外,由于 Web 应用程序的应用的广泛性和运行平台的多样性,导致只有浏览器厂家共同制定统一标准才能有效改善 JavaScript 运行性能的问题。而 WebAssembly 正是由浏览器厂家一同制定的标准。虽然WebAssembly 的主要目的是作为其他低级别语言的编译目标,进而将与性能相关的功能代码高效的移植到 Web 端。
.............................
第三章 基于 WebAssembly 的 JavaScript 性能优化方法..........................15
3.1 JSOPW 优化方法概述 .........................................15
3.2 JavaScript 代码转换方法 ............................................16
第四章 JSOPW 原型系统的设计与实现 ................................31
4.1 系统模块设计 ..........................................31
4.2 动态分析模块 .......................................31
第五章 系统实验评估与分析 ................................43
5.1 实验设计 ........................................43
5.1.1  实验环境和实验步骤..................................43
5.1.2  测试用例和对比工具介绍..............................................43

第五章 系统实验评估与分析

5.1 实验设计
本章描述实验环境和具体实验步骤,并且对测试用例及对比工具进行说明。
5.1.1  实验环境和实验步骤
本文的实验环境如下:
安卓平台:vivo Xplay6;系统 Android 6.0;处理器: 高通骁龙 820;内存 6GB。
IOS 平台:IPhone 8;系统:IOS11;处理器:苹果 A11;内存:3GB。
操作系统: macOS Mojava(版本 10.14.3);处理器:Intel Core i7 3.3GHz;内存:16 GB; 实验过程所用到的浏览器:Chrome(64 位,版本 72.0.3626.119)、Safari(版本 12.0.3)和 Firefox Developer Edition(64 位 版本 66.0b8)。
具体的实验步骤设计如下:
(1)测试用例保护:选择 5 种实际场景的 JavaScript 应用程序,利用本文设计的 JSOPW 优化方法和 Prepack 优化工具对 5 种测试用例分别进行优化。
(2)时间性能评估:在对 5 种测试用例进行优化后,首先通过比较 JSOPW 优化方法和 Prepack 优化工具优化后测试用例运行时间来说明优化方法的有效性。除此之外,通过对比代码段合并算法前后数据交互时间和程序整体的执行时间说明代码段合并算法的有效性。最后针对不同平台和不同浏览器下测试用例的性能对比说明不同平台优化方法的有效性和可行性[60,61]。
(3)文件体积评估:通过比较测试用例优化前后体积的变化说明 JSOPW 方法的可应用性。
.........................

总结与展望

总结

参考文献(略)

如果您有论文相关需求,可以通过下面的方式联系我们
点击联系客服
QQ 1429724474 电话 18964107217