Web 前端性能优化之七:数据存储与缓存技术

这篇具有很好参考价值的文章主要介绍了Web 前端性能优化之七:数据存储与缓存技术。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

7、数据存储

在开发Web应用的过程中,会涉及一些数据的存储需求,常见的存储方式可能有:

保存登录态的Cookie;

使用浏览器本地存储进行保存的Local Storage和Session Storage;

客户端数据持久化存储方案涉及的Web SQL和IndexedDB;

直接存储在本机的文件系统上等。

文件系统、WebSQL和IndexedDB都是异步方式,

而本地存储的Local Storage和Session Storage方式则是同步方式。

Web 前端性能优化之七:数据存储与缓存技术,前端,前端,性能优化,缓存

各种存储方式的不同维度

Web 前端性能优化之七:数据存储与缓存技术,前端,前端,性能优化,缓存

Cookies、Web SQL 等面板信息

Cache Storage是一种为缓存网络请求与响应而设计的数据存储机制,这些请求与响应可以是在应用程序运行过程中常规创建的,也可以是专门为了在缓存中存储一些数据而创建的。

IndexedDB 的实践

当浏览的网站页面被加载出来时,首先需要向服务器请求相应数据来构造页面显示的状态信息,然后再利用这些信息完成页面渲染,如果能将首次请求的信息保存到IndexedDB中,则能有效减少一些频繁访问页面的加载时间。

1、注意平台兼容性:使用 ArrayBuffer 存储(更兼容)

Blob类型比ArrayBuffer类型多了一个MIME类型的字段,为了能够正确地进行数据类型转化,将ArrayBuffer类型转化为Blob类型时需将该类型字段也加入缓冲区。代码示例如下:

Web 前端性能优化之七:数据存储与缓存技术,前端,前端,性能优化,缓存

将Blob类型转化为ArrayBuffer类型的过程会稍复杂一些,需要通过异步方式使用FileReader对象以ArrayBuffer格式读取Blob对象,然后在读取完成所触发的loadend事件中处理转化结果。代码示例如下:

Web 前端性能优化之七:数据存储与缓存技术,前端,前端,性能优化,缓存

2、完善错误处理

在进行数据存储时,会因为很多原因造成数据的读写失败,并且数据存储在某些情况下是不可控的。

由于IndexedDB的主要操作方法都集中在IDBDatabase、IDBTransaction和IDBRequest接口对象上,所以可为它们添加error监听事件,然后根据报错信息进行恰当的错误处理。以监听打开或创建IndexedDB的操作情况为例,代码如下:

Web 前端性能优化之七:数据存储与缓存技术,前端,前端,性能优化,缓存

3、注意修改、删除和过期

针对历史版本进行相应的升级处理,可以使用IDBOpenDBRequest.onupgradeneeded()方法来捕获IndexedDB版本升级事件,具体代码示例如下:

Web 前端性能优化之七:数据存储与缓存技术,前端,前端,性能优化,缓存

4、存储性能

虽然操作IndexedDB的API均是异步执行的,但不正确的使用方式依然会带来存储的性能风险,可能阻塞主线程造成应用崩溃或无响应。

产生风险的主要原因是IndexedDB在存储数据对象时,需要首先创建该数据对象的一个结构化副本,而这个复制过程是在主线程中进行的,所以数据对象嵌套的越复杂、规模越大,对主线程的阻塞时间就会越长。因此在操作IndexedDB时可参考这条规则:读写数据的大小不应该大于待访问的数据大小。

对规模较大的状态数据进行频繁改动时,也会给主线程的执行带来很大压力,即便采用了防抖和节流,也可能阻塞主线程的执行,增加数据写入出错的风险。**因此可采取的优化方式是:将原本整个状态对象的存储方式分解为粒度更小的单个状态记录进行存储。**这样可在进行状态更新时,仅更新实际发生修改的状态记录,而不会引起整个应用的状态对象进行大规模的数据存储。

8、缓存技术

缓存的原理是在首次请求后保存一份请求资源的响应副本,当用户再次发起相同请求后,如果判断缓存命中则拦截请求,将之前存储的响应副本返回给用户,从而避免重新向服务器发起资源请求。

缓存的技术种类有很多,比如代理缓存、浏览器缓存、网关缓存、负载均衡器及内容分发网络等,

它们大致可以分为两类:共享缓存和私有缓存。

共享缓存指的是缓存内容可被多个用户使用,如公司内部架设的Web代理;

私有缓存指的是只能单独被用户使用的缓存,如浏览器缓存。

HTTP缓存应该算是前端开发中最常接触的缓存机制之一,它又可细分为强制缓存与协商缓存,二者最大的区别在于判断缓存命中时,浏览器是否需要向服务器端进行询问以协商缓存的相关信息,进而判断是否需要就响应内容进行重新请求。

1、Service Worker

Service Worker是浏览器后台独立于主线程之外的工作线程,正因如此它的处理能力能够脱离浏览器窗体而不影响页面的渲染性能。

Service Worker是伴随着Google推出的PWA(即Progressive Web App渐进式Web应用)一同出现的技术,它能够实现诸如消息推送、后台加载、离线应用及移动端添加到主屏等堪比原生应用的功能,同时还具备小程序“无须安装、用完即走”的体验特点。虽然Service Worker已被列入W3C标准,但在各端上的兼容性并不理想,目前来讲应用比较多的还是在基于Chrome的PC端浏览器上。(最新的兼容性可以查看相应网站)

1、技术由来

JavaScript的执行是单线程的,如果一个任务的执行占用并消耗了许多计算资源,则势必会导致阻塞执行其他任务,这正是单线程的弊端。

为此浏览器引入了Web Worker,它是一个独立于浏览器主线程之外的工作线程,可以将较复杂的运算交给它来处理,而无须担心这是否会对页面渲染产生负面影响。

Service Worker正是在此基础上增加了对离线缓存的管理能力,它的表现弥补了之前HTML 5上采用AppCache实现离线缓存的诸多缺陷。

Service Worker定义了由事件驱动的生命周期,这使得页面上任何网络请求事件都可以被其拦截并加以处理,同时还能访问缓存和IndexedDB,这就可以让开发者制定自定义度更高的缓存管理策略,从而提高离线弱网环境下的Web运行体验。

2、基本特征

●独立于浏览器主线程,无法直接操作DOM。

●在开发过程中可以通过localhost使用,但要部署到线上环境则需要HTTPS的支持。

●能够监听并拦截全站的网络请求,从而进行自定义请求响应控制。

●在不使用的时候会被中止,在需要的时候进行重启。所以我们不能依赖在其onmessage与onfetch的事件监听处理程序中的全局状态,如果有此需要可以通过访问IndexedDB API将全局状态进行存储。

●广泛使用Promise来处理异步。

●消息推送。

●后台同步。

2、Push 缓存

HTTP 2新增了一个强大的功能:服务器端推送,它的出现打破了传统意义上的请求与响应一对一的模式,服务器可以对客户端浏览器的一个请求发送多个响应。

这样会带来性能优化的一个新思路:在传统的网络应用中,客户端若想将应用中所包含的多种资源渲染展示在浏览器中,就需要逐个资源进行请求,但其实一个HTML文件中所包含的JavaScript、样式表及图片等文件资源,是服务器可以在收到该HTML请求后预判出稍后会到来的请求,那么就可以利用服务器端推送节省这些多余的资源请求,来提升页面加载的速度。

1、最后一道缓存

浏览器缓存通常可以分为四个方面:内存中的缓存、Service Worker缓存、HTTP缓存及HTTP 2的Push缓存。

1、内存中的缓存

内存中的缓存是浏览器中响应速度最快且命中优先级最高的一种缓存,但它的驻留周期非常短,通常依赖于渲染进程,一旦页面页签关闭进程结束,内存中的缓存数据就会被回收。

2、缓存命中优先级

浏览器缓存的命中优先级从高到低分别是:内存中的缓存、Service Worker缓存、HTTP缓存及HTTP 2的Push缓存。

Web 前端性能优化之七:数据存储与缓存技术,前端,前端,性能优化,缓存

缓存命中优先级

3、基于连接的缓存

在了解了缓存命中优先级后,我们还需要明白Push缓存是依赖于HTTP 2连接的,如果连接断开,即便推送的资源具有较高的可缓存性,它们也会丢失,这就意味着需要建立新的连接并重新下载资源。考虑到网络可能存在不稳定性,建议不要长时间依赖Push缓存中的资源内容,它更擅长的是资源推送到页面提取间隔时长较短的使用场景。

4、预加载 与 Push 缓存

Push缓存和预加载还存在一些不同之处,其中主要的不同点是,Push缓存是由服务器端决定何时向客户端预先推送资源的,而预加载则是当客户端浏览器收到HTML文件后,经过解析其中带有preload的标签,才会开启预加载的。

为了方便决定使用Push缓存还是预加载,下面给出一个决策树以供参考:

Web 前端性能优化之七:数据存储与缓存技术,前端,前端,性能优化,缓存

3、CDN 缓存

CDN全称Content Delivery Network,即内容分发网络,它是构建在现有网络基础上的虚拟智能网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、调度及内容分发等功能模块,使用户在请求所需访问的内容时能够就近获取,以此来降低网络拥塞,提高资源对用户的响应速度。

Web 前端性能优化之七:数据存储与缓存技术,前端,前端,性能优化,缓存

使用 CDN 加速的网络

与前端关系密切的CDN优化点:域名设置。

Cookie的访问遵循同源策略,并且同一域名下的所有请求都会携带全部Cookie信息。若这些完全没有必要的开销积少成多,那么它们所产生的流量浪费就会很大,所以将CDN服务器的域名和主站域名进行区分是非常有价值的实践。

因为浏览器对于同域名下的并发请求存在限制,通常Chrome的并发限制数是6,其他浏览器可能多少会有所差异。这种限制也同时为我们提供了一种解决方案:通过增加类似域名的方式来提高并发请求数,比如对多个图片文件进行并发请求的场景,可以通过扩展如下类似域名的方式来规避限制:

Web 前端性能优化之七:数据存储与缓存技术,前端,前端,性能优化,缓存文章来源地址https://www.toymoban.com/news/detail-848716.html

到了这里,关于Web 前端性能优化之七:数据存储与缓存技术的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端性能优化:缓存

    在快节奏的互联网时代,网站的加载速度直接影响用户体验和业务成功。而缓存作为性能优化的重要手段,可以大幅提升网页加载速度,减少服务器负担。本文将为你详解缓存的使用,帮助你优化前端性能,为用户呈现更快速、流畅的体验。 1. 什么是缓存? 缓存是指将已获

    2024年02月13日
    浏览(27)
  • 前端性能优化之HTTP缓存

    前端缓存可分为两大类: HTTP 缓存 和 浏览器缓存 。 我们今天重点是 HTTP 缓存 ,下面这张图是前端缓存的一个大致知识点: 首先解决困扰绕人们的老大难问题: 一、什么是HTTP缓存? HTTP 缓存会存储与请求关联的响应,并将存储的响应复用于后续请求。(MDN) 通俗的讲,HTTP

    2024年02月06日
    浏览(60)
  • web 性能优化详解(Lighthouse工具、优化方式、强缓存和协商缓存、代码优化、算法优化)

    优化性能概念宽泛,可以从信号、系统、计算机原理、操作系统、网络通信、DNS解析、负载均衡、页面渲染。只要结合一个实际例子讲述清楚即可。 Web 性能是客观的衡量标准,是用户对加载时间和运行时的直观体验。 Web 性能指页面加载到可交互和可响应所消耗的时间,以

    2024年02月07日
    浏览(32)
  • 前端面试:【性能优化】前端缓存、CDN、懒加载和预加载

    亲爱的前端开发者,Web性能对用户体验至关重要。如果你想让你的网站更快、更具吸引力,就需要关注前端性能优化。在这篇文章中,我们将深入探讨四个关键的性能优化策略:前端缓存、CDN(内容分发网络)、懒加载和预加载,以助你构建高性能的Web应用。 1. 前端缓存:优

    2024年02月11日
    浏览(30)
  • Web 前端性能优化之三:加载优化

    2、加载优化 1、延迟加载 本着节约不浪费的原则,在首次打开网站时,应尽量只加载首屏内容所包含的资源,而首屏之外涉及的图片或视频,可以等到用户滚动视窗浏览时再去加载。以上就是延迟加载优化策略的产生逻辑,通过延迟加载“非关键”的图片及视频资源,使得页

    2024年04月26日
    浏览(33)
  • 前端面试:【网络协议与性能优化】提升Web应用性能的策略

    嗨,亲爱的Web开发者!构建高性能的Web应用是每个开发者的梦想。本文将介绍一些性能优化策略,包括资源加载、懒加载和CDN等,以帮助你提升Web应用的性能。 1. 性能优化策略: 压缩资源: 使用Gzip或Brotli等压缩算法来减小CSS和JavaScript文件的大小,加快加载速度。 合并文件

    2024年02月11日
    浏览(31)
  • “深入理解Redis:高性能缓存与数据存储的秘密“

    标题:深入理解Redis:高性能缓存与数据存储的秘密 在现代应用程序的开发中,缓存和数据存储是非常重要的组成部分。它们不仅可以提高应用程序的性能,还可以减轻数据库和网络的负载。其中,Redis作为一种高性能的内存数据存储系统,因其出色的性能和灵活的特性而备

    2024年02月16日
    浏览(30)
  • “深入解析Redis:高性能缓存与分布式数据存储“

    标题:深入解析Redis:高性能缓存与分布式数据存储 摘要:本文将深入解析Redis,介绍其作为高性能缓存和分布式数据存储的特点和功能,并提供示例代码展示其使用方法。 正文: 一、引言 Redis是一个开源的内存数据结构存储系统,它以其高性能、灵活的数据结构以及丰富的

    2024年02月17日
    浏览(43)
  • 极致性能优化:前端SSR渲染利器Qwik.js | 京东云技术团队

    前端性能已成为网站和应用成功的关键要素之一。用户期望快速加载的页面和流畅的交互,而前端框架的选择对于实现这些目标至关重要。然而,传统的前端框架在某些情况下可能面临性能挑战且存在技术壁垒。 在这个充满挑战的背景下,我们引入了 Qwik.js 框架。Qwik.js 不仅

    2024年02月05日
    浏览(34)
  • 如何调试移动应用程序数据库问题并优化数据存储性能

    在移动应用开发的动态领域中,无缺陷的用户体验是最终目标。然而,在表面下隐藏着一个复杂的数据存储和检索网络。当数据库问题出现时,它们可能会干扰甚至最精心设计的应用程序。这就是为什么了解如何调试移动应用程序数据库问题和优化数据存储性能对于追求卓越

    2024年02月13日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包