使用 Clear-Site-Data 强制清除客户端的浏览器缓存（cookie，存储，缓存）
Clear-Site-Data
Clear-Site-Data 响应头，表示清除当前请求网站有关的浏览器数据（cookie，存储，缓存）。它让 Web 开发人员对浏览器本地存储的数据有更多控制能力。
| Header type | Response header |
|---|---|
| Forbidden header name | no |
开源浏览器有哪些?
火狐
- 开源：由Mozilla基金会开发和维护，开源代码让任何人都可以查看、修改和改进其代码。
- 性能优秀：优化的渲染和JavaScript引擎提供了出色的页面加载和运行速度。
- 安全性：强大的安全特性，如跟踪保护、恶意软件阻止和自动更新等，以保护用户免受网络威胁。
- 自定义能力：提供了高度的自定义选项，包括外观、功能和行为等。
- 尊重用户隐私：内置了一系列隐私保护功能，如"隐私浏览"模式和强大的第三方跟踪阻止。
- 扩展系统：具有丰富的扩展库，使用户可以根据自己的需要添加各种功能。
Chromium
- 开源：Chromium是开源的，这意味着任何人都可以查看其代码，检查其安全性，或者对其进行修改和改进。
- 基础框架：Chromium是许多其他浏览器（包括Google Chrome和Microsoft Edge）的基础框架。
- 速度和性能：Chromium提供了快速的页面加载速度和出色的JavaScript处理性能。
- 安全性：Chromium包含了许多安全特性，如沙盒化技术、预防恶意软件和钓鱼攻击等。
- 扩展性：Chromium支持Chrome网上应用店的扩展，用户可以根据需要添加各种功能。
- 开发者工具：Chromium提供了一套完整的开发者工具，对网页开发和调试非常有帮助。
Otter Browser
- 高度自定义性：Otter Browser提供了丰富的配置选项，用户可以根据自己的需求定制浏览器的外观和行为。
- 基于Qt5：Otter Browser使用了Qt5框架，具有良好的跨平台兼容性。
- 模块化：Otter Browser的设计强调模块化，每个功能都是一个单独的模块，用户可以选择启用或禁用。
- 开源
浏览器的怪异模式和标准模式
怪异模式和标准模式
在很久以前的网络上，页面通常有两种版本：为网景（Netscape）的 Navigator 准备的版本，以及为微软（Microsoft）的 Internet Explorer 准备的版本。当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。
目前浏览器的排版引擎使用三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在标准模式下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现。
使用javascript Page Visibility API,判断用户是否关闭了浏览器窗口(html页面)
Page Visibility API
简介
有时候，开发者需要知道，用户正在离开页面。常用的方法是监听下面三个事件。
pagehidebeforeunloadunload
但是，这些事件在手机上可能不会触发，页面就直接关闭了。因为手机系统可以将一个进程直接转入后台，然后杀死。
- 用户点击了一条系统通知，切换到另一个 App。
- 用户进入任务切换窗口，切换到另一个 App。
- 用户点击了 Home 按钮，切换回主屏幕。
- 操作系统自动切换到另一个 App（比如，收到一个电话）。
上面这些情况，都会导致手机将浏览器进程切换到后台，然后为了节省资源，可能就会杀死浏览器进程。
以前，页面被系统切换，以及系统清除浏览器进程，是无法监听到的。开发者想要指定，任何一种页面卸载情况下都会执行的代码，也是无法做到的。为了解决这个问题，就诞生了 Page Visibility API。不管手机或桌面电脑，所有情况下，这个 API 都会监听到页面的可见性发生变化。
这个新的 API 的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网页，下面这些网页行为都是可以暂停的。
- 对服务器的轮询
- 网页动画
- 正在播放的音频或视频
document.visibilityState
这个 API 主要在document对象上，新增了一个document.visibilityState属性。该属性返回一个字符串，表示页面当前的可见性状态，共有三个可能的值。
新的HTTP标准在现代web缓存
New HTTP standards for caching on the modern web
If you run any large public-facing website or web application on the modern web, caching your static content in a CDN or other caching service is super important.
It's also remarkably
轻松理解HTTP缓存策略
上一篇文章我写了koa-static的源码解析，其中用到了HTTP的缓存策略，给返回的静态文件设置了一些缓存的头，比如Cache-Control之类的。于是我就跟朋友讨论了一下HTTP的缓存策略：
朋友说：“HTTP里面控制缓存的头(header)太多了，啥Cache-Control，ETag，Last-Modified，一大堆，乱七八糟的，而且之间逻辑关系不强，要掌握基本靠背！”
我有点惊讶：“为什么要去背这个呢？所有的技术都是为了解决问题而存在的，不了解问题而去单纯的学习技术，去，背，去，死记，确实很枯燥，而且效果不好。HTTP缓存策略只是为了解决客户端和服务端信息不对称的问题而存在的，客户端为了加快速度会缓存部分资源，但是下次请求时，客户端不知道这个资源有没有更新，服务端也不知道客户端缓存的是哪个版本，不知道该不该再返回资源，其实就是一个信息同步问题，HTTP缓存策略就是来解决这个问题的。如果我们跳出这种纯粹的技术思维，我们会发现生活中这种信息同步问题也很常见。而我们解决这些问题的思路很多时候都是司空见惯了，如果从这个角度来说，这个问题就很好理解！”
于是我给他讲了一个我小时候租光碟看奥特曼的故事。…
实践带你了解–http缓存
这次文章为了了解http缓存的机制,自己搭建nginx和设置nginx配置
网上的文章其实有很多,但是大部分都是文字表达,缓存这块又比较偏向理论,导致我一开始也是云里雾里的
所以这次我通过截图和步骤图来说明,并且进行文字补充, 不喜欢看文字的话其实看图片就行啦
以下每次截图都是无痕模式的…
聊一聊前端性能优化 CRP
什么是 CRP？
CRP又称关键渲染路径，引用MDN对它的解释：
关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM)，CSS Object Model (CSSOM)，渲染树和布局。
优化关键渲染路径可以提升首屏渲染时间。理解和优化关键渲染路径对于确保回流和重绘可以每秒 60 帧、确保高性能的用户交互和避免无意义渲染至关重要。…
Google Chrome 86 更新了—已全面阻止非HTTPS混合内容
2020年10月，Google 即将发布正式更新的Chrome浏览器86新版本。此次更新除了扩展该工具的实用性之外，最重要的一点的是将全面阻止所有非HTTPS混合内容的下载。
早在今年2月，Google 在Chromium博客发文称，为了增强下载防护体验，Chrome浏览器将开始阻止非“安全超文本传输协议” 的混合内容下载（即安全页面上非HTTPS下载），进一步确保安全性，直至最终完全取消对 Chrome 中不安全下载的支持。…
彻底弄懂浏览器缓存策略
Web 缓存介绍
- Web 缓存是指一个 Web 资源（如 html 页面，图片，js，数据等）存在于 Web 服务器和客户端（浏览器）之间的副本。
- 缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的 URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。
近期评论