前端缓存的问题

前端缓存的问题,第1张

因为如果有了刷新的动作,根据cachecontrol的值服务器会给浏览器返回304协议缓存。原理就是刷新的时候带着本地文件的版本戳去服务器请求,服务器如果比对你确实没过期,就返回一个304状态码使用本地资源。如果过期了,就返回200状态码和整个文件。对于这种刷新造成的304,移动端会明显看出有上下行缓存造成的延迟,美团有通用的解决方案 LsLoader 移动WEB工程化缓存方案美团外卖前端技术栈。

//sessinonStorage只在当前窗口有效 生命随浏览器关闭终止 容量约5M
windowsessionStoragesetItem("name",'男');
//获取name
consolelog(windowsessionStoragegetItem('name'));
//清空Storage
windowsessionStorageclear();
//删除数据
windowsessionStorageremoveItem('age')

先打开a页面储存name 在打开桌面b获取时会获取不到如下图

但是在a页点击a链接跳转b却可以获取到

当跳转到b时修改name,在返回a页查看name, a页并没有发生改变(这说明a和b页面不是公用的一个sessionStorage,而是在页面跳转时a传给了b)

//localStorage在关闭浏览器后依然有效 容量约20M
//放入缓存中
windowlocalStoragesetItem('userToken', token);
//获取
consolelog(windowlocalStoragegetItem("userToken"))
//删除数据
windowsessionStorageremoveItem('userToken')

微前端qiankun源码阅读(1):Demo与single-spa流程
微前端qiankun源码阅读(2):加载子应用与沙箱隔离

通过前面的两篇可以大概了解qiankun的运行,其中可能会有些疑问:一个主应用有多个子应用,如果每次都在切换子应用时才去加载对应子应用的资源,那切换时的体验会比较差。为此,qiankun提供了预加载功能,可以看到在start中调用了 doPrefetchStrategy :

去到 src/prefetchts 中查看 doPrefetchStrategy ,可以看到其默认预加载策略是 prefetchAfterFirstMounted ,也就是等当前子应用加载完毕后,再去预加载其他子应用。 prefetchAfterFirstMounted 很简单,就是在 requestIdleCallback 中调用我们之前讲到的 importEntry 去加载每个子应用。
requestIdleCallback 是一个相对新的API,可以用它来执行一些低优先级的任务,它会在浏览器空闲的时候才去执行,从而避免影响当前子应用的加载。

另外有个问题是,如果我们每次切换应用都去 importEntry 重新加载资源,那不好。可以将资源保存起来。
这里其实也是 importEntry 做好了, importEntry 会将请求到的资源保存在 embedHTMLCache 变量中。
qiankun中的通信很简单,在 initGlobalState API文档 可以查看其使用。
这里源码在 src/globalStatets 中。各种通信方式在微前端框架里同样适用,没啥好看。

qiankun框架的源码阅读暂时先这样,希望以后有应用场景可以使用一下这个框架。

缓存问题在web前端编程开发领域中是一个非常重要的技术问题,下面我们就一起来了解一下,关于web缓存我们都需要了解哪些知识。
缓存优点通常所说的Web缓存指的是可以自动保存常见>

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12951605.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-29
下一篇 2023-05-29

发表评论

登录后才能评论

评论列表(0条)

保存