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

简介: 上一讲我们说到了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 小程序
预备金九银十,这套前端面试小册阁下请收好
预备金九银十,这套前端面试小册阁下请收好
81 0
|
JavaScript 前端开发 Go
前端性能优化(四)| 小册免费学
前面介绍多个前端性能优化的点,现在我们来说一下性能优化的最后一关——页面渲染 浏览器渲染的过程我们之前也稍微提过,这里再说一下解析 HTML 文件,构建 DOM 树,同时浏览器主进程负责下载 CSS 文件
102 0
|
缓存 前端开发 网络协议
前端性能优化(二)| 小册免费学
上一节介绍了网页加载过程中可优化的点,这一节我来说一下网络部分的优化。
82 0
|
域名解析 缓存 网络协议
前端性能优化(一)| 小册免费学
移动互联网时代,用户对于网页的打开速度要求越来越高。首屏作为直面用户的第一屏,其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。
85 0
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
131 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
1月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
1月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
1月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT