这是我参与11月更文挑战的第16天,活动详情查看:2021最后一次更文挑战
Cookie 优化
早年间,由于浏览器功能简陋,程序员喜欢滥用 Cookie 以存放临时信息(后来浏览器提供了LocalStorage/SessionStorage
来做这件事)。
滥用行为导致 Cookie 的体积变得很大,以致于一个简单的 GET 请求的体积居然从几百字节变成几千字节了,怎么解决这个问题呢?
某些程序员不去规范 Cookie 的使用流程,想到了通过使用新的域名来发请求来绕开 Cookie 过大的问题。因为新域名的请求是不会附带本域名的 Cookie 的。
举例:
- qq.com 域名下的 Cookie 被滥用,导致网页中所有请求体积都很大。
- 程序员将所有 CSS、JS 和图片文件移到了
*.qqcdn.com
域名下,该域名下没有 Cookie,请求体积很小。 - 但所有的 AJAX 请求(如
qq.com/api/v1/users
)体积依然很大,程序员们装作没看见。
「没有任何 Cookie 的域名」被叫做 cookie-free domain
。CDN 一般都会使用单独的新域名,因此属于 cookie-free domain。
CDN(content delivery network 内容分发网络)
CDN 是专门用来传输静态文件的服务。举例:
- 服务器位于美国华盛顿,用户位于中国北京,二者相距约一万公里。
- 光速约为 3 亿米每秒,来回一趟至少需要 66 毫秒。而电子信号本质上就是光信号。
- 如果把服务器的内容复制到天津,距离用户就只有约一百公里。
- 光速来回一趟只需要 0.66 毫秒!
CDN 就是基于这一思路,把服务器的静态内容复制到全球各地,当用户访问时,DNS 会将域名动态解析到举例用户最近的 IP 上,以获得最快的访问速度。以百度为例:
index.html
放在www.baidu.com
上,含有三到五个 cookie 项。- 图片放在
dss0.bdstatic.com
上,这是一个 cookie-free 域名。 - CSS 文件和 JS 文件放在
ss1.bdstatic.com
上,这也是 cookie-free 域名。 - AJAX 请求的域名还是
www.baidu.com
,因为其 cookie 项并不多,没必要优化。
使用 CDN 的优势:
- 使用 cookie-free 域名,使得请求体积变小。
- 使用多域名,使得请求并行化,而且可以突破单域名的连接数量限制。
- 降低了传输距离,用户可以更快速地获得内容。
使用 CDN 的缺点:
- 费钱。把内容复制到多台服务器,需要购买更多机器、带宽和硬盘等。当然也可以购买第三方服务,国内的阿里云和七牛都提供 CDN 服务。
- 部署变复杂。部署工具需要在打包代码后,把代码上传到 CDN 服务器上。
- 可控性变低。如果你购买了第三方的 CDN 服务,一旦发生故障,就只能等别人修复了。
- 跨域问题。如 Canvas 不能读取跨域的图片文件,
window.onerror
不能捕获跨域 JS 文件的出错信息,这都需要用 CORS 响应头来解决。
但总的来说,使用 CDN 利大于弊。
最后说一句
如果这篇文章对您有所帮助,或者有所启发的话,帮忙关注一下,您的支持是我坚持写作最大的动力,多谢支持。