• 编程狂人| IndexedDB 代码封装、性能摸索以及多标签支持

    导读：IndexedDB 是一个 NOSQL 数据库，可以异步操作，支持事务，可存储 JSON 数据并且用索引迭代，兼容性好，适用于做大量的数据存储，本文主要探讨直接使用 IndexedDB 来存储数据时的一些情况以及遇到的问题。

    前言

    当一个 Javascript 程序需要在浏览器端存储数据时，你有以下几个选择：

    • Cookie：通常用于 HTTP 请求，并且有 64 kb 的大小限制。
    • LocalStorage：存储 key-value 格式的键值对，通常有 5MB 的限制。
    • WebSQL：并不是 HTML5 标准，已被废弃。
    • FileSystem & FileWriter API：兼容性极差，目前只有 Chrome 浏览器支持。
    • IndexedDB：是一个 NOSQL 数据库，可以异步操作，支持事务，可存储 JSON 数据并且用索引迭代，兼容性好。

    很明显，只有 IndexedDB 适用于做大量的数据存储。但是直接使用 IndexedDB 也会碰到几个问题：

    • IndexedDB API 基于事务，偏向底层，操作繁琐，需要简化封装。
    • IndexedDB 性能瓶颈主要在哪儿？
    • IndexedDB 在 浏览器多 tab 页的情况下可能会对同一条数据记录进行多次操作。

    本篇文章将结合笔者的实践经验，就以上问题来进行相关探索。

    Log 日志存储场景

    有这样一个场景，客户端产生大量的日志并存放若干日志。在发生某些错误时（或者长连接得到服务器的指令时）可拉取本地全部日志内容并发请求上报。

    如图所示：

    这是一个很好的设计到了 IndexedDB CRUD 场景的操作，在这里，我们只关注 IndexedDB 存储这部分。有关于 IndexedDB 的基础概念，如仓库 IDBObjectStore、索引 IDBIndex、游标 IDBCursor、事务 IDBTransaction，

    创建数据库

    我们知道 IndexedDB 是事务驱动的，打开一个数据库 db_test，创建 store log，并以 time 为索引。

    1. class Database {
    2.   constructor(options = {}) {
    3.     if (typeof indexedDB === 'undefined') {
    4.       throw new Error('indexedDB is unsupported!')
    5.       return
    6.     }
    7.     this.name = options.name
    8.     this.db = null
    9.     this.version = options.version || 1
    10.   }
    11.  
    12.  
    13.   createDB () {
    14.     return new Promise((resolve, reject) => {
    15.       // 为了本地调试，数据库先删除后建立
    16.       indexedDB.deleteDatabase(this.name);
    17.       const request = indexedDB.open(this.name);
    18.       // 当数据库升级时，触发 onupgradeneeded 事件。
    19.       // 升级是指该数据库首次被创建，或调用 open() 方法时指定的数据库的版本号高于本地已有的版本。
    20.       request.onupgradeneeded = () => {
    21.         const db = request.result;
    22.         window.db = db
    23.         console.log('db onupgradeneeded')
    24.         // 在这里创建 store
    25.         this.createStore(db)
    26.       };
    27.  
    28.  
    29.       // 打开成功的回调函数
    30.       request.onsuccess = () => {
    31.         resolve(request.result)
    32.         this.db = request.result
    33.       };
    34.       // 打开失败的回调函数
    35.       request.onerror = function(event) {
    36.         reject(event)
    37.       }
    38.     })
    39.   }
    40.  
    41.  
    42.   createStore(db) {
    43.     if (!db.objectStoreNames.contains('log')) {
    44.       // 创建表
    45.       const objectStore = db.createObjectStore('log', {
    46.         keyPath: 'id',
    47.         autoIncrement: true
    48.       });
    49.       // time 为索引
    50.       objectStore.createIndex('time', 'time');
    51.     }
    52.   }
    53. }

    调用语句如下：

    1. (async function() {
    2.   const database = new Database({ name: 'db_test' })
    3.   await database.createDB()
    4.   console.log(database)
    5.   // Database {name: 'db_test', db: IDBDatabase, version: 1}
    6.   //   db: IDBDatabase
    7.   //     name: "db_test"
    8.   //     objectStoreNames: DOMStringList {0: 'log', length: 1}
    9.   //     onabort: null
    10.   //     onclose: null
    11.   //     onerror: null
    12.   //     onversionchange: null
    13.   //     version: 1
    14.   //     [[Prototype]]: IDBDatabase
    15.   //   name: "db_test"
    16.   //   version: 1
    17.   //   [[Prototype]]: Object
    18. })()

    增删改操作

    当日志插入一条数据，我们需要提交一个事务，事务里对 store 进行 add 操作。

    1. const db = window.db;
    2. const transaction = db.transaction('log', 'readwrite')
    3. const store = transaction.objectStore('log')
    4.  
    5.  
    6. const storeRequest = store.add(data);
    7.  
    8.  
    9. storeRequest.onsuccess = function(event) {
    10.   console.log('add onsuccess, affect rows ', event.target.result);
    11.   resolve(event.target.result)
    12. };
    13.  
    14.  
    15. storeRequest.onerror = function(event) {
    16.   reject(event);
    17. };

    由于每次的增删改查都需要打开一个 transaction，这样的调用不免显得繁琐，我们需要一些步骤来简化，提供 ES6 promise 形式的 API。

    1. class Database {
    2.   // ... 省略打开数据库的过程
    3.   // constructor(options = {}) {}
    4.   // createDB() {}
    5.   // createStore() {}
    6.   add (data) {
    7.     return new Promise((resolve, reject) => {
    8.       const db = this.db;
    9.       const transaction = db.transaction('log', 'readwrite')
    10.       const store = transaction.objectStore('log')
    11.       const request = store.add(data);
    12.  
    13.  
    14.       request.onsuccess = event => resolve(event.target.result);
    15.       request.onerror = event => reject(event);
    16.     })
    17.   }
    18.   put (data) {
    19.     return new Promise((resolve, reject) => {
    20.       const db = this.db;
    21.       const transaction = db.transaction('log', 'readwrite')
    22.       const store = transaction.objectStore('log')
    23.       const request = store.put(data);
    24.  
    25.  
    26.       request.onsuccess = event => resolve(event.target.result);
    27.       request.onerror = event => reject(event);
    28.     })
    29.   }
    30.   // delete
    31.   delete (id) {
    32.     return new Promise((resolve, reject) => {
    33.       const db = this.db;
    34.       const transaction = db.transaction('log', 'readwrite')
    35.       const store = transaction.objectStore('log')
    36.       const request = store.delete(id)
    37.  
    38.  
    39.       request.onsuccess = event => resolve(event.target.result);
    40.       request.onerror = event => reject(event);
    41.     })
    42.   }
    43. }

    调用代码如下：

    1. (async function() {
    2.   const db = new Database({ name: 'db_test' })
    3.   await db.createDB()
    4.   
    5.   const row1 = await db.add({time: new Date().getTime(), body: 'log 1' })
    6.   // {id: 1, time: new Date().getTime(), body: 'log 2' }
    7.  
    8.  
    9.   await db.add({time: new Date().getTime(), body: 'log 2' })
    10.  
    11.  
    12.   await db.put({id: 1, time: new Date().getTime(), body: 'log AAAA' })
    13.  
    14.  
    15.   await db.delete(1)
    16. })()

    查询

    查询有很多种情况，常见的 ORM 里提供范围查询和索引查询两种方法，范围查询中还可以分页查询。在 IndexedDB 中我们简化为 getByIndex。
    查询需要使用到 IDBCursor 游标和 IDBIndex 索引。

    1. class Database {
    2.   // ... 省略打开数据库的过程
    3.   // constructor(options = {}) {}
    4.   // createDB() {}
    5.   // createStore() {}
    6.   
    7.   // 查询第一个 value 相匹对的值
    8.   get (value, indexName) {
    9.     return new Promise((resolve, reject) => {
    10.       const db = this.db;
    11.       const transaction = db.transaction('log', 'readwrite')
    12.       const store = transaction.objectStore('log')
    13.       let request
    14.       // 有索引则打开索引来查找，无索引则当作主键查找
    15.       if (indexName) {
    16.         let index = store.index(indexName);
    17.         request = index.get(value)
    18.       } else {
    19.         request = store.get(value)
    20.       }
    21.  
    22.  
    23.       request.onsuccess = evt => evt.target.result ?
    24.         resolve(evt.target.result) : resolve(null)
    25.       request.onerror = evt => reject(evt)
    26.     });
    27.   }
    28.  
    29.  
    30.   /**
    31.    * 条件查询，带分页
    32.    * 
    33.    * @param {string} keyPath 索引名称
    34.    * @param {string} keyRange 索引对象
    35.    * @param {number} offset 分页偏移量
    36.    * @param {number} limit 分页页码
    37.    */
    38.   getByIndex (keyPath, keyRange, offset = 0, limit = 100) {
    39.     return new Promise((resolve, reject) => {
    40.       const db = this.db;
    41.       const transaction = db.transaction('log', 'readonly')
    42.       const store = transaction.objectStore('log')
    43.       const index = store.index(keyPath)
    44.       let request = index.openCursor(keyRange)
    45.       const result = []
    46.       request.onsuccess = function (evt) {
    47.         let cursor = evt.target.result
    48.         // 偏移量大于 0，代表需要跳过一些记录
    49.         if (offset > 0) {
    50.           cursor.advance(offset);
    51.         }
    52.         if (cursor && limit > 0) {
    53.           console.log(1)
    54.           result.push(cursor.value)
    55.           limit = limit - 1
    56.           cursor.continue()
    57.         } else {
    58.           cursor = null
    59.           resolve(result)
    60.         }
    61.       }
    62.       request.onerror = function (evt) {
    63.         console.err('getLogByIndex onerror', evt)
    64.         reject(evt.target.error)
    65.       }
    66.  
    67.  
    68.       transaction.onerror = function(evt) {
    69.         reject(evt.target.error)
    70.       };
    71.     })
    72.   }
    73. }
    74.  
    75.  
    76. (async function() {
    77.   const db = new Database({ name: 'db_test' })
    78.   await db.createDB()
    79.   
    80.   await db.add({time: new Date().getTime(), body: 'log 1' })
    81.   // {id: 1, time: new Date().getTime(), body: 'log 2' }
    82.  
    83.  
    84.   await db.add({time: new Date().getTime(), body: 'log 2' })
    85.  
    86.  
    87.   const time = new Date().getTime()
    88.  
    89.  
    90.   await db.put({id: 1, time: time, body: 'log AAAA' })
    91.  
    92.  
    93.   await db.add({time: new Date().getTime(), body: 'log 3' })
    94.  
    95.  
    96.   // 查询最小是这个时间的的记录
    97.   const test = await db.getByIndex('time', IDBKeyRange.lowerBound(time))
    98.   // multi index query
    99.   // await db.getByIndex('time, test_id', IDBKeyRange.bound([0, 99],[Date.now(), 2100]);)
    100.  
    101.  
    102.   console.log(test)
    103.   // 0: {id: 1, time: 1648453268858, body: 'log AAAA'}
    104.   // 1: {time: 1648453268877, body: 'log 3', id: 3}
    105. })()

    查询当然还有更多可能，比如查询一张表全部的数据，或者是 count 获取这张表的记录数量等，留待读者们自行扩展。

    《编程狂人》期刊汇总（持续更新）
    txt 星 125.0B
    下载

    优化

    我们需要将 Model 和 Database 拆开来，上文 createDB 的时候做一些改进，类似 ORM 一样提供映射，以及基础的增删改查方法。

    1. class Database {
    2.   constructor(options = {}) {
    3.     if (typeof indexedDB === 'undefined') {
    4.       throw new Error('indexedDB is unsupported!')
    5.     }
    6.     this.name = options.name
    7.     this.db = null
    8.     this.version = options.version || 1
    9.     // this.upgradeFunction = option.upgradeFunction || function () {}
    10.     this.modelsOptions = options.modelsOptions
    11.     this.models = {}
    12.   }
    13.  
    14.  
    15.   createDB () {
    16.     return new Promise((resolve, reject) => {
    17.       indexedDB.deleteDatabase(this.name);
    18.       const request = indexedDB.open(this.name);
    19.       // 当数据库升级时，触发 onupgradeneeded 事件。升级是指该数据库首次被创建，或调用 open() 方法时指定的数据库的版本号高于本地已有的版本。
    20.       request.onupgradeneeded = () => {
    21.         const db = request.result;
    22.  
    23.  
    24.         console.log('db onupgradeneeded')
    25.  
    26.  
    27.         Object.keys(this.modelsOptions).forEach(key => {
    28.           this.models[key] = new Model(db, key, this.modelsOptions[key])
    29.         })
    30.       };
    31.  
    32.  
    33.       // 打开成功
    34.       request.onsuccess = () => {
    35.         console.log('db open onsuccess')
    36.         console.log('addLog, deleteLog, clearLog, putLog, getAllLog, getLog')
    37.         resolve(request.result)
    38.         this.db = request.result
    39.       };
    40.       // 打开失败
    41.       request.onerror = function(event) {
    42.         console.log('db open onerror', event);
    43.         reject(event)
    44.       }
    45.     })
    46.   }
    47. }
    48.  
    49.  
    50. class Model {
    51.   constructor(database, tableName, options) {
    52.     this.db = database
    53.     this.tableName = tableName
    54.  
    55.  
    56.     if (!this.db.objectStoreNames.contains(tableName)) {
    57.       const objectStore = this.db.createObjectStore(tableName, {
    58.         keyPath: options.keyPath,
    59.         autoIncrement: options.autoIncrement || false
    60.       });
    61.       options.index && Object.keys(options.index).forEach(key => {
    62.         objectStore.createIndex(key, options.index[key]);
    63.       })
    64.     }
    65.   }
    66.  
    67.  
    68.   add(data) {
    69.     // ... 省略上文的 add 函数
    70.   }
    71.   delete(id) {
    72.     // ... 省略
    73.   }
    74.   put(data) {
    75.     // ... 省略
    76.   }
    77.   getByIndex(keyPath, keyRange) {
    78.     // ... 省略
    79.   }
    80.   get(indexName, value) {
    81.     // ... 省略
    82.   }
    83. }

    调用如下：

    1. (async function() {
    2.   const db = new Database({
    3.     name: 'db_test',
    4.     modelsOptions: {
    5.       log: {
    6.         keyPath: 'id',
    7.         autoIncrement: true,
    8.         rows: {
    9.           id: 'number',
    10.           time: 'number',
    11.           body: 'string',
    12.         },
    13.         index: {
    14.           time: 'time'
    15.         }
    16.       }
    17.     }
    18.   })
    19.   await db.createDB()
    20.  
    21.  
    22.   await db.models.log.add({time: new Date().getTime(), body: 'log 1' })
    23.   
    24.   await db.models.log.add({time: new Date().getTime(), body: 'log 2' })
    25.   
    26.   await db.models.log.get(null, 1)
    27.  
    28.  
    29.   const time = new Date().getTime()
    30.  
    31.  
    32.   await db.models.log.put({id: 1, time: time, body: 'log AAAA' })
    33.  
    34.  
    35.   await db.models.log.getByIndex('time', IDBKeyRange.only(time))
    36. })()

    当然这只是一个很简陋的模型，它还有一些不足。比如查询时，开发者调用时不需要接触 IDBKeyRange，类似是 sequelize 风格的，映射为 time: { $gt: new Date().getTime() }，用 $gt 来替代 IDBKeyRange.lowerbound。

    批量操作

    值得一提的，IndexedDB 的操作性能和提交给它的事务多少有着紧密的关系，推荐尽可能使用批量插入。
    批量操作，可以采取事件委托来避免产生许多的 request 的 onsuccess、onerror 事件。

    1. class Model {
    2.   // ... 省略 construct
    3.  
    4.  
    5.   bulkPut(datas) {
    6.     if (!(datas && datas.length > 0)) {
    7.       return Promise.reject(new Error('no data'))
    8.     }
    9.     return new Promise((resolve, reject) => {
    10.       const db = this.db;
    11.       const transaction = db.transaction('log', 'readwrite')
    12.       const store = transaction.objectStore('log')
    13.  
    14.  
    15.       datas.forEach(data => store.put(data))
    16.  
    17.  
    18.       // Event delegation
    19.       // IndexedDB events bubble: request → transaction → database.
    20.       transaction.oncomplete = function() {
    21.         console.log('add transaction complete'); 
    22.         resolve()
    23.       };
    24.       transaction.onabort = function (evt) {
    25.         console.error('add transaction onabort', evt);
    26.         reject(evt.target.error)
    27.       }
    28.     })
    29.   }
    30. }

    性能探索

    IndexedDB 的 插入耗时 与提交给它的 事务数量 有显著的关联。我们设置一组对照实验：

    • 提交 1000 个事务，每个事务插入 1 条数据。
    • 提交 1 个事务，事务中插入 1000 条数据。

    测试代码如下：

    1. const promises = []
    2. for (let index = 0; index < 1000; index++) {
    3.   promises.push(db.models.log.add({time: new Date().getTime(), body: `log ${index}` }))
    4. }
    5. console.time('promises')
    6. Promise.all(promises).then(() => {
    7.   console.timeEnd('promises')
    8. })
    9. // promises: 20837.403076171875 ms

    1. const arr = []
    2. for (let index = 0; index < 1000; index++) {
    3.   arr.push({time: new Date().getTime(), body: `log ${index}` })
    4. }
    5. console.time('promises')
    6. await db.models.log.bulkPut(arr)
    7. console.timeEnd('promises')
    8. // promises: 250.491943359375 ms

    减少事务提交非常重要，以至于需要有大量存入的操作时，都推荐日志在内存中尽可能合并下，再批量写入。

    值得一提的是，body 在上面的对照实验中只写入了个位数的字符，假设每次写 5000 个字符，批量写入的时间也只是从 250ms 提升到 300ms，提升的并不明显。

    让我们再来对比一组情况，我们会提交 1 个事务，插入 1000 条数据，在 0 到 500 万存量数据间进行测试，我们得到以下数据：

    1. for (let i = 0; i < 10000; i++) {
    2.   let date = new Date()
    3.   let datas = []
    4.   for (let j = 0; j < 1000; j++) {
    5.     datas.push({ time: new Date().getTime(), body: `log ${j}`})
    6.   }
    7.   await db.models.log.bulkPut(datas)
    8.   datas = []
    9.  
    10.  
    11.   if (i === 10 || i === 50
    12.     || i === 100 || i === 500 || i === 1000 || i === 2000
    13.     || i === 5000) {
    14.     console.warn(`success for bulkPut ${i}: `, new Date() - date)
    15.   } else {
    16.     console.log(`success for bulkPut ${i}:  `, new Date() - date)
    17.   }
    18.   
    19. }
    20.  
    21.  
    22. // success for bulkPut 10:  283
    23. // success for bulkPut 50:  310
    24. // success for bulkPut 100:  302
    25. // success for bulkPut 500:  296
    26. // success for bulkPut 1000:  290
    27. // success for bulkPut 2000:  150
    28. // success for bulkPut 5000:  201
    拓展HtmlParse标签支持
    rar 0星 超过10%的资源 8KB
    下载

    上文数据表明波动并不大，给出结论在 500w 的数据范围内，插入耗时没有明显的提升。当然查询取决的因素更多，其耗时留待读者们自行验证。

    多 tab 操作相同数据的情况

    对于 IndexedDB 来说，它只负责接收一个又一个的事务进行处理，而不管这些事务是从哪个 tab 页提交来的，就可能会产生多个 tab 页的 JS 程序往数据库里试图操作同一条数据的情况。
    拿我们的 db 来举例，若我们修改创建 store 时的索引 time 为：

    objectStore.createIndex('time', 'time', { unique: true });

    同时打开 3 个 tab，每个 tab 都是每 20ms 往数据库里写入一份数据，大概率会出现 error，解决这个问题的理想方法是 SharedWorker API， SharedWorker 类似于 WebWorker，不同点在于 SharedWorker 可以在多个上下文之间共享。我们可以在 SharedWorker 中创建数据库，所有浏览器的 tab 都可以向 Worker 请求数据，而不是自己建立数据库连接。

    遗憾的是 SharedWorker API 在 Safari 中无法支持，没有 polyfill。作为取代，我们可以使用 BroadcastChannel API，他可以在多 tab 间通信，选举出一个 leader，允许 leader 拥有写入数据库的能力，而其他 tab 只能读不能写。

    下面是一个 leader 选举过程的简单代码，参照自 broadcast-channel。

    1. class LeaderElection {
    2.   constructor(name) {
    3.     this.channel = new BroadcastChannel(name)
    4.     // 是否已经存在 leader
    5.     this.hasLeader = false
    6.     // 是否自己作为 leader
    7.     this.isLeader = false
    8.  
    9.  
    10.     // token 数，用于无 leader 时同时有多个 apply 的情况，来比对 maxTokenNumber 确定最大的作为 leader
    11.     this.tokenNumber = Math.random()
    12.     // 最大的 token，用于无 leader 时同时有多个 apply 的情况，来选举一个最大的作为 leader
    13.     this.maxTokenNumber = 0
    14.     this.channel.onmessage = (evt) => {
    15.       console.log('channel onmessage', evt.data)
    16.       const action = evt.data.action
    17.       switch (action) {
    18.         // 收到申请拒绝，或者是其他人已成为 leader 的宣告，则标记 this.hasLeader = true
    19.         case 'applyReject':
    20.           this.hasLeader = true
    21.           break;
    22.         case 'leader':
    23.           // todo， 可能会产生另一个 leader
    24.           this.hasLeader = true
    25.           break;
    26.         // leader 已死亡，则需要重新推举
    27.         case 'death':
    28.           this.hasLeader = false
    29.           this.maxTokenNumber = 0
    30.           // this.awaitLeadership()
    31.           break;
    32.         // leader 已死亡，则需要重新推举
    33.         case 'apply':
    34.           if (this.isLeader) {
    35.             this.postMessage('applyReject')
    36.           } else if (this.hasLeader) {
    37.           } else if (evt.data.tokenNumber > this.maxTokenNumber) {
    38.             // 还没有 leader 时，若自己 tokenNumber 比较小，那么记录 maxTokenNumber，
    39.             // 将在 applyOnce 的过程中，撤销成为 leader 的申请。
    40.             this.maxTokenNumber = evt.data.tokenNumber
    41.           }
    42.           break;
    43.         default:
    44.           break;
    45.       }
    46.     }
    47.   }
    48.   awaitLeadership() {
    49.     return new Promise((resolve) => {
    50.       const intervalApply = () => {
    51.         return this.sleep(4000)
    52.           .then(() => {
    53.             return this.applyOnce()
    54.           })
    55.           .then(() => resolve())
    56.           .catch(() => intervalApply())
    57.       }
    58.       this.applyOnce()
    59.         .then(() => resolve())
    60.         .catch(err => intervalApply())
    61.     })
    62.   }
    63.   applyOnce(timeout = 1000) {
    64.  
    65.  
    66.     return this.postMessage('apply').then(() => this.sleep(timeout))
    67.       .then(() => {
    68.         if (this.isLeader) {
    69.           return
    70.         }
    71.         if (this.hasLeader === true || this.maxTokenNumber > this.tokenNumber) {
    72.           throw new Error()
    73.         }
    74.         return this.postMessage('apply').then(() => this.sleep(timeout))
    75.       })
    76.       .then(() => {
    77.         if (this.isLeader) {
    78.           return
    79.         }
    80.         if (this.hasLeader === true || this.maxTokenNumber > this.tokenNumber) {
    81.           throw new Error()
    82.         }
    83.         // 两次尝试后无人阻止，晋升为 leader
    84.         this.beLeader()
    85.       })
    86.     
    87.   }
    88.   beLeader () {
    89.     this.postMessage('leader')
    90.     this.isLeader = true
    91.     this.hasLeader = true
    92.     clearInterval(this.timeout)
    93.     window.addEventListener('beforeunload', () => this.die());
    94.     window.addEventListener('unload', () => this.die());
    95.   }
    96.   die () {
    97.     this.isLeader = false
    98.     this.hasLeader = false
    99.     this.postMessage('death')
    100.   }
    101.   postMessage(action) {
    102.     return new Promise((resolve) => {
    103.       this.channel.postMessage({
    104.         action,
    105.         tokenNumber: this.tokenNumber
    106.       })
    107.       resolve()
    108.     })
    109.   }
    110.   sleep(time) {
    111.     if (!time) time = 0;
    112.     return new Promise(res => setTimeout(res, time));
    113.   }
    114. }

    调用代码如下：

    1. const elector = new LeaderElection('test_channel')
    2. window.elector = elector
    3. elector.awaitLeadership().then(() => {
    4.   document.title = 'leader!'
    5. })

    总结

    在浏览器中离线存放大量数据，我们目前只能使用 IndexedDB，使用 IndexedDB 会碰到几个问题：

    • IndexedDB API 基于事务，偏向底层，操作繁琐，需要做个封装。
    • IndexedDB 性能最大的瓶颈在于事务数量，使用时注意减少事务的提交。
    • IndexedDB 并不在意事务是从哪个 tab 页提交，浏览器多 tab 页的情况下可能会对同一条数据记录进行多次操作，可以选举一个 leader 才允许写入，规避这个问题。
  • 相关阅读:
    B-神经网络模型复杂度分析
    jsArray数组复制方法性能测试2207292307
    Sqlserver如何调试存储过程
    [Git入门]---gitee注册及代码提交
    评测管理的业务逻辑
    链式存储的特点与设计由来
    Android学习笔记 47. Intent
    合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page)
    Numpy学习
    Neo4j数据和Cypher查询语法笔记
  • 原文地址：https://blog.csdn.net/Q54665642ljf/article/details/126172580