H5性能优化与体验优化——极致篇

性能优化

H5的性能优化有一个很重要的指标——首屏加载速度。而我们一般所说的H5性能优化指的也是如何提升首屏加载速度。而我们常用的优化首屏速度的方案，可以大致总结为以下几种：

• 首屏资源懒加载，延迟加载
• 首屏资源gzip和cdn加速
• 减少js包大小
• 图片裁剪或压缩

具体可以参考文章，一般优化后都能有不错的效果 。
随着我们项目用户数越来越多，对性能要求也越来越极致。为此，我想到了一些其他的方案。

一、页面数据本地缓存

用户的网络情况是是否复杂的，经常还会遇到弱网情况。可以将页面的数据缓存到本地，用户下次打开时无需网络请求就可以直接显示了。这可以大大加快用户看到页面内容的速度。

浏览器的本地缓存方案大致有以下几种：

• localStorage：这是前端开发使用最多的一种缓存之一。可以用作持久化缓存。读写是同步，数据大时会阻塞主线程。只能存储string类型，存储容量只有2.5M到10M之间（不同浏览器不同）。
• Web SQL：前端数据库。但它兼容性不好，自测只有chrome浏览器支持，ie或微信内置浏览器都是不支持的。
• IndexedDB：浏览器提供的本地数据库。 特点：
  1. 键值对存储，简单易用。
  2. 读写异步。访问数据库不会阻塞调用线程。
  3. 存储空间大。一般来说不少于 250MB，甚至没有上限。
  4. 支持事务，意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
  5. 支持二进制存储，可以直接存储对象。
  6. 具有同源策略，安全。
  7. 各浏览器兼容性不错，自测微信和QQ自带浏览器都是支持的。

于是我选择IndexedDB作为我们H5的缓存方案。
实现核心代码：

createOrOpenDb({ dbName, storeName, keyPath, indexOptions }) {
  const mIndexedDB = window.indexedDB || window.webkitIndexedDB
    || window.mozIndexedDB;
  const dbOpenRequest = mIndexedDB.open(dbName, this.dbVersion);
  return new Promise((resolve, reject) => {
    dbOpenRequest.onsuccess = (event) => {
      console.log(`${dbName} 打开或创建成功`);
      this.db = event.target.result;
      resolve(this.db);
    };
    dbOpenReques