首页 > 其他分享 >HTML5应用性能调优工具WAPA – 使用篇

HTML5应用性能调优工具WAPA – 使用篇

时间:2023-05-21 13:05:25浏览次数:52  
标签:分析 文件 wapa 结果 WAPA 文件夹 HTML5 调优

utm_campaign=CSDN&utm_source=intel.csdn.net&utm_medium=Link&utm_content=others-WAPA

HTML5应用性能调优工具WAPA – 使用篇



Dawei Cheng 程大伟... 于 星期四, 27/02/2014 - 18:42 提交



本篇文章将介绍怎样来使用WAPA进行分析。WAPA提供了两种使用方式,一种是图形化的web使用方式,另一种通过控制台来进行分析。

WAPA工具下载地址:https://github.com/webperf/WAPA



介绍和安装地址:HTML5应用性能调优工具WAPA – 安装篇



首先我们介绍web版本的使用方式。

WAPA使用篇-Web版本.

1.       运行sever文件夹下的app.js文件,启动服务器。

2.       浏览器中输入localhost:8888,进入欢迎界面。

HTML5应用性能调优工具WAPA – 使用篇_命令行

3.       将要分析的HTML5项目(必须是.jar文件,例如web文件夹的test.jar)拖拽至欢迎界面的虚线框处。然后WAPA将会对该项目自动进行分析。

4.       等待分析完毕,进入结果显示界面。从左到右的三列分别是被分析项目中的文件列表,相应文件中的代码,以及相应文件的分析结果

HTML5应用性能调优工具WAPA – 使用篇_命令行_02

5.默认的是显示的ie10平台下的分析结果,可以通过点击导航栏的平台选项来显示对应平台的分析结果。

HTML5应用性能调优工具WAPA – 使用篇_性能调优_03

6.点击最左侧Filelist中的文件名,会在中间code区域显示对应的代码,在message中显示分析结果。

7.点击最右侧Message列表中的任意一条message,会自动在code区域代码中找到相应的代码行,并且会弹出更详细的分析结果(包括example和speedup)。 当更换点击的message时,前一条的详细分析结果隐藏,该条的详细分析结果显示。

HTML5应用性能调优工具WAPA – 使用篇_html5_04

8.导航栏Reports下拉列表中记录的是之前分析过的文件的分析结果。点击任意一个,显示对应的分析结果。

HTML5应用性能调优工具WAPA – 使用篇_命令行_05

 

上面介绍了如何使用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 这个快速排序项目。分析过程如下图所示:

HTML5应用性能调优工具WAPA – 使用篇_HTML5_06

3.       分析结束之后,分析结果以xml文件的形式,被存放在被分析的项目所在文件夹的中,并被统一命名为WapaAnalyzeResult。

HTML5应用性能调优工具WAPA – 使用篇_性能调优_07

4.       打开分析结果文件WapaAnalyzeResult,将显示下列的内容,包括分析的文件,低效代码出现的行和列,提示的高效写法以及高效写法相比低效写法的加速比。

HTML5应用性能调优工具WAPA – 使用篇_HTML5_08

标签:分析,文件,wapa,结果,WAPA,文件夹,HTML5,调优
From: https://blog.51cto.com/u_2700990/6318870

相关文章

  • HTML5 Canvas和EaselJS入门(译)
    HTML5中最受开发者期待的一项新特性莫过于Canvas(画布)元素了。Canvas元素提供了一个可以动态渲染图形和位图的位图画布。它非常类似于Flash中的Bitmap和BitmapData两个类。 但是,要使用Canvas还是有点难度的,特别是如果你还想管理,重绘或者运动图形或图片。与Flash播放器不同的是Canva......
  • 使用 HTML5 canvas 进行 Web 绘图
    新的HTML5规范旨在帮助开发人员更轻松的编写出各类Web应用,以顺应当前SaaS,云计算以及RIA等技术的最新趋势。在HTML5得以广泛推广之前,开发人员通常使用SVG,VML等技术进行Web绘图操作,但这些基于XML的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求,比如......
  • 使用 HTML5 canvas 绘制精美的图形
    HTML5是一个新兴标准,它正在以越来越快的速度替代久经考验的HTML4。HTML5是一个W3C“工作草案”—意味着它仍然处于开发阶段—它包含丰富的元素和属性,它们都支持现行的HTML4.01版本规范。它还引入了几个新元素和属性,它们适用许多使用web页面的领域—音频、视频、图......
  • mysql 调优-Sys schema 分析
    索引情况--查询冗余索引(比如对于name字段创建了一个单列索引,有创建了一个name和code的联合索引)select*fromsys.schema_redundant_indexes;--查询未使用过的索引select*fromsys.schema_unused_indexes;--查询索引的使用情况selectindex_name,rows_selected......
  • mysql 调优-EXPLAIN 命令
    一条sql的执行,会生成一个执行计划,这个执行计划是优化器认为最优的,然后执行器再执行这个执行计划执行计划只是优化器自认为最优,不见得就是最优的执行计划里面包括:可用的索引,真正用到的索引,表的读取顺序,每张表有多少行被优化等等EXPLAIN和DESCRIBE效果一样EXPLAIN每个......
  • mysql 调优-sql 优化
    连接查询原理涉及到indexnested-loopjoin,blocknested-loopjoin,joinbuffersize,hashjoin(mysql8)等,感觉没必要记那么多需要知道会一次性把驱动表的数据加载到内存中(如果joinbuffersize放得下),然后循环每个驱动表去对比被驱动表的数据就好了保证被驱动表的JOIN字......
  • mysql 调优-索引失效
    范围条件放最后面,不管单列还是多列索引,把能过滤最多的索引放前面用不用索引最终都是优化器决定的,EXPLAINjson格式里的执行成本决定最左匹配,如果是联合索引,查找索引树的时候,只能根据第一个索引才能找到第二个第三个,如果顺序没对就不会走索引--联合索引(name,code,ad......
  • mysql 调优-利用索引覆盖和下推
    回表只查询一次索引得不到想要的数据,典型的场景就是非聚簇索引查询:先拿到主键ID,再根据id查询一次得到数据(再次查询这就是回表)索引覆盖:根据普通索引查询不回表就能得到数据--联合索引(age,addr)selectage,addrfromt_userwhereage>10;--单列索引(不一定非要联合索引......
  • HTML5网页游戏开发
    HTML概述互联网上的应用程序被称为Web应用程序,web应用程序使用Web文档(网页)来表示用户界面,Web文档都遵循html格式,html5是最新的html标准HTML基础HTML是HyperTextMarkupLanguage(即超文本),它是通过嵌入代码或标记代码来表名文本格式的国际标准。它编写的文件扩展名是.htm......
  • 使用 jQuery Mobile 与 HTML5 开发 Web App (十八) —— HTML5 Web Workers
    本文要介绍的是HTML5的WebWorkers特性,它解决了JavaScript开发中一个重大的问题——在后台运行JavaScript。与本系列前两篇文章介绍的特性相似,WebWordkers似乎也是为了WebApps而设计的,可以想象,WebApps乃至原生Apps受移动设备性能的限制比在桌面环境中要大很多,尽......