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

简介: 上一讲我们说到了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 本文正在参与「掘金小册免费学啦!」活动, 点击查看活动详情


相关文章
彻底搞懂微信小游戏中的分享功能
作为一个游戏,分享功能是必不可少的,尤其是对于一个微信小游戏来说,其最大的优势就是可以借助微信方便的进行分享。 在微信小游戏制作工具中,与分享有关的积木块并不多,一共就 5 块。
245 0
|
域名解析 缓存 网络协议
前端性能优化(一)| 小册免费学
移动互联网时代,用户对于网页的打开速度要求越来越高。首屏作为直面用户的第一屏,其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。
63 0
|
缓存 前端开发 网络协议
前端性能优化(二)| 小册免费学
上一节介绍了网页加载过程中可优化的点,这一节我来说一下网络部分的优化。
66 0
|
JavaScript 前端开发 Go
前端性能优化(四)| 小册免费学
前面介绍多个前端性能优化的点,现在我们来说一下性能优化的最后一关——页面渲染 浏览器渲染的过程我们之前也稍微提过,这里再说一下解析 HTML 文件,构建 DOM 树,同时浏览器主进程负责下载 CSS 文件
79 0
|
XML 前端开发 JavaScript
canvas深入浅出(一)| 小册免费学
canvas是为了解决页面只能显示静态图片而出现的一种可以使用JavaScript绘制的HTML标签,它可以接受两个参数width和height(原来有三个,还有一个moz-opaque控制透明度,已经废弃了)
62 0
|
存储 前端开发 API
canvas深入浅出(四)| 小册免费学
之前三节我们铺垫了canvas的相关知识,这一节我们来“落地”,实现一个五子棋的小游戏
69 0
|
前端开发 API
canvas深入浅出(二)| 小册免费学
上一节最后我们说了一个绘制曲线的API——arc(那个API并不是专门用来绘制圆形,只是使用曲线可以绘制圆形),他还有一个兄弟——arcTo(x1, y1, x2, y2, r),根据当前描点与给定的控制点1连接的直线,和控制点1与控制点2连接的直线,作为使用指定半径的圆的切线,画出两条切线之间的弧线路径
65 0
canvas深入浅出(二)| 小册免费学
|
前端开发 API
canvas深入浅出(三)| 小册免费学
所有的内容都是手动绘制还是有点麻烦,好在canvas支持导入图片,createPattern(image, type),该方法接受两个参数。Image 可以是一个 Image 对象的引用,或者另一个 canvas 对象。Type 必须是下面的字符串值之一:repeat,repeat-x,repeat-y 和 no-repeat。
73 0
canvas深入浅出(三)| 小册免费学
|
存储 前端开发 开发者
短视频开发app,谈谈前端图片的相关知识点
短视频开发app,谈谈前端图片的相关知识点
|
缓存 Android开发
极简抖音中的优化点|青训营笔记(一)
下面我将罗列出几项我在项目中发现的可优化点,以及其优化方案。
极简抖音中的优化点|青训营笔记(一)

热门文章

最新文章