启真湖畔

启真湖畔 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

启真湖畔 关注了专栏 · 2019-12-24

实用至上

记录和分享我在开发过程中的心得与感悟

关注 1009

启真湖畔 关注了专栏 · 2019-11-26

前端学习

记录并探讨WEB前端相关知识

关注 126

启真湖畔 提出了问题 · 2019-09-20

为什么serviceWorker通过fetch获取的资源,会得到上一个版本的资源?

问题描述

我在使用serviceWorker管理缓存,套路很一般,首先在active事件删除以前版本缓存,然后在fetch事件缓存新版本资源。
在sw激活之前,已经删除了旧版cache。
正常情况应该是新版本的cache里面的缓存文件的时间晚于cache的创建时间,并且获取的都是新版本的文件。
但是问题出现了:新版本的cacheStorage里面居然有上一个版本的资源,导致页面逻辑出现问题
这个问题不是必现,只是偶尔会出现。

浏览器版本: chrome 76.0.3809.132 (正式版本) (64 位)
相关代码:
图片描述

问题图片:
图片描述

你期待的结果是什么?实际看到的错误信息又是什么?

可以看到,cache的创建时间是2019.09.12 14:30。
并且旧版本的cache在激活前已经删除。
然后通过网络请求然后缓存资源,正常情况下资源的缓存时间是晚于cache的创建时间的。

但是实际情况是,部分资源任然是旧版sw里面的资源
虽然这个问题不是必现,但是一出现就会导致新版和旧版共同存在,导致页面逻辑出错误。
请问各位大佬,到底哪里出现了问题?

关注 1 回答 0

启真湖畔 提出了问题 · 2019-09-20

为什么serviceWorker通过fetch获取的资源,会得到上一个版本的资源?

问题描述

我在使用serviceWorker管理缓存,套路很一般,首先在active事件删除以前版本缓存,然后在fetch事件缓存新版本资源。
在sw激活之前,已经删除了旧版cache。
正常情况应该是新版本的cache里面的缓存文件的时间晚于cache的创建时间,并且获取的都是新版本的文件。
但是问题出现了:新版本的cacheStorage里面居然有上一个版本的资源,导致页面逻辑出现问题
这个问题不是必现,只是偶尔会出现。

浏览器版本: chrome 76.0.3809.132 (正式版本) (64 位)
相关代码:
图片描述

问题图片:
图片描述

你期待的结果是什么?实际看到的错误信息又是什么?

可以看到,cache的创建时间是2019.09.12 14:30。
并且旧版本的cache在激活前已经删除。
然后通过网络请求然后缓存资源,正常情况下资源的缓存时间是晚于cache的创建时间的。

但是实际情况是,部分资源任然是旧版sw里面的资源
虽然这个问题不是必现,但是一出现就会导致新版和旧版共同存在,导致页面逻辑出错误。
请问各位大佬,到底哪里出现了问题?

关注 1 回答 0

启真湖畔 关注了用户 · 2018-05-07

某熊猫桑 @marsgt

承认自己做不到,坦诚自己不够好。

关注 19688

启真湖畔 关注了用户 · 2018-05-07

oraoto @oraoto

墙上芦苇,头重脚轻根底浅;

山间竹笋,嘴尖皮厚腹中空。

关注 1199

启真湖畔 关注了标签 · 2018-05-07

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 194501

启真湖畔 关注了用户 · 2018-01-08

边城 @jamesfancy

从事软件开发 20 年,在软件分析、设计、架构、开发及软件开发技术研究和培训等方面有着非常丰富的经验,近年主要在研究 Web 前端技术、基于 .NET 的后端开发技术和相关软件架构。

关注 11095

认证与成就

  • 获得 0 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-10-10
个人主页被 381 人浏览