Web前端开发技术

Appearance

CDN ​

元信息 ​

  • 目标：理解 CDN 为什么能让"引用别人的 js"又快又省——资源预缓存到离用户更近的节点；前端由此可直接远程引用公共库而无需下载到本地
  • 关键概念：CDN、内容分发网络、静态资源、节点、远程引用、同源策略（https 场景）
  • 关联阶段：cp3
  • 常见误区：以为引用 CDN 的库要先把文件下载下来（直接 src 远程地址即可）；不知道 http/https 混用会被浏览器拦截（协议要与站点一致）；把"加速"理解为只对下载方有利（带宽节约是站点侧的另一面收益）

示例 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

如果你的网站采用https协议，可将上述引用中的http换成https，以符合浏览器的同源策略

什么是CDN？ ​

内容分发网络(Content Delivery Network)： 将静态资源(如静态网页、图片、js等资源文件等)预先缓存或同步到全球的各个节点，从而

  • 加速终端用户的访问速度：总是使用离终端用户更近的节点，尤其是全球性网站
  • 节约网络带宽：各个网站共享的静态资源集中到一处，无需反复下载

对于前端开发者而言，则无需将相应的js库下载至本地，而是直接远程引用CDN中的资源即可。

参考