文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从【字节码缓存】再进一步看【HTTP 缓存】，面试官：“这么细吗？”

不能跨进程； 当 V8 编译脚本时，编译后的脚本以源码为键被存储在一个 hashtable 中（在 V8 的堆中），当 Chrome 要求 V8 编译其他脚本的时候，V8 首先检查脚本的源码是否能匹配...它还将文件存储在浏览器的磁盘缓存中。 ② 当第二次请求 JS 文件（即 warm run）时，Chrome 会从浏览器缓存中获取该文件，并再次将其提供给 V8 进行编译。...在 warm run 时使用内存缓存，在 hot run 时使用磁盘缓存； 再看 HTTP 缓存 知己知彼、百战不殆！...worker 缓存 service worker 中也有字节码缓存机制； 我们知道 service worker 可以让你构建本地资源缓存，当你发送请求的时候，会从本地缓存提供资源。...代码示例： service worker 为安装（创建资源）和获取（从潜在的缓存提供资源）事件添加处理程序。

35620

【译】使用默认方式更新service worker

此外，从Chrome 78开始，service worker中对于通过importScripts()加载的脚本将逐字节进行比较。...从Chrome 68开始，更新service worker脚本时，HTTP缓存将被忽略，因此，68版本后的浏览器中可以看到Web应用对其service worker脚本的请求频率增加，但importScripts...当值为imports时，HTTP缓存将不会影响/service-worker.js的更新，但会影响service worker中引入的脚本（在我们的例子中是指path/to/import.js）。...这是Chrome 68之后版本的默认项。 当值为all时，HTTP缓存将影响从顶级/service-worker.js脚本中发出的所有请求，包括引入的脚本，例如：path/to/import.js。...从Chrome 78开始，每次对service worker脚本执行更新检查时，都将同时检查导入脚本的内容是否已更改。

2K10
您找到你想要的搜索结果了吗？
是的
没有找到

2020前端性能优化清单（五）

在 Chrome、Firefox、Safari 和 Edge 中可以对该 API 提供部分支持[53]，在所有现代浏览器中都支持 service worker[54]。 45....使用 service worker 做缓存和网络降级 在网络上，没有比用户机器上本地存储的缓存更快的了。...如果您的网站运行的是 HTTPS，请使用“实用主义者的 service worker 指南[85]”，将静态资源缓存到 service worker 中，并存储脱机降级资源（甚至脱机页面），然后从用户的机器中检索它们...您是否在 CDN/Edge 上使用了 service worker，例如用于 A/B 测试？...例如，在 A/B 测试中，当 HTML 需要为不同的用户改变其内容时，我们可以使用 CDN 服务器上的 service worker[100] 来处理逻辑。

1.9K20

浏览器缓存读取规则

基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程） 在web worker的基础上增加了离线缓存的能力 本质上充当Web应用程序（...不管是从Memory Cache 中还是网络请求中的数据，浏览器都显示实在Service Worker中获取的 Memory Cache Memory Cache 内存缓存，主要包含当前页面已经抓取到的资源...，众所周知，preloader的相关指令已经是页面优化的常见手段之一，它可以一边解析js/css文件，一边网络请求下一个资源 需要注意：内存缓存在缓存资源时并不关心返回资源的HTTP缓存头Catch-Control...绝大部分的缓存都来自 Disk Cache， Push Cache Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。...它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。

67520

渐进式Web应用入门-ServiceWorker

工作原理 Service worker 是一个完全独立于 Web 页面的 js 脚本，有他自己的生命周期。...接管网页以后，如果当前内存不足，会被杀死；否则等待处理fetch和message事件。这两个事件一个是当网络请求时，或者其他网页发出了消息时。...从使用开始 准备工作 首先你的站点必须支持https (这也是为什么这两天你访问开源实验室出错的原因，在转全站 https)。 其次，你至少得懂一点 js开发。...这个 service-worker.js 文件必须放在跟目录，因为 service workers 的作用范围是根据其在目录结构中的位置决定的。...有个注意事项要知道 cache.addAll() 方法中，如果某个文件下载失败了，那么整个缓存就会失败，service worker 的install事件也将会失败。

66130

PWA 入门: 写个非常简单的 PWA 页面

然后在 HTML 文件当中引入配置: 添加 Service Worker Service Worker 在网页已经关闭的情况下还可以运行, 用来实现页面的缓存和离线, 后台通知等等功能。...借助 Service Worker, 可以在注册完成安装 Service Worker 时, 抓取资源写入缓存: 调用 self.skipWaiting() 方法是为了在页面更新的过程当中, 新的 Service...: 在新安装的 Service Worker 中通过调用 self.clients.claim() 取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。...由于 Service Worker 限制了使用 HTTPS 地址或者 localhost 地址, 在 Android Chrome 打开需要借助 ngrok 生成的 HTTPS 地址, 这样才能把 demo...从 DevTools 可以看到, 普通页面刷新时, 列表当中的静态资源都是从 Service Worker 获取的: 更新页面 页面被缓存之后, 就需要适当处理缓存失效时页面的更新。

2.7K50

Service Worker初体验

Service Worker：一个Service Worker是一段运行在浏览器后台进程里的脚本，他独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。...销毁，是否销毁由浏览器决定，如果一个service worker长期不使用或者机器内存有限，则可能会销毁这个worker fetch事件 在页面发起http请求时，service worker可以通过fetch...因为我们是要缓存离线文件，所以可以在install事件中开始缓存。...var cacheFiles= [ 'about.js', 'blog.js' 首先定义了需要缓存的文件数组cacheFile，然后在install事件中，缓存这些文件。...这样就将文件添加到caches缓存中,然后使用fetch事件拦截请求。首先检缓存中是否已经缓存了这个请求，如果有，就直接返回响应，就减少了一次网络请求。

1.1K100

Service Worker最佳实践

X5内核作为WebView提供给不同app使用，具备Service Worker网络拦截和处理网络请求，配合CacheStorage可以实现web页面的缓存管理以及与前端通过PostMessage通信。...cache的Service Worker脚本直接从网络拉取。...图3 对于一些较为复杂的页面，往往会有一部分资源使用本地cache，还有一部分仍然需要是时拉取，在调试过程中勾选图2中的3、4来快速达到当前tab页离线和跳过Service Worker拦截。...在之前的原理中说过，Service Worker会在每次打开对应的页面后去检查更新Service Worker脚本，但如果Service Worker脚本有缓存期限的话，那么在开发调试的时候修改了测试页面的...Service Worker脚本并push到测试页面服务器上之后，刷新页面并不能立即去网络更新脚本，给开发调试带来麻烦，但图2中的5可以帮助开发强行忽略本地Service Worker脚本cache，实时的去网络更新

2.2K10

咱们worker有力量-在浏览器中实现多线程和离线应用

hostname 和 port 等 在 worker 中也支持 XMLHttpRequest 和 fetch 等 支持 importScripts() 方法（在同一个域上异步引入脚本文件），该函数接受...回调中，一般执行以下任务： 打开制定版本的缓存 缓存文件 确认所有需要的资源是否被缓存 如有指定的任何缓存文件无法下载，则安装步骤将失败 更新 更新 service worker 所在的 JavaScript...用户打开页面时，浏览器会尝试在后台重新下载该 JS 文件；如果该文件与其当前所用文件存在字节差异，则将其视为“新版本的 service worker”。...状态 当不再有任何已加载的页面在使用旧版的 service worker 的时候，新版本才会激活，并触发其 activate 事件 出现在 activate 回调中的一个常见任务是缓存管理。...在这个步骤进行缓存管理，而不是在之前的安装阶段进行，原因在于：如果在 install 步骤中清除了任何旧缓存，则继续控制所有当前页面的任何旧 service worker 将突然无法从缓存中提供文件 self.addEventListener

2.4K80

页面守护者：Service Worker

Boss很厉害，在页面上指点江山，呼风唤雨。但他有个局限：同一时刻只做一件事（单线程）。当一些很耗时的杂事让Boss去处理时，在处理的过程中他就无暇顾及其它重要的事了。...这下，Boss终于可以从耗时的杂事中解放出来了，他只需要把Web worker叫过来说：“这些事情拿去做，没做完不要来找我”。...能处理Boss需要的资源（HTTPS请求），以便离线时也能让BOSS取到数据（从cache中）。...使用条件 请求协议条件 HTTPS。 毕竟给Service Worker的权利较大，可以直接截取和返回用户的请求，所以了于安全考虑，目前只能在HTTPS环境下才能使用Service Worker。...一个栗子 下面的例子将展示通过Service Worker来实现一个离线页面，在第一次访问后，后续即使没有网络连接，也能从缓存中获取页面必要的资源。例子源自github上一个demo。

43530

页面守护者：Service Worker

Boss很厉害，在页面上指点江山，呼风唤雨。但他有个局限：同一时刻只做一件事（单线程）。当一些很耗时的杂事让Boss去处理时，在处理的过程中他就无暇顾及其它重要的事了。...这下，Boss终于可以从耗时的杂事中解放出来了，他只需要把Web worker叫过来说：“这些事情拿去做，没做完不要来找我”。...能处理Boss需要的资源（HTTPS请求），以便离线时也能让BOSS取到数据（从cache中）。...使用条件 请求协议条件 HTTPS。 毕竟给Service Worker的权利较大，可以直接截取和返回用户的请求，所以了于安全考虑，目前只能在HTTPS环境下才能使用Service Worker。...一个栗子 下面的例子将展示通过Service Worker来实现一个离线页面，在第一次访问后，后续即使没有网络连接，也能从缓存中获取页面必要的资源。例子源自github上一个demo。

79100

WorkBox 之底层逻辑Service Worker

我们需要在脚本 (例如，在 ServiceWorker 中) 中处理缓存更新的方式。...当在Service worker中使用这些方法时，可以为用户体验提供巨大的好处，并为普通的网页提供类似应用程序的行为。...在我们的主JavaScript文件中，使用Worker构造函数创建一个新的Worker对象。此构造函数接受一个参数，即我们在第1步中创建的JavaScript文件的URL。...; 在我们的工作线程JavaScript文件中，添加一个事件侦听器，以处理从主线程发送的消息，使用self对象的onmessage属性。我们可以使用event.data属性访问消息中发送的数据。...如果图像在service worker缓存中，则从缓存中提供它。如果没有，从网络获取图像，将响应存储在缓存中，并返回网络响应。 所有其他请求都会通过service worker，不与缓存互动。

28420

Google Chrome 工程师：JavaScript 不容错过的八大优化建议

当我我们从单个流线程转向多个流传输任务时，这个问题变得非常明显。下面是你在Chrome 69中看到的情况： ?...V8引擎的（字节）代码缓存优化可以帮助改善重复访问时的体验。当第一次请求脚本时，Chrome会下载脚本并将其交给V8引擎进行编译。同时将文件存储在浏览器的磁盘缓存中。...当第二次请求JS文件时，Chrome会从浏览器缓存中获取该文件，并再次将其交给V8引擎进行编译。然而，这次编译的代码会被序列化，并作为元数据附加到缓存的脚本文件中。 ?...V8引擎的代码缓存示意图 第三次请求脚本时，Chrome从缓存中获取脚本文件和文件的元数据，并将两者都交给V8引擎。V8引擎会反序列化元数据来跳过编译步骤。...如果前两次访问间隔小于72小时内，代码缓存就会启动。如果采用service worker来缓存脚本，那么chrome也会主动启动代码缓存。详细信息可以参阅 web 开发者的代码缓存指南。

93920

渐进式Web应用（PWA）入门教程（下）

上面就是使用全站HTTPS的主要原因了。假设您没有在您的网站中使用HTTPS，一个第三方的脚本就可以从其他的域名注入他自己的ServiceWorker，然后篡改所有的请求——这无疑是非常危险的。...我们一般在这里使用Cache API缓存一些必要的文件。 首先，我们需要提供如下配置 缓存名称（CACHE）以及版本（version）。应用可以有多个缓存存储，但是在使用时只会使用其中一个缓存存储。...该事件处理函数中，我们可以使用respondWith()方法来劫持HTTP的GET请求然后返回： 从缓存中取到的资源文件 如果第一步失败，资源文件将会从网络中使用Fetch API来获取（和service...不要缓存任何图片，视频和大文件 定时清理旧的缓存 提供一个“离线阅读”按钮，这样用户就可以选择需要缓存哪些内容了。 缓存刷新 示例代码中在发起请求之前会先查询缓存。...在HTTP Header中，就是： Cache-Control: max-age=31536000 页面，CSS和脚本文件可能变化的更频繁一些，所以你可以设置一个比较小的缓存超时时间（24小时），并确保在用户网络连接恢复时再次从服务器请求

77000

饿了么的 PWA 升级实践

我们已经使用 Webpack 在构建过程中进行 .vue 编译、文件名哈希等工作，于是我们编写了一个 webpack 插件来帮助我们收集需要缓存的依赖到一个“预缓存清单”中，并使用这个清单在每次构建时生成新的...Service Worker 文件。...在新的 Service Worker 被激活时，清单里的资源就会被请求与缓存，这其实与 SW-Precache 这个库的运行机制非常接近。 实际上，我们只对我们标记为“关键路由”的路由进行依赖收集。...而且，对于缓存在 Service Worker 配套的 Cache Storage 中的脚本，会在第一次执行后就触发 V8 的代码缓存，这对于我们的多页切换能提供不少帮助。...在构建时使用 Vue 预渲染骨架屏 你可能已经想到了，为了让骨架屏可以被 Service Worker 缓存，瞬间加载并独立于 JavaScript 渲染，我们需要把组成骨架屏的 HTML 标签、CSS

1.6K40

PWA - 令人惊奇的web用户体验新方法

file 提供类似于 APP 的使用体验（ 在 Android 上可以设置全屏显示，由于 Safari 支持度的问题，所以在 IOS 上并不可以 ），并且还能进行 ”推送通知” 。...被打开时，PWA 会展示一个有吸引力的闪屏。chrome 提供了可选选项，可以使 PWA 得到全屏体验。...旧的 Service Worker 脚本不再控制着页面，之后会被停止。 * 激活后( activated )：在这个状态会处理 activate 事件回调 (提供了更新缓存策略的机会)。...接下来看一下sw.js 主要做的这几件事情： 首先安装时会触发 install 事件，监听该事件可执行安装时要做的事情。示例中是缓存用于离线时使用的静态资源，这也是最常见的行为....由于 Service Worker 限制了使用 HTTPS 地址, 在 Android Chrome 打开需要借助 ngrok 生成的 HTTPS 地址, 这样才能把 demo 添加到首屏。

2.5K10

Web Worker

主线程中可以在 Worker 上添加 onmessageerror 方法，用于监听 Worker 的错误信息。...中引用其他脚本 这个与普通的 Worker 方法一样，使用 importScripts 调试方法 在浏览器中查看和调试 SharedWorker 的代码，需要输入 chrome://inspect/...在打开缓存之后，我们需要把要缓存的文件 add 进去，基本上所有类型的资源都可以进行缓存，例子中缓存了 css、js、html、png。...调试方法 在浏览器中查看和调试 ServiceWorker 的代码，需要输入 chrome://inspect/#service-workers 演示效果 上面代码中，我缓存了 131.png。...实际上它会把文件自动存到浏览器的 Cache Storage 中。我们打开浏览器可以看到。 常见使用场景 缓存资源文件，加快渲染速度 这个我们以语雀为例。

96750

【性能】688- 前端性能优化——从 10 多秒到 1.05 秒

浏览器再次跟服务器请求这个资源时，在 request 的 header 上加上 If-Modified-Since 字段，这个 header 字段的值就是上一次请求时返回的 Last-Modified...Service Worker 可以使你的应用先访问本地缓存资源，所以在离线状态时，在没有通过网络接收到更多的数据前，仍可以提供基本的功能（一般称之为 Offline First）。...onactivate 主要用途是清理先前版本的 service worker 脚本中使用的资源。 监听： 两种状态 终止以节省内存； 监听获取 fetch 和消息 message 事件。...销毁： 是否销毁由浏览器决定，如果一个 service worker 长期不使用或者机器内存有限，则可能会销毁这个 worker 。...有的同学就问， service worker 这么好用，这个缓存空间到底是多大？其实，在 Chrome可以看到，如图： 可以看到，大概有 30G ，我的站点只用了 183MB ，完全够用了 ?。

1.3K21

pwa-之service worker 基本概念

service worker是一个在==浏览器后台==运行的脚本。无论网络连接如何，能够使用Web应用程序意味着用户可以在飞机，地铁或连接受限或不可用的地方不间断地操作。...这将有助于我们加快加载时间，而不必每次访问同一网站时都必须从服务器获取。 当然，最重要的是，当我们网络不畅时，这些资源将可供我们使用。...你可以写在js文件里面，在html文件中引入，但不能在service worker的js中注册。 如何注册 先创建一个html文件 <!...我们需要一个单独的Tab来调试service worker线程。 在service worker中，它大部分的工作是在监听的事件中来完成的，比如在install事件中完成资源缓存。...在DevTools中的Source下面的service worker可以看到对应的js脚本 在这里可以调试 ? 同样可以使用console.log。

99131
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券