web性能优化技巧篇之 cookie和CDN

这是我参与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 项并不多,没必要优化。

image.png

使用 CDN 的优势:

  1. 使用 cookie-free 域名,使得请求体积变小。
  2. 使用多域名,使得请求并行化,而且可以突破单域名的连接数量限制。
  3. 降低了传输距离,用户可以更快速地获得内容。

使用 CDN 的缺点:

  1. 费钱。把内容复制到多台服务器,需要购买更多机器、带宽和硬盘等。当然也可以购买第三方服务,国内的阿里云和七牛都提供 CDN 服务。
  2. 部署变复杂。部署工具需要在打包代码后,把代码上传到 CDN 服务器上。
  3. 可控性变低。如果你购买了第三方的 CDN 服务,一旦发生故障,就只能等别人修复了。
  4. 跨域问题。如 Canvas 不能读取跨域的图片文件,window.onerror 不能捕获跨域 JS 文件的出错信息,这都需要用 CORS 响应头来解决。

但总的来说,使用 CDN 利大于弊。

最后说一句

如果这篇文章对您有所帮助,或者有所启发的话,帮忙关注一下,您的支持是我坚持写作最大的动力,多谢支持。

Supongo que te gusta

Origin juejin.im/post/7033757204691812360
Recomendado
Clasificación