H5的性能优化总结

1.0 针对情况限制HTTP请求次数

终端用户响应的时间中，有80%用于下载各项内容，这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数，这是提高网页速度的关键步骤。

1.1 压缩JS和CSS文件

合并业所JS、CSS文件，一方面JS文件数量减少，需要的HTTP请求数也就减少;另乙方面，压缩JS、CSS文件可以可以极大减少文件体积。通常会使用webpack去构建对JS、CSS进行压缩合并。

压缩合并JS、CSS并不是把所有的JS文件都打包到一个JS文件中。按照“基础代码” + “页面代码”分别打包。基础代码是指各个页面或者路由都能用到的代码；页面代码是只在某个具体页面和路由中才会使用到的代码。这样可以实现JS代码按需加载，避免页面一起加载，大大减少文件一起加载带来的阻塞和消耗性能。(类似于IOS中懒加载的概念)

2.0 图片优化

2.1 图片优化方案

• 使用WebP格式的图片。 WebP是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。

• 使用字体图标IconFont。 可以任意设置Icon图形的大小和颜色（只能是单色，因为本质上是给字体设置颜色）。

• 使用CSS Sprites将多张图片合并成一张，从而减少HTTP请求数量。

• 使用Base64直接把图片编码成字符串写入CSS文件，也是从减少HTTP请求数量考虑。但需要注意，Base64编码的图片最好是小图片（最好几十字节级别的），因为图片经过Base64编码后，一般会比原文件更大些。而且太长的Base64编码字符串也会影响CSS的整体可读性。

• 对于需要大量图片的网站，应该把图片资源单独部署，并使用不同的域名来访问。因为图片资源占带宽很大，如果把图片和其他资源部署到一台服务器或一个集群中，服务器端的出口带宽会受到很大影响。使用不同的域名加载图片资源，可以更好的利用浏览器并行下载的特性，因为浏览器对于一个域名下的最大并行请求数是有限制的。

2.2 图片压缩工具

• 压缩工具有: https://tinypng.com/ , http://zhitu.tencent.com/ , https://isparta.github.io/;

2.3 webP适配

webP作为google推广的一种图片格式，其兼容性还是受到很大的限制。
若使用场景是浏览器，JavaScript 能力检测，对支持 WebP 的用户输出 WebP 图片。

• 使用WebP支持插件：WebPJS https://webpjs.appspot.com/

• Android 4.0 以下 WebP 解析库https://github.com/alexey-pelykh/webp-android-backport

• iOS WebP解析库 https://github.com/carsonmcdonald/WebP-iOS-example

3.0 使用DNS

将网站的静态资源分离，如静态HTML、图片Image、样式CSS、脚本JS等，把静态资源部署到CDN中，可以明显加快这部分资源的加载速度。

4.0 HTTP缓存

HTTP缓存会把浏览器加载过的资源缓存到本地，大多还是针对静态资源的缓存，下次加载时，只要缓存的资源没有过期，就可以直接使用本地的资源，减少了HTTP请求次数，加快了资源加载速度。具体做法是设置HTTP Header 中的Cache-Control参数。http://www.cnblogs.com/chenqf/p/6386163.html。

5.0 服务器端开启gzip

服务端开启gzip压缩，可以减少资源文件在网络传输过程中的体积大小。