H5页面性能探究

背景

用户体验是当前首当其冲的研究课题，H5页经常被吐槽：

• 卡顿不流畅
• 加载慢，要好几秒才有响应
• 耗流量
  都知道是性能不好，但是如何不好，有没有指标能够缩小范围，给开发优化提供方向

如何评判H5页性能好与坏？

雅虎的前辈们整理出了业界通用的性能指标：
Yahoo 34条黄金法则
英文版：https://developer.yahoo.com/performance/rules.html
汉化版：http://www.cnblogs.com/li0803/archive/2009/09/20/1570581.html
看完这些法则，突然豁然开朗，原来就是这些指标影响到了H5页面的性能

常见工具

Fiddler、Yslow、Firebug还有各浏览器Development Tool都能够提供H5页面的这种加载数据
问题来了，不熟悉HTML，js，css 怎么办，有没有小白工具提供检测结果呢？
答案是：有

业界良心Google提供了一个叫PageSpeed的插件，就可以满足你装X需求。。
接下来主要介绍PageSpeed这个插件工具。

Ps：另外有个在线的H5页检测工具也可以尝试下：
Http://www.webpagetest.org

PageSpeed原理

PageSpeed的分析主要是基于Yahoo的性能法则
大致分为五类的最佳实践列表：

• 优化缓存——让你应用的数据和逻辑完全避免使用网络
• 减少回应时间——减少一连串请求-响应周期的数量
• 减小请求大小——减少上传大小
• 减小有效负荷大小——减小响应、下载和缓存页面的大小
• 优化浏览器渲染——改善浏览器的页面布局

环境准备

1.png

操作

1.Chrome开发者模式下，网页输入你需要测试的URL
2.打开PageSpeed插件页面，点击“Start Analysis”按钮
3.等待一小会报告就出来了
4.展开每个优化项目，中间都把具体需要优化的url都拎出来了

2.png

移动端H5页

上面所介绍的是PC端浏览器的H5页检测，但如何模拟到移动端的浏览器的真实环境？
又是Google，提供了一个叫做Chrome ADB的插件，可以让手机和PC相连，通过PC端的开发者工具中的PageSpeed来检测移动端的H5页面性能情况

Paste_Image.png

移动端H5页—环境准备

1. PC Chrome浏览器安装chrome ADB应用

---

Paste_Image.png

移动端H5页

1. USB将手机和PC相连
2. 手机上打开chrome浏览器（必须为Chrome）
3. PC chrome中输入url：chrome://inspect/#devices
   如下图，发现Chrome中所打开的网页都显示出来了

Paste_Image.png

4. 如果你想要检测哪个网页，就点击对应URL下面的“inspect”

移动端H5页

此时Chrome会重新打开一个页面，当前PC画面和手机画面是实时同步的，接下来的步骤就是和在pc端操作一样，点击“Start Analysis”大功告成

Paste_Image.png

移动端H5页

Paste_Image.png