构建高效的移动终端 Web应用程序(Building High Performance Mobile Web Applications)
视频及实例地址:
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书和资源下载完毕时间
![](http://images0.cnblogs.com/blog/180064/201302/07094729-b0766c747753459e9f4d2616466bc16f.png)
4. 页面优化前性能分析
初始化所需时间:
![](http://images0.cnblogs.com/blog/180064/201302/07094738-79248fdd15884bb482612eb90f3b7284.png)
使用PageSpeed分析:
![](http://images0.cnblogs.com/blog/180064/201302/07094749-61ed173041934edca3770fa9710dd982.png)
分析结果:
![](http://images0.cnblogs.com/blog/180064/201302/07094758-7e350b07830c4128b739ec86192bff4e.png)
5. 图片优化
5.1 使用按比例缩放图片(即依据浏览器尺寸进行不同大小图片的请求,该处理为RESS 设计的一个要点)
优化前后对比:
![](http://images0.cnblogs.com/blog/180064/201302/07094808-0c078d13540249fd9c06a249090f1f66.png)
5.2 替换PNG格式图片为JPEG格式(注意透明背景图片或图标不可进行替换,否则透明会变为白底)
优化前后对比:
![](http://images0.cnblogs.com/blog/180064/201302/07094816-3b96f0ec92be43f5b6921c97994da7fe.png)
6. 压缩JS
使用PageSpeed 插件分析时,会对未压缩js进行提示:
![](http://images0.cnblogs.com/blog/180064/201302/07094834-859b18cd115d426ebd384ea13550ae3e.png)
查看JS大小并分析是否被压缩
![](http://images0.cnblogs.com/blog/180064/201302/07094843-d1a5d892a87f4d47a521e9b3019aea37.png)
使用压缩后的jQuery库性能对比(注意:此处需要清空缓存后才可看出性能提升)
![](http://images0.cnblogs.com/blog/180064/201302/07094851-bcdde6c83ccb4cc2a5a2b1002cb6397d.png)
提升网站响应速度,可使用如下压缩工具对所有JS进行压缩,
- Closure compiler
- YUI compressor
- Online JavaScript compression
7. CSS 优化
7.1 使用Profiling 查找最耗时CSS:
![](http://images0.cnblogs.com/blog/180064/201302/07094859-0ee3bcc34a8d4b1a8bf677f2ab207d9e.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(伪类)替代 后代选择器
![](http://images0.cnblogs.com/blog/180064/201302/07095046-d7cac17eeabd45ad964be3e9cea41ada.png)
7.3 使用压缩后的CSS(未提及)
8. 延迟加载
8.1 js延迟加载。选择将一些页面加载前不需执行的脚本推迟加载(后面会有文章对js延时加载进行介绍)。
如:将下述脚本延迟加载
![](http://images0.cnblogs.com/blog/180064/201302/07095109-9fbca8796ac14f98a022ca03c8540bbc.png)
加载方法:
![](http://images0.cnblogs.com/blog/180064/201302/07095117-99770d4981b24dc8abeeadcb53324b80.png)
优化后:
![](http://images0.cnblogs.com/blog/180064/201302/07095126-9794acfb626145d1b6ba9fd7a1914f4b.png)
8.2 DOM延时加载
![](http://images0.cnblogs.com/blog/180064/201302/07095134-0ba6335317c947ddaf4a951536632ee3.png)
![](http://images0.cnblogs.com/blog/180064/201302/07095143-36ce8fab554141ccb0d26a0e62a341fb.png)
9. 手机web页面点击事件优化
Android手机Chrome在处理页面点击事件时会有300ms的延时用以判断是否是双击等操作。
![](http://images0.cnblogs.com/blog/180064/201302/07095156-523db6e627204bb2b1b370e823af0ee8.png)
规避该300ms方式:
注销点击对象的onclick事件,并将该onclick事件处理逻辑绑定到触摸touchend事件中。
![](http://images0.cnblogs.com/blog/180064/201302/07095203-534d2b58ef78420aa482679f2f240382.png)