前端性能优化(三)| 小册免费学

简介: 上一讲我们说到了HTTP缓存,这一讲的缓存并不单单指HTTP缓存

f13e9bd95fe23936db9792df8bb05a4.png

上一讲我们说到了HTTP缓存,这一讲的缓存并不单单指HTTP缓存


资源缓存


浏览器提供了多种缓存方式

  1. Memory Cache(内存)
  2. Service Worker Cache
  3. HTTP Cache
  4. Push Cache

Memory Cache,就是将资源缓存到内存中,等待下次访问时不需要重新下载资源,而直接从内存中获取。Webkit早已支持Memory Cache。在刷新页面时就会使用内存缓存,如图,第一次打开网页时先从磁盘缓存中读取了资源

1682514046(1).png

然后刷新页面,就会从内存中加载资源

1682514066(1).png

内存缓存是“最短命”的一种缓存,在页面关闭之后缓存就会从内存中释放

service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。它的特性将包括推送消息,背景后台同步, geofencing(地理围栏定位),拦截和处理网络请求。它可以使你的应用先访问本地缓存资源,所以在离线状态时,在没有通过网络接收到更多的数据前,仍可以提供基本的功能(一般称之为 Offline First)。前提是必须是HTTPS协议才可以,而且必须注册以后才可用

Push Cache(推送缓存)是 HTTP/2 中的内容,当以上三种缓存都没有命中时,它才会被使用。它只在会话(Session)中存在,一旦会话结束就被释放,并且缓存时间也很短暂,在Chrome浏览器中只有5分钟左右,同时它也并非严格执行HTTP头中的缓存指令。


本地存储


打开开发者工具的应用程序选项就可以看到浏览器提供的本地存储方案

1682514087(1).png

现在的网页应用基本上不是原来的网页了,现在基本都是应该叫做WebApp,webApp的成型过程中,浏览器提供的存储功能提供了清理的支持

因为HTTP是无状态的请求,所以怎么保持状态是一个问题,cookie的出现就是为了解决这个问题。Cookie 说白了就是一个存储在浏览器里的一个小小的文本文件,它附着在 HTTP 请求上,在浏览器和服务器之间“飞来飞去”。它可以携带用户信息,当服务器检查 Cookie 的时候,便可以获取到客户端的状态。

但是cookie还是有缺陷的:

  • 不够大,cookie的体积上限是4kB,超过4kB将会被裁剪
  • 影响性能,cookie会被每次请求携带,无形之中增加了请求的体积,如果请求次数太多将会增加很多没有必要的传输

为了解决cookie的缺陷,web stroage出现了,web stroage有两种形式,localStroage和sessionStroage。它们二者的不同是sessionStroage生命周期是会话级,localStroage是持久化;作用域方面,localStroage只要是在同源下都可以访问,而sessionStroage只在当前窗口生效,再打开另一个窗口无法共享,通过a标签的target =“_blank”属性打开新窗口时可以共享sessionStroage 本文正在参与「掘金小册免费学啦!」活动, 点击查看活动详情


相关文章
|
前端开发 JavaScript 小程序
预备金九银十,这套前端面试小册阁下请收好
预备金九银十,这套前端面试小册阁下请收好
323 0
|
JavaScript 前端开发 Go
前端性能优化(四)| 小册免费学
前面介绍多个前端性能优化的点,现在我们来说一下性能优化的最后一关——页面渲染 浏览器渲染的过程我们之前也稍微提过,这里再说一下解析 HTML 文件,构建 DOM 树,同时浏览器主进程负责下载 CSS 文件
294 0
|
缓存 前端开发 网络协议
前端性能优化(二)| 小册免费学
上一节介绍了网页加载过程中可优化的点,这一节我来说一下网络部分的优化。
279 0
|
域名解析 缓存 网络协议
前端性能优化(一)| 小册免费学
移动互联网时代,用户对于网页的打开速度要求越来越高。首屏作为直面用户的第一屏,其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。
259 0
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1780 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
1165 0
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
952 6
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
1538 1

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1442
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    715
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    572
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    580
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    665
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    845
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1652
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    399
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1369
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    677