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

·  阅读 429
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 利大于弊。

最后说一句

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

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改