开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

服务工作者不应缓存整个页面

是指在使用服务工作者（Service Worker）进行页面缓存时，不应将整个页面缓存起来。

服务工作者是一种在浏览器背后运行的脚本，可以拦截和处理网络请求，实现离线缓存、消息推送等功能。在前端开发中，服务工作者常用于实现离线访问和提升网页性能。

缓存整个页面可能会导致以下问题：

空间占用：整个页面通常包含大量的HTML、CSS和JavaScript代码，缓存整个页面会占用大量的存储空间，尤其是对于移动设备来说，存储空间有限。
更新困难：如果缓存了整个页面，当页面内容发生变化时，需要更新整个页面的缓存。这会增加网络请求和带宽消耗，并且可能导致用户看到过时的页面内容。
动态内容无法更新：如果页面中包含动态生成的内容，如用户个人信息、实时数据等，缓存整个页面会导致这些动态内容无法及时更新。

因此，服务工作者通常应该选择性地缓存页面的一部分或者缓存页面所需的资源，而不是缓存整个页面。可以通过以下方式实现：

缓存策略：根据页面的特点和需求，选择性地缓存页面的关键资源，如HTML模板、CSS样式表、JavaScript文件、图片等。可以使用缓存策略来控制资源的更新和过期时间，以确保用户获取到最新的内容。
动态更新：对于动态生成的内容，可以通过在页面中使用AJAX或其他技术，从服务器获取最新的数据并更新页面内容。服务工作者可以拦截这些请求，并将响应缓存起来，以便下次离线访问时使用。
版本控制：为了确保缓存的资源和页面内容始终保持最新，可以在服务工作者中使用版本控制机制。当页面内容发生变化时，更新服务工作者的版本号，以触发缓存的更新。

腾讯云相关产品推荐：

腾讯云CDN：提供全球加速、内容分发、缓存加速等功能，可用于加速静态资源的访问速度。链接地址：https://cloud.tencent.com/product/cdn
腾讯云对象存储（COS）：提供高可靠、低成本的云存储服务，可用于存储和管理静态资源。链接地址：https://cloud.tencent.com/product/cos
腾讯云云函数（SCF）：提供事件驱动的无服务器计算服务，可用于处理动态内容的生成和更新。链接地址：https://cloud.tencent.com/product/scf

相关搜索:DjangoCMS -如何缓存整个页面？OutputCache和RenderAction缓存整个页面服务工作者缓存比http缓存快吗？Html/php页面被缓存(客户端)不应该 React-js服务工作者缓存问题如何防止服务工作者删除缓存，PWA 为什么服务工作者缓存所有图像？为什么服务工作者在3个项目之后突然无法缓存页面从Android API中清除服务工作者缓存验证访问令牌后的服务工作者缓存如何通过服务工作者更新缓存的资源是否从服务工作者缓存中删除特定文件？如何从服务工作者中删除多个打开缓存出于测试目的，强制服务工作者缓存失败服务工作者不会缓存每个API GET (React，WorkBox)如何删除本地主机上的服务工作者缓存创建react应用服务工作者nginx无缓存配置持久化服务工作者和缓存HTML和PNG文件用于页面url的Angular Remove服务工作者如何在Redis中缓存整个next.js的HTML页面？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Nginx+Varnish+Angular universal实现服务端页面渲染缓存

项目使用angular universal实现服务端渲染，为了减轻服务器的压力，需要将用户频繁访问的页面进行缓存，这样就不必每次都去渲染相同的页面（例如首页），angular universal在features...中有提到考虑加入缓存，但就目前来说，varnish是个不错的选择，但是varnish不支持https，所以还需要用nginx进行端口的转发总的思路 1.nginx监听80端口将http重定向到https...2.nginx监听443端口，并将443端口的请求转发到8080端口 3.varnish监听8080端口的请求，如果与缓存中的页面匹配，则返回页面，如果没有匹配的页面，则请求pm2启动的服务总的流程...backend，实现多域名同时使用varnish缓存 backend pcbeta { .host = "127.0.0.1"; .port = "4001"; } //对不需要使用...cookie的页面屏蔽cookie检查，提高命中率，cookie不同varnish会认为是不同的页面,这里只对包含home路径的页面进行检查 sub vcl_recv{ if (!

9272 0

Web性能优化之Worker线程(下)

这可以让网页在「没有网络连接」的情况下正常使用，因为部分或全部页面可以从服务工作线程缓存中提供服务。...2. claim()可用于「不希望等待页面重新加载」而让服务工作线程开始管理页面生命周期 Service Worker 规范定义了 6 种服务工作者线程可能存在的状态：已解析parsed 安装中installing...新创建的服务工作者线程实例「进入到安装中状态」。安装中状态「安装中状态」是执行「所有」服务工作线程设置任务的状态。这些任务包括在服务工作线程控制页面前必须完成的操作。...❞ 如果浏览器中没有活动服务工作者线程，这个新服务工作者线程会「自动」到达激活中状态。...控制反转与线程持久化 ❝服务工作者线程遵循控制反转Inversion of Control（IOC）模式并且是「事件驱动」的 ❞ 意味着服务工作线程「不应该依赖」工作线程的全局状态。

2.5K2 0

J2EE 核心模式学习理解和记录

一个较大的视图拆解成若干个小的子视图，这些小的子视图应当具备独立的展示内容，但是页面的布局不应当有其中的任一子视图控制，而可以落到某一个整体的主题定义中去。...服务到工作者：Service To Worker。集中控制权管理和请求的处理，再把控制权交给视图之前获取表现模型。视图则根据获得的表现模型生成一个动态响应。...服务到工作者和分配器视图是非常类似的两种模式，前者以进视图前的逻辑处理为核心，后者才真正以视图为核心。...封装对业务服务的访问，隐藏服务层具体实现细节，主要为降低客户端和服务层之间的耦合。除了隐藏服务细节、处理服务异常等基础功能以外，还可以做服务的缓存。...以我参与的项目的缓存的使用举例，模型 DAO 并不做任何的缓存行为，数据库使用自身的缓存能力，并且在必要时冗余字段，这是基于数据粒度的基础缓存；到了调用 DAO 的业务层面，比如 Service 层，才进行业务模型粒度的缓存

6381 0

数据库PostrageSQL-服务器配置资源消耗

巨型页面的使用会导致更小的页面表以及花费在内存管理上的 CPU 时间更少，从而提高性能。更多有关Linux上使用巨型页面的细节请见Section 18.4.5。巨型页在Windows上被称为大页面。...那常常会导致大幅度压缩的事务延迟，但是也有一些情况（特别是负载超过shared_buffers但小于OS 页面高速缓存）的性能会降低。这种设置可能会在某些平台上没有效果。...如果发生这种情况，工具性操作将使用比预期数量少的工作者运行。默认值为2。将这个值设置为0可以禁用工具性命令对并行工作者的使用。注意并行工具性命令不应该消耗比同等数量非并行操作更多的内存。...并行工具性命令把资源限制maintenance_work_mem当作对整个工具性命令的限制，而不管其中用到了多少个并行工作者进程。不过，并行工具性命令实际上可能仍会消耗更多的CPU资源和I/O带宽。...这常常会导致极大降低的事务延迟，但是也有一些情况中（特别是负载超过shared_buffers但低于 OS 的页面高速缓存时），性能可能会下降。这个设置可能在某些平台上没有效果。

1.5K1 0

系统设计：网络爬虫的设计

可伸缩性：我们的服务需要具有可伸缩性，以便它可以爬网整个Web并用于获取数亿个Web文档。可扩展性：我们的服务应该以模块化的方式设计，并期望新的将向其添加功能。...基于对于下载的文档的MIME类型，工作者调用每个处理的处理方法与该MIME类型关联的模块。此外，我们的HTML处理模块将从页面中提取所有链接。...设计分布式URL边界时，有以下要求： 1.我们的爬虫程序不应该通过从服务器下载大量页面而使服务器过载。 2.我们不应该让多台机器连接一个web服务器。...虽然这可以放入现代服务器的内存中，但如果我们没有足够的可用内存，我们可以在每台服务器上保留更小的基于LRU的缓存，所有内容都由持久性存储支持。重复数据消除测试首先检查缓存中是否存在校验和。...避重复请求后，我们可以通过构建本地DNS服务器来开始缓存DNS结果。

6.2K24 3

Web性能优化_知识点精讲

Worker的类型（DSS） Worker 线程规范中定义了「三种主要」的工作者线程专用工作线程Dedicated Web Worker 专用工作者线程，通常简称为工作者线程、Web Worker...Web Worker 专用工作线程是最简单的 Web 工作者线程，网页中的脚本可以创建专用工作者线程来执行在「页面线程之外」的其他任务。...这可以让网页在「没有网络连接」的情况下正常使用，因为部分或全部页面可以从服务工作线程缓存中提供服务。...每次加载「有限的页面的内容」，可以提高关键渲染路径。不要在加载页面时加载这个整个页面的 CSS、JavaScript 和 HTML。...---- 从 URL 输入到页面加载整过程分析整个过程大致可以分为「三个阶段」客户端发起请求阶段服务端数据处理请求阶段客户端页面渲染阶段客户端请求阶段的瓶颈点客户端发起请求阶段用户在浏览器输入

1.3K2 0

JavaScript工作原理（八）：Service Workers，生命周期和应用案例

在这种情况下，您可以看到服务工作者文件位于域的根目录。这意味着Service Worker的范围将是整个来源。...如果我们在/example/sw.js注册Service Worker文件，那么服务工作者将只能看到URL以/example/（即/example/page1/，/example/page2/）开头的页面的...这一步是管理以前缓存的好机会。一旦激活，Service Worker将开始控制所有属于其范围的页面。一个有趣的事实是：首次注册Service Worker的页面将不会被控制，直到该页面再次被加载。...这里您将看到如何拦截请求并返回创建的缓存（并创建新缓存）。安装Service Worker并且用户导航到另一个页面或刷新他所在的页面后，Service Worker将收到fetch事件。...更新服务工作者 当用户访问您的Web应用程序时，浏览器会尝试重新下载包含Service Worker代码的.js文件。这发生在后台。

1.3K1 0

从单体架构迁移到 CQRS架构

DTO 包含所有需要在这个页面上呈现的信息。为什么我们要强调读 / 写分离？我们不能在读 / 写路径上使用同一个程序吗？因为我们想在将来更好地优化我们的系统。写路径有特定的优化方法，读路径也是如此。...比如说，做一个缓存，在读路径上可以使用预读缓存来减少响应时间。而且，写路径可以通过写入缓存来优化。其次，也可以把写入操作异步执行。...这样一来，在读路径上，应用服务的实现变得更加简单。应用服务会成为一个很薄的读取层，只负责分页、排序等工作。发出请求后，客户端很容易从数据库中检索到 DTO。...写应该专注于持久化，各种读视图不应该在写路径上处理。但是，读路径上只有读，谁该准备那些读视图？因此，完整的解决方案是这样的：左边的写路径和右边的读路径已经在 CQS 部分介绍过了。...消息队列加工作者。这是异步数据复制的一种常见做法。在写入数据库时，会创建一个事件并发送到消息队列，然后由工作者处理。提取 - 转换 - 加载：这个时间间隔最长，从几分钟到几小时不等。

4592 0

Service Workers - JavaScript API 简介

类似一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker 那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器...示例中将其改为了根目录，即对整个站点生效。另外应意识到这一点：Service Worker 没有页面作用域的概念，作用域范围内的所有页面请求都会被当前激活的 Service Worker 所监控。...服务工作者启用以下功能，这些功能也是 PWA的核心：离线功能定期后台同步推送通知离线功能 Service Worke 通过缓存资源和拦截网络请求来提供离线功能，这些请求可以与先前缓存的资源一起使用...定期后台同步正如在引言中已经提到的那样，Service Worker 与其他服务工作者在一个单独的线程上运行，所以即使关闭页面，它们也可以执行其代码。此功能对于执行后台同步和提供推送通知很重要。...要使用推送通知，需要设置一台服务器，该服务器会将通知推送给所有客户端。由于Service Worker在后台在另一个线程上运行，因此即使页面当前未打开，用户也可以看到推送通知。

9422 0

从单体架构迁移到 CQRS 后，我觉得 DDD 并不可怕

DTO 包含所有需要在这个页面上呈现的信息。为什么我们要强调读 / 写分离？我们不能在读 / 写路径上使用同一个程序吗？因为我们想在将来更好地优化我们的系统。写路径有特定的优化方法，读路径也是如此。...比如说，做一个缓存，在读路径上可以使用预读缓存来减少响应时间。而且，写路径可以通过写入缓存来优化。其次，也可以把写入操作异步执行。...这样一来，在读路径上，应用服务的实现变得更加简单。应用服务会成为一个很薄的读取层，只负责分页、排序等工作。发出请求后，客户端很容易从数据库中检索到 DTO。...写应该专注于持久化，各种读视图不应该在写路径上处理。但是，读路径上只有读，谁该准备那些读视图？因此，完整的解决方案是这样的：左边的写路径和右边的读路径已经在 CQS 部分介绍过了。...消息队列加工作者。这是异步数据复制的一种常见做法。在写入数据库时，会创建一个事件并发送到消息队列，然后由工作者处理。提取 - 转换 - 加载：这个时间间隔最长，从几分钟到几小时不等。

8914 0

分布式系统中的线程与进程

在两个进程之间切换CPU的开销同样会比较大，除了要保存CPU环境（包括寄存器值、程序计数器、堆栈指针等）以外，操作系统还必须修改内存管理单元的寄存器，并且将位于转换后备缓冲器中的地址转换缓存内容标记为无效...首先将文本显示出来以便用户查看，并且提供页面滚动之类的功能，同时继续获取组成页面的其他文件，比如图像等。在收到这些文件之后再显示它们。用户不必等待浏览器取得整个页面的所有组件就能够查看页面。　　...在使用多线程客户的时候，可以与不同服务器副本建立连接，这样就可以并行地进行数据传输了，并且确保整个Web文档完全显示出来所需的时间与使用无复制的服务器的情况相比要短得多。...工作者线程在本地文件系统上执行阻塞的read调用，执行该调用将会导致该线程被挂起直到数据从磁盘上读出为止。如果该线程被挂起了，就选择另一个线程接着执行。简单总结下服务器集群。　　...也就是说，运行在远程机器上的客户应用程序不应该需要知道集群的内部组织结构。

9181 0

窥探Nginx内部实现:如何为性能和规模进行设计

NGINX具有主进程（执行诸如读取配置和绑定到端口的特权操作）以及多个工作者进程和辅助进程。 ? 在这个四核服务器上，NGINX主进程创建了四个工作者进程和一些管理磁盘内容缓存的缓存辅助进程。...缓存加载程序进程在启动时运行，将基于磁盘的缓存加载到内存中，然后退出。保守调度，资源需求低。...缓存管理器进程定期运行，并从磁盘缓存中删除条目，以使其保持在配置的大小之内。 工作者进程完成所有工作！它们处理网络连接，读取内容和磁盘写入，并与上游服务器进行通信。...这些进程可以使用共享内存来共享缓存数据、会话持久性数据和其他共享资源。 Nginx工作者进程内部 ? 每个NGINX工作者进程都使用NGINX配置进行初始化，并由主进程提供一组监听套接字。...然后，您可以向旧的主进程及其工作者进程通知其正常退出。整个过程在控制NGINX（http://nginx.org/en/docs/control.html?

9765 0

如何在 Vue 项目中缓存字体文件以提高性能

本文将详细探讨如何在 Vue.js 项目中优化字体文件的加载和缓存，以提高页面性能。一、为什么要缓存字体文件？...这些文件在页面初次加载时会通过 HTTP 请求下载到客户端。当用户频繁访问同一应用时，如果不对这些文件进行有效缓存，每次访问都需要重新加载字体文件，这不仅增加了网络开销，还可能导致页面加载缓慢。...以下是一些常见的优化策略：使用浏览器缓存利用服务工作者（Service Worker）使用渐进式 Web 应用（PWA）字体子集优化使用 Font-Spider 1....利用服务工作者（Service Worker） Service Worker 是一种可以在后台运行的脚本，可以拦截和缓存网络请求，提供离线支持，并加速资源加载。我们可以使用它来缓存字体文件。...通过浏览器缓存、服务工作者（Service Worker）、PWA、字体子集优化以及 font-spider 等方式，你可以减少字体文件的加载时间，并确保用户在离线或网络状况不佳的情况下依然能够快速访问你的应用

1201 0

数据库PostrageSQL-日常数据库维护工作

如果它了解到在该页面上的所有元组都是可见的，堆获取就可以被跳过。这对大数据集很有用，因为可见性映射可以防止磁盘访问。可见性映射比堆小很多，因此即使堆非常大，可见性映射也可以很容易地被缓存起来。...防止事务 ID 回卷失败 PostgreSQL的 MVCC 事务语义依赖于能够比较事务 ID（XID）数字：如果一个行版本的插入 XID 大于当前事务的 XID，它就是“属于未来的”并且不应该对当前事务可见...VACUUM通常会跳过不含有任何死亡行版本的页面，但是不会跳过那些含有带旧 XID 值的行版本的页面。要保证所有旧的行版本都已经被冻结，需要对整个表做一次扫描。...做这个操作的唯一方法是停止服务器并且以单一用户启动服务器来执行VACUUM。单一用户模式中不会强制该关闭模式。关于使用单一用户模式的细节请见postgres参考页。 24.1.5.1....如果表relfrozenxid值比vacuum_freeze_table_age事务年龄更大，整个表将被扫描以冻结旧元组并增长relfrozenxid，否则只有从上次清理以来被修改的页面会被扫描。

1.6K2 1

Java最新简答题

1.简单模式 2.工作者模式 3.广播模式 4.路由模式 5.通配符模式 6.RPC 7.消息确认模式 4.Redis的常用存储结构有哪些 String，字符串，是 Redis 的最基本的类型...5.redis缓存雪崩，缓存穿透缓存雪崩，即缓存同一时间大面积的失效，这个时候又来了一波请求，结果请求都怼到数据库上，从而导致数据库连接异常。...缓存穿透，即故意去请求缓存中不存在的数据，导致所有的请求都怼到数据库上，从而数据库连接异常。...C 隔离性（Isolation）：对数据进行修改的所有并发事务是彼此隔离的，这表明事务必须是独立的，它不应以任何方式依赖于或影响其他事务。...@RestController类中的所有方法只能返回String、Object、Json等实体对象，不能跳转到模版页面。

7042 0

关于如何做一个“优秀网站”的清单——规范篇

从详细信息页面返回，保留上一个列表页面上的滚动位置确认方法：在应用程序中查找列表视图。向下滚动点击一个项目进入详细页面。在详细页面上滚动。...■还可以在服务器上查看使用PRPL模式和工具，如PageSpeed Module。缓存网站使用缓存优先的原则加载确认方法： ■将网络仿真设置为最慢的设置并浏览应用程序。...应用程序在离线时不应比缓慢的连接感觉更快改善方法：尽可能使用缓存优先响应。也可以查看我们的服务工作者库，使得实现这些模式更容易。...（服务工作者库地址： https://developers.google.com/web/tools/service-worker-libraries/）站点适当地通知用户何时离线确认方法...确认方法： ■创建一个服务帐户，并确保您看到保存密码/帐户对话框显示。点击“保存”。 ■清除网站的Cookie（通过点击挂锁或Chrome设置）并刷新网站。

3.2K7 0

MYSQL POLARDB 学习系列之拆解 POLARDB 6 Auto-Scaling 与性能优化（翻译）

如果敢兴趣可以加 liuaustin3 微信，加到polardb 的知识分享群和文章问题询问群，如果可能还会拉上polardb的厂商的一些工作者，（争取，需要征得人家的同意）来更好的学习POLARDB...在理想的状态下，即使当数据库重启或者跨节点迁移的过程中，应用也不应该感知到任何异常，甚至像数据库无法连接，事务被终止，或者长时间的没有响应的状态下，也能具备此项能力。...因此，当切换事件发生时，代理可以通知新的RW节点从最近的保存点恢复执行，这避免了回滚整个事务，并显著提高了迁移的透明度。...(个人认为能做到上面所说的问题，并且能做到，在各种数据库中，包含分布式系统，都是非常不容易的一件事情) 回想一下，在切换过程中，活动事务需要暂停，直到新的RW节点接管服务。...同时，存储引擎在后台预取包含这些键的页面。当连接缓冲区已满时，缓冲区中的行将与内部表连接，我们预计所需的大多数页面应该已经加载到缓存中。

6672 0

Nginx架构概述

因此，跨多个工作者进程共享的工作量可以更有效地利用服务器资源。在磁盘利用型或CPU负载型模式下，应该调整nginx工作者进程的数量。这里有个基本的规则，但系统管理员应该为其工作负载尝试几个配置。...缓存加载器，缓存管理器和工作者进程作为无特权用户运行。...关于监视nginx实例的行为，系统管理员应该关注工作者进程，因为它们是反映Web服务器实际日常操作的进程。缓存加载器进程负责检查磁盘缓存项目，并使用缓存元数据填充nginx的内存数据库。...缓存Key是可配置的，并且可以使用不同的请求特定参数来控制进入缓存的内容。缓存Key和缓存元数据存储在共享存储器段中，高速缓存加载器，缓存管理器和工作者进程可以访问它们。...当响应写入缓存目录结构时，文件的路径和名称从代理URL的MD5散列中派生。将内容放置在缓存中的过程如下：当nginx从上游服务器读取响应时，内容首先写入缓存目录结构之外的临时文件。

1.6K8 0

POLARDB IMCI 白皮书云原生HTAP 数据库系统一数据压缩和打包处理与数据更新

整个过程不需要等待RW节点提交事务。例如，在日志项299中的最终提交之前，具有TID 100的事务中的DML操作将被传输。...在图6的左侧，第一阶段根据PageID将REDO日志分发给不同的工作者，并且每个工作者按照LSN的顺序重放页面更改以重现DML的细节。分发过程与第二阶段（第5.4节）类似，但是以页面粒度进行。...然后，工作者将差分字段应用于提取的行中以重放页面更改，并在应用后组装插入DML。为了真正将操作组合成逻辑DML，每个操作还必须补充其表模式。工作者通过记录在页面上的表ID来获取表模式信息。...如果属于，则工作者进一步检查该条目的主键是否在活动事务中被重复插入（通过一个主键集合）。注意，重复的主键插入不是用户DML。因此，重复使用REDO日志会导致重放所有页面更改。...因此，PolarDB-IMCI创建一个临时的RID定位器，而不是更新RID全局定位器以缓存新的PK到RID映射关系。

2242 0

Http响应头里Cache-Control：no-cache、max-age=””和no-store

响应头：Cache-Control：no-cache，强制每次请求直接发送给源服务器，而不经过本地缓存版本的校验。...拓展： HTTP1.0 HTTP1.0中通过Pragma 控制页面缓存，通常设置的值为no- cache，不过这个值不这么保险，通常还加上Expires置为0来达到目的。...但是如我们刻意需要浏览器或缓存服务器缓存住我们的页面这个值则要设置为 Pragma。...HTTP1.1 HTTP1.1中启用Cache-Control 来控制页面的缓存与否，这里介绍几个常用的参数： no-cache，浏览器和缓存服务器都不应该缓存页面信息； public，浏览器和缓存服务器都可以缓存页面信息...； no-store，请求和响应的信息都不应该被存储在对方的磁盘系统中； must-revalidate，对于客户机的每次请求，代理服务器必须想服务器验证缓存是否过时目前Cache-Control请求字段被各个浏览器支持的较好

4.8K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭