本篇文章将介绍怎样来使用WAPA进行分析。WAPA提供了两种使用方式,一种是图形化的web使用方式,另一种通过控制台来进行分析。
WAPA工具下载地址:https://github.com/webperf/WAPA
介绍和安装地址:HTML5应用性能调优工具WAPA – 安装篇
首先我们介绍web版本的使用方式。
WAPA使用篇-Web版本.
1. 运行sever文件夹下的app.js文件,启动服务器。
2. 浏览器中输入localhost:8888,进入欢迎界面。
3. 将要分析的HTML5项目(必须是.jar文件,例如web文件夹的test.jar)拖拽至欢迎界面的虚线框处。然后WAPA将会对该项目自动进行分析。
4. 等待分析完毕,进入结果显示界面。从左到右的三列分别是被分析项目中的文件列表,相应文件中的代码,以及相应文件的分析结果
5.默认的是显示的ie10平台下的分析结果,可以通过点击导航栏的平台选项来显示对应平台的分析结果。
6.点击最左侧Filelist中的文件名,会在中间code区域显示对应的代码,在message中显示分析结果。
7.点击最右侧Message列表中的任意一条message,会自动在code区域代码中找到相应的代码行,并且会弹出更详细的分析结果(包括example和speedup)。 当更换点击的message时,前一条的详细分析结果隐藏,该条的详细分析结果显示。
8.导航栏Reports下拉列表中记录的是之前分析过的文件的分析结果。点击任意一个,显示对应的分析结果。
上面介绍了如何使用web版本来进行分析,接下来我们将介绍如何使用WAPA命令行来进行分析。
WAPA使用-命令行版本:
1. 首先打开控制台,进入WAPA文件夹下的../wapa/src目录下。
例如:cd C:\Users\***\Desktop\wapa_source\wapa\src
2. 运行wapa/src 文件夹下的 Main.js. 格式为:node main.js 项目所在的文件夹名。
例如:node main.js C:\Users\***\Desktop\wapa_source\quick_sort_Integrate_v2.1.此命令将分析quick_sort_Integrate_v2.1 这个快速排序项目。分析过程如下图所示:
3. 分析结束之后,分析结果以xml文件的形式,被存放在被分析的项目所在文件夹的中,并被统一命名为WapaAnalyzeResult。
4. 打开分析结果文件WapaAnalyzeResult,将显示下列的内容,包括分析的文件,低效代码出现的行和列,提示的高效写法以及高效写法相比低效写法的加速比。