【Chrome web.dev Live 2020总结】第2天第11集:网络存储

举报
华为云官网技术团队 发表于 2020/07/22 16:53:00 2020/07/22
【摘要】 在用户浏览器缓存关键资源可以大幅提升页面浏览性能,增强页面可用性,保证关键页面脱机浏览。在存储技术层出不穷的今天,如何选用合适的存储技术至关重要。下面就谈谈如何选取适合自己项目的存储技术。

11.了解浏览器存储

在用户浏览器缓存关键资源可以大幅提升页面浏览性能,增强页面可用性,保证关键页面脱机浏览。在存储技术层出不穷的今天,如何选用合适的存储技术至关重要。下面就谈谈如何选取适合自己项目的存储技术

11.1 常见的存储技术

若想了解现行热门的存储技术,Chrome浏览器中F12->Application,查看左侧的Storage即可

image.png

11.1.1 Local Storage

不推荐

Local Storage为同步的,可能阻塞主程序从而导致性能问题

 11.1.2 Session Storage

不推荐

Session Storage与Local Storage类似,都是同步的,都可能导致性能问题。不同点在于Session Storage会跟随会话,页面会话结束对应的Session Storage也会被清除

 11.1.3 IndexedDB

适用于存储少量,需要快速检索的数据场景。

11.1.4 Web SQL

不推荐

对标IndexedDB的竞争规范,不同点在于IndexedDB为索引表系统,Web SQL是关系型数据库。Web SQL规范已于2010年废弃

11.1.5 Cookies

不推荐

Cookie曾一度用于客户端数据的存储,随着新技术的出现而逐渐废弃。由于服务器指定Cookie后,浏览器的每次请求都会携带Cookie数据,会带来额外的性能开销(尤其是在移动环境下)

11.1.6 AppCache

不推荐

AppCache更新机制存在硬伤,存储大小也不尽如人意。此特性已被废弃

 11.1.7 ServiceWorker的Cache API

适用于缓存静态资源场景

请注意此特性IE不兼容。按照视频的说法,IE不算主流浏览器,可以忽略

11.1.8 小结

虽存储技术众多,但视频只推荐了其中两种,一个是IndexedDB,一个是ServiceWorker

11.2 浏览器的存储策略

 11.2.1 存储空间大小限制

Chrome

最多60%的总磁盘空间

IE10+

250MB,超过10MB会有提醒

Firefox

一个来源最多2GB

Safari

1GB,达到限制会提醒用户增加

11.2.2 如何查看可用的存储空间

通过StorageManager的相关API可以查看

代码如下:

1
if (navigator.storage && navigator.storage.estimate) {
2
  const quota = await navigator.storage.estimate();
3
  // quota.usage -> 已使用大小
4
  // quota.quota -> 最大可用大小
5
  const percentageUsed = (quota.usage / quota.quota) * 100;
6
  console.log(`你已经使用了可用存储的${percentageUsed}%.`);
7
  const remaining = quota.quota - quota.usage;
8
  console.log(`你还可以存储 ${remaining} bytes.`);
9
}

运行结果:

image.png

 11.2.3 浏览器自动清除存储策略

当存储大小超过浏览器限制时,不同浏览器针对新的写入会采取不同策略

Chrome

从最近使用最少源开始删除,只至不再超过限制

IE10+

阻止新的数据写入

Firefox

同Chrome

Safari

只存7天(已装PWA除外)


【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容, 举报邮箱:cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。