移动H5前端性能优化
2016-05-20 本文已影响141人
bonon
主要围绕这篇博客，解析不清楚的地方
一、服务器缓存
使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）
如静态内容或者更新不频繁的的动态内容，如果缓存下来，下次Web服务器便可以在下次收到请求后立即拿出缓存好的响应结果内容返回给浏览器
1. Expires文件头：
ExpiresDefault "access plus 10 years"
如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。内容的文件名中加上版本号，如 test_1.0.9.js。
2.ETags
- Entity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（"实体"就是所说的"内容"，包括图片、脚本、样式表等）
- 原始服务器通过含有ETag文件头的响应指定页面内容的ETag
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
- 如果浏览器要验证一个文件，它会使用If-None-Match文件头来把ETag传回给原始服务器
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f"
- 如果ETag匹配，就会返回一个304状态码，这就节省了12195字节的响应
HTTP/1.1 304 Not Modified
如果没有使用ETag提供的灵活的验证模式，那么干脆把所有的ETag都去掉会更好
二、Gzip
- 压缩所有可能的文件类型可以减少文件体积
- web客户端都默认支持HTTP请求中有Accept-Encoding文件头的压缩格式：
Accept-Encoding: gzip, deflate - Web服务器把压缩方式通过响应文件头中的Content-Encoding来返回给浏览器
Content-Encoding: gzip Gzip
三、尽早刷新输出缓冲
- 把已经编译的好的部分HTML响应文件先发送给浏览器，这时浏览器就会可以下载文件中的内容（脚本等）而后台同时处理剩余的HTML页面
四、LazyLoad
- Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
五、Media Query
- 直译——“媒体查询”
- 有例子：
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
六、Srcset
- 根据屏幕密度现实对应尺寸图片
七、避免使用DataURL
- 图片数据以base64字符串格式嵌入到了页面中
<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGXElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgdLbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wnk2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbFZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">
八、使用classList代替className
- 在HTML5 API里，页面DOM里的每个节点上都有一个classList
对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类
九、TOUCH事件优化
- 使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引发误操作
十、动画优化
- 尽量使用CSS3动画
- 合理使用requestAnimationFrame动画代替setTimeout
- 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）
十一、疑问
- 高频事件优化
- GPU加速
Reference
浅谈Web缓存
Web程序优化的最佳实践（服务器篇）
Lazy Load
Media Query
Srcset
dataUrl
classList
requestAnimationFrame
