视频及实例地址:
http://youtu.be/jD_-r6y558o
http://youtu.be/jD_-r6y558o
目录:
1. 概述
2. 配置调试环境
3. 受关注的页面加载性能指标
4. 页面优化前性能分析
5. 图片优化
6. 压缩JS
7. CSS优化
8. 延迟加载
9. 手机web页面点击事件优化
1. 概述:
Ryan Fioravanti 在 2012年7月Google IO 上做了“Building High Performance Mobile Web Applications” 的讲演,该讲座主要以网站http://www.html5rocks.com/en/ 为案例,应用Chrome PC Mobile联调功能对其现有性能进行分析,然后逐步对其优化,对比网页优化前后在性能上的提升。本文主要对其视频进行些翻译并转述,内容较浅,只适合初、中级开发了解。
2. 配置调试环境(只支持android4及以上版本,中国访问Google会有一定限制可能影响其正确调试):
- PC上安装Chrome Canary并安装插件PageSpeed插件(方便调试和分析)
- 上安装java SDK并添加其bin路径到系统Path下
- PC上安装Android SDK, 安装后打开SDK Manager.exe,勾选tools项更新
- 在手机设置->开发人员工具中启用USB网页调试功能
- 使用USB连接手机,然后在PC命令行下进入android sdk\platform-tools下,输入命令adb forward tcp:9222 localabstract:chrome_devtools_remote.
- 确认设置成功后,使用PC上的 Chrome访问 http://localhost:9222 就可以开始对手机上chrome所访问的网站进行Debug了
3. 受关注的页面加载性能指标:
- navigationStart
- 页面加载完所需时间
- responseStart
- 浏览器即将开始接受页面内容的时间
- domContentLoadedEventStart
- 页面交互即将开始的时间
- loadEventStart
- 即DOM书和资源下载完毕时间
![](https://i-blog.csdnimg.cn/blog_migrate/4bea7680d99c62fb177dc9d69dad044c.png)
4. 页面优化前性能分析
初始化所需时间:
![](https://i-blog.csdnimg.cn/blog_migrate/5d9f5898fb21d40552e3ec5684856e94.png)
使用PageSpeed分析:
![](https://i-blog.csdnimg.cn/blog_migrate/bc906b5256e6544010a87b337d33d8d2.png)
分析结果:
![](https://i-blog.csdnimg.cn/blog_migrate/064eb1ea770b0d59e0eb8eb7e7f02a9a.png)
5. 图片优化
5.1 使用按比例缩放图片(即依据浏览器尺寸进行不同大小图片的请求,该处理为RESS 设计的一个要点)
优化前后对比:
![](https://i-blog.csdnimg.cn/blog_migrate/afa586b6cc1498c633c0977d547b01da.png)
5.2 替换PNG格式图片为JPEG格式(注意透明背景图片或图标不可进行替换,否则透明会变为白底)
优化前后对比:
![](https://i-blog.csdnimg.cn/blog_migrate/4244c153a39b1da72e79a2ad490e408d.png)
6. 压缩JS
使用PageSpeed 插件分析时,会对未压缩js进行提示:
![](https://i-blog.csdnimg.cn/blog_migrate/3de8672dbecd13535e054438cfa8e49c.png)
查看JS大小并分析是否被压缩
![](https://i-blog.csdnimg.cn/blog_migrate/4b693fbaef907ce1a811adb6a8b30d1c.png)
使用压缩后的jQuery库性能对比(注意:此处需要清空缓存后才可看出性能提升)
![](https://i-blog.csdnimg.cn/blog_migrate/3b2717dc7e941536ef539ab5431e6b90.png)
提升网站响应速度,可使用如下压缩工具对所有JS进行压缩,
- Closure compiler
- YUI compressor
- Online JavaScript compression
7. CSS 优化
7.1 使用Profiling 查找最耗时CSS:
![](https://i-blog.csdnimg.cn/blog_migrate/834efddfb52b487a5693580354eee9f2.png)
手机Web常见CSS问题:
- 效率低下的CSS
- 使用常用关键字后代选择器作为 选择器 (Descendant selectors with common keys)。该种行为在定位该选择器时耗时且嵌套多为冗余.
body *{...} ul li a{....} #footer h3 {...}
- 复杂选择器
ul mtop.blue_na{}
7.2 CSS 优化建议
- 避免通用标签作为 选择器
- 最好可以通过继承获取样式
- 让 选择器 规则尽可能具体
- 最好使用标签class(伪类名)和ID做为选择器
- 使用class(伪类)替代 后代选择器
![](https://i-blog.csdnimg.cn/blog_migrate/8a1f7d888c1d68a558f49b15c2048a38.png)
7.3 使用压缩后的CSS(未提及)
8. 延迟加载
8.1 js延迟加载。选择将一些页面加载前不需执行的脚本推迟加载(后面会有文章对js延时加载进行介绍)。
如:将下述脚本延迟加载
![](https://i-blog.csdnimg.cn/blog_migrate/861bd90b5435212d49acbaaff849b782.png)
加载方法:
![](https://i-blog.csdnimg.cn/blog_migrate/066d8d1babfbfbc7b5060b712aa553b8.png)
优化后:
![](https://i-blog.csdnimg.cn/blog_migrate/50a0c12a12b9465272fe8b4f3c0375b5.png)
8.2 DOM延时加载
![](https://i-blog.csdnimg.cn/blog_migrate/6e7b7c9ddac2f45ad9f384c694294b02.png)
![](https://i-blog.csdnimg.cn/blog_migrate/99f347690f82305f7198c563d213ed5e.png)
9. 手机web页面点击事件优化
Android手机Chrome在处理页面点击事件时会有300ms的延时用以判断是否是双击等操作。
![](https://i-blog.csdnimg.cn/blog_migrate/e030daaf926c981b8261e8440f301ec6.png)
规避该300ms方式:
注销点击对象的onclick事件,并将该onclick事件处理逻辑绑定到触摸touchend事件中。
![](https://i-blog.csdnimg.cn/blog_migrate/b0ea7764c64e85b870068791b07ae16f.png)