压缩组件
用户使用 H5 功能过程中，绝大多数时间都花在网络请求上，所以减少使用紧张的网络资源在提高性能上能取得良好的收益。组件压缩就是一种减少网络传输消耗的办法。
从 HTTP 请求返回资源中的 HTML，JS，CSS，XML 等都可以设置压缩。对于已经压缩过的资源（如图片音乐等）不需要再次压缩，收益不高，而且增加 CPU 负担。
JS，CSS 可以常通过去掉空格和回车来压缩，再经过 GZIP 压缩，能达到良好的压缩效果。
压缩方法：在 HTTP 请求中设置所接受到压缩方式，在 Server 端对 Response 资源进行压缩再传给浏览器。一般使用 GZIP 设置 content-Encoding 字段。
设计技巧
CSS 放在顶部、JavaScript 写在底部或异步：DOM 树构建完成后，CSS 要放到 HTML 代码的开头的 head 标签结束前。如果网页是动态生成的，那么在 head 代码完成后可以页面输出，这样浏览器就会更快地解析出来 head 中的内容，开始下载 CSS 文件资源。而 CSS 放在底部则会引起重新绘制，用户会感受到“闪屏”的不好体验。
CSS 使用技巧
- 正确使用 Display 属性，因为 Display 属性会影响页面的渲染
- 值为 0 时不需要单位
- 避免图片和 iFrame 等空 Src
- 尽量避免重设图片大小
- 移除空的 CSS 规则
- 不滥用 Web 字体、Float
- 不声明过多的 Font-Size
- 标准化各种浏览器的前缀
JS 在下载的时候会引起两个问题：阻止网页内容的展示并组织其他资源下载。下载 JS 时候，并行下载机制失效。并且在 JS 中可能包括 Document.write 等改变页面布局的操作，所以渲染引擎会等待 JS 下载完成再开始渲染。用户侧页面加载时间会因为等待而变得更长。
关于缓存
添加缓存的最终目的是为了减少 HTTP 请求，最终达到提升性能的效果，所有静态资源都要在服务器端设置缓存，并且尽量使用长 Cache 缓存一切可缓存的资源。
