Web开发须知的浏览器内幕 缓存与存储篇(2)

简介: 本文禁止转载,由UC浏览器内部出品。3. HTTP Cache综述HTTP Cache是完全按照IETF规范实现的,最新的RFC规范地址是 https://tools.ietf.org/html/rfc7234。

本文禁止转载,由UC浏览器内部出品。

3. HTTP Cache

综述

HTTP Cache是完全按照IETF规范实现的,最新的RFC规范地址是
https://tools.ietf.org/html/rfc7234。它的作用就是保存可缓存的响应以备重新使用,在下次请求时可减少响应时间和网络带宽。只有GET和HEAD method会缓存。

浏览器的优化

浏览器是过滤了部分没有意义进行缓存的响应头才保存到磁盘,例如Connection(keep-alive)、www-authenticate等。这能减少耗时较多的磁盘IO时间。另外Cookie也不会保存在HTTP Cache,而是存到专门的Cookie Storage。

新的规范允许先使用后验证(stale-while-revalidate)https://tools.ietf.org/html/rfc5861

在隐身模式下,不存在磁盘读写的HTTP Cache。
http://www.chromium.org/user-experience/incognito
但是某些浏览器厂商可能做优化,在临时文件夹中读写,退出或重启即删。

容量

容量是以整体计算的,不区分Domain。

Android WebView是20MB。iOS WebView也可能是20MB(根据https://github.com/gnustep/base/blob/master/Source/NSURLCache.m,不确定GNUstep是否也是Apple的源码)。

PC上的Chromium是以80MB为基准结合磁盘可用空间来考虑的,最大是320MB。算法是:

// js伪代码
if (可用空间 < 100MB)
  容量 = 80%的可用空间  // < 80MB
else if (可用空间 < 800MB)
  容量 = 80MB
else if (可用空间 < 2000MB)  // 约2GB
  容量 = 10%的可用空间  // < 200MB
else if (可用空间 < 20000MB)  // 约20GB
  容量 = 200MB
else  // >= 20000MB
  容量 = Math.min(1%的可用空间, 320MB)  // 200MB <= 容量 <= 320MB

其它基于Chromium开发的浏览器可能会修改这个算法,特别是移动浏览器会扩大那个常量值,以更高容量来提高资源复用数(嗯,不是复用率)。

淘汰

淘汰算法是一般是LRU,但在一些场景会结合文件大小、时间因素等做进一步优化。Cache的管理模块会记录总的缓存大小,每次创建新的缓存时会判断是否缓存是否超出容量限制,满了就会按LRU淘汰一定比例的缓存。

浏览器需要对缓存的文件进行索引,如果这个索引损坏,浏览器会删除所有的缓存。用户也可以通过设置界面来删除。此外,第三方程序也会做清理。

Revalidation

用户点击刷新按钮,会强制走revalidate流程,其它的情况都按照规范来执行。

RFC规范不只是为服务器和浏览器设计的,还考虑了网络中的各种节点,比如代理服务器、CDN服务器、智能路由等。

Chromium肯定是严格遵守RFC规范的,但第三方浏览器通常会破坏这些规范来获得一定的性能提升。比如更宽松的缓存条件。

Chromium代码参考:http_response_headers.cc : RequiresValidation

后端优化

后端需要在响应中添加Cache-Control来利用浏览器缓存。

  • Expires不要超过一年。
  • 稳定的文件应该加上max-age。max-age不要大于2^31,以免大于int32而变成负数。
  • Some HTTP/1.0 caches might not implement Cache-Control.对HTTP 1.0可以使用Pragma

没有任何与过期相关的指令的话,是由client端决定是否缓存的。Chromium有缓存,但再次请求的时候并不会走Revalidate流程,还是会得到200 OK。

因为HTTP Cache以URL为key,所以不想用以前的缓存,则可以更换URL,例如加不同的query、改文件名(如加上MD5或版本号)等。URL是忽略锚点的。

要做性能优化的同学,可以在协议文档里淘金。鉴于网上也有不少文章,这里不做整理了。

4. Cookie Storage

综述

因为Cookie是在多个请求头中复用数据的,所以需要从响应头中抽取出来另外保存。而且Cookie有自己的生命周期管理语法,就有独立的模块来管理。Cookie数据同时保存在内存和磁盘。

容量

容量是规范里就有建议最小值的。最新规范是RFC6265,它引用两个比较旧的规范RFC2965RFC2109

其中最老的规范RFC2109的6.3.1节中就有说明:

拒绝服务攻击
   浏览器应该按照host或域名设置Cookie的数量和数据大小上限。
Denial of Service Attacks
   User agents may choose to set an upper bound on the number of cookies
   to be stored from a given host or domain name or on the size of the
   cookie information.  Otherwise a malicious server could attempt to
   flood a user agent with many cookies, or large cookies, on successive
   responses, which would force out cookies the user agent had received
   from other servers.  However, the minima specified above should still
   be supported.

Chromium的实现是:
- 每个Cookie的最大长度为4096 bytes。大于这个长度的Cookie将不被处理,即不会保存。
- 每个域的最大数量是180个
- 总体的个数是3300个

这里有各个浏览器的Cookie限制列表:http://browsercookielimits.squawky.net/

内存缓存

从容量可知,所有Cookie占用的最大内存为3300*4K ≈ 13M。这点内存在手机上也是支撑得了的,所以Chromium会把硬盘上的全部Cookie数据都读到内存,每次发送请求都是在内存中查找,所以速度很快。在收到响应,需要创建或更新Cookie时,Chromium才会去写硬盘。而这个写操作是在非网络线程中完成的,避免慢速的文件IO占用网络线程的时间。

内存中的组织是以eTLD+1为key放在multimap里。

Chromium用SQLite存放cookie。在PC上是对value加密的。在iOS不加密,因为它的沙箱机制足够完善了,除非越狱。

Chromium把增删改表示为操作,向数据库发指令,而不是全部写一次。它是在后台线程flush。每30秒或满512次操作就直接Flush。

参考
http://www.quantum-step.com/download/sources/mystep/Foundation/Sources/NSHTTPCookieStorage.m
Apple是用了系统的NSHTTPCookieStorage。是全写的。

(注:本节的描述经过简化,非真实完整的实现)

淘汰

每次创建或更新Cookie就会进行垃圾回收的判断。有下列的规则:
1. 先淘汰过期的。即超出Max-Age指定时间。
2. 如果超出容量,则会按LRU规则(这里的used是指accessed)淘汰掉300个Cookie。
3. 如果最近30天内有访问过,即使超出容量也不会淘汰掉。

下面是Chromium源码中的部分注释供参考。

// Any cookies accessed more recently than kSafeFromGlobalPurgeDays will not
// be evicted by global garbage collection, even if we have more than
// kMaxCookies.  This does not affect domain garbage collection.
const int CookieMonster::kSafeFromGlobalPurgeDays = 30;


const size_t CookieMonster::kPurgeCookies = 300;

const size_t CookieMonster::kDomainCookiesQuotaLow = 30;
const size_t CookieMonster::kDomainCookiesQuotaMedium = 50;
const size_t CookieMonster::kDomainCookiesQuotaHigh =
    kDomainMaxCookies - kDomainPurgeCookies - kDomainCookiesQuotaLow -
    kDomainCookiesQuotaMedium;

开发建议

  • 浏览器可能会被用户设置成禁用Cookie。当确实需要Cookie而发现获取不了时,请做好一定的提示,提升用户体验。
  • 设好max-age,不要让冗余的cookie加入到请求头里,可加速连网过程。
  • 因为都在内存,Cookie操作的时耗较少,但太大的cookie会在连网阶段造成较高的延时。还是乖乖地加上Expire吧。
目录
相关文章
|
3月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
214 3
|
10天前
|
Web App开发 编解码 vr&ar
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
使用Web浏览器访问UE应用的最佳实践
|
1月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
2月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
233 45
|
2月前
|
人工智能 前端开发 计算机视觉
Inpaint-Web:纯浏览器端实现的开源图像处理工具
在刷短视频时,常看到情侣在景区拍照被路人“抢镜”,男朋友用手机将路人“P”掉,既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web,可在浏览器端删除照片中的部分内容,非常酷。该项目基于 WebGPU 和 WASM 技术,支持图像修复与放大,已在 GitHub 上获得 5.1k Star。项目地址:[GitHub](https://github.com/lxfater/inpaint-web)。
81 3
 Inpaint-Web:纯浏览器端实现的开源图像处理工具
|
2月前
|
存储 缓存 监控
后端开发中的缓存机制:深度解析与最佳实践####
本文深入探讨了后端开发中不可或缺的一环——缓存机制,旨在为读者提供一份详尽的指南,涵盖缓存的基本原理、常见类型(如内存缓存、磁盘缓存、分布式缓存等)、主流技术选型(Redis、Memcached、Ehcache等),以及在实际项目中如何根据业务需求设计并实施高效的缓存策略。不同于常规摘要的概述性质,本摘要直接点明文章将围绕“深度解析”与“最佳实践”两大核心展开,既适合初学者构建基础认知框架,也为有经验的开发者提供优化建议与实战技巧。 ####
|
2月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
44 7
|
2月前
|
存储 缓存 前端开发
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
43 1
|
2月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
53 2