IndexedDB 是前端存储的一个解决方案，能够提供客户端的大数据量可靠数据管理服务。
但它两个缺点：一是接口复杂，二是写入数据库时，有可能阻塞UI。
所以使用IndexedDB前，要问自己两个问题。
-
可不可以用 LocalStorage 代替？
对于大小在几MB之内，不需要检索，且方便序列化为字符串的数据，完全可以用 LocalStorage 代替IndexedDB，处理起来会更简单。 -
可不可以直接向后端获取数据。
其实理论上来说，同一时间，页面展示的信息量一般不会过大。因为用户本身也难以接受扑面而来的海量的信息，所以用懒加载的方式，按需向后端获取信息，能够减轻前端海量数据的渲染压力。当服务端压力不大时，完全没必要在前端再搭建一套数据管理服务。
如果确定要用IndexedDB，那么需要注意的是UI阻塞问题。
IndexedDB在写入数据时，会在主线程执行结构化克隆算法，如果对象过大，算法执行时会阻塞页面的渲染，让用户产生卡顿的感觉。
有三个方法来避免UI阻塞问题。
-
避免巨型对象的直接写入。
可以考虑把巨型对象分解成多个小对象，缩短单次写入的时长。 -
存储巨型对象前，先将对象转换为字节，这样避免了结构化克隆算法的执行。
类似前文 把函数转换为字符串， 可以利用ArrayBuffer将对象转换为二进制字节，后面读取的时候，再次转换回对象。 -
使用 webworker 技术，避免阻塞主线程。
网友评论