javascript - 通过 CDN 或 minifiy/concat 加载资源并为自己服务?

标签 javascript css minify bundling-and-minification

<分区>

在提供静态 css/js/etc 资源时,可以选择使用 cdn 或使用您自己的服务器。

使用 CDN,您可以包含很多内容,但它们已经可以缩小。 或者,您可以将所有文件缩小并连接成一个 css 包和一个 js 包。

哪种方法更有效/性能更好,为什么会这样?

最佳答案

有趣的问题。我会说这取决于。

使用 CDN 可能比使用您自己的服务器慢。这主要是因为 CDN 驻留在另一个域中,因此对 Assets 的每个请求都会导致额外的 DNS 往返。这可能会导致整个操作变得比您刚刚使用自己的服务器提供服务更慢。也就是说,在一次性 DNS 查找惩罚之后,DNS 往返基本上不再是问题;然后速度取决于其他网络因素 - CDN 的拥塞程度、客户端和 CDN 节点之间的距离(相对于您的服务器)。

使用 CDN 的值(value)只会随着您的站点的增长而变得明显 - 您的服务器开始在繁忙的流量下阻塞。 CDN 可用于卸载所有静态请求并防止它们访问您的服务器。如果您的服务器带宽有限并且您要提供大文件,这将特别有用。如果您计划扩展,CDN 几乎是必不可少的。

CDN 还可以帮助将您的内容传播到离世界其他地方的客户更近的节点。因此,如果您没有遍布多个大洲的服务器,CDN 可以帮助为更广泛的受众提供快速访问。这是因为 CDN 通常从距离客户端最近的节点提供内容。

总而言之,您是否应该使用外部 CDN 取决于以下因素:

  • 您站点中的静态文件有多大?
  • 您的服务器有多少带宽?
  • 您的服务器位于何处?
  • 您网站的目标受众是什么?
  • 您要满足多少流量?

我会说大多数时候,使用 CDN 是更好的选择,但在某些情况下,“单打独斗”是合理的。根据我的经验,即使是普通的 AWS 或 GCE servlet 相比,免费的 CDN 并没有那么快。网络速度也非常不可预测,偶尔会出现延迟(最多几秒钟)——这可能是因为周期性的 DDos 攻击使 CDN 繁忙。对于不期望高流量的小型网站,从您自己的服务器上简单地提供文件通常会更快,尤其是当您主要满足本地流量需求时。

无论是否使用 CDN,您都应该始终缩小和连接文件。不要费心将各个库文件分开。您可能经常听到的错误 promise :如果用户访问了另一个站点,而该站点碰巧使用了来自同一 CDN 的同一库文件,则他的浏览器可能已经缓存了该文件,并且您将保存一个 HTTP 回合获取该文件的行程请求。

遗憾的是,这往往不会发生。即使使用最流行的 JS 库 jQuery,这种情况也很少发生。由于网站是在不同时期开发的,因此部署中的 jQuery 版本太多了。此外,不同的站点使用不同的 CDN——Akamai、CloudFlare、Amazon CloudFront、cdnjs、MaxCDN,等等……实际上很少有两个流行站点使用相同的 CDN 和完全相同的库文件。

因此,如果您不连接文件以期偶尔命中浏览器缓存(您保存了什么 - 28KiB?),您会招致每个文件的 HTTP 请求开销。我想说的是,继续将所有 JS 连接到一个大文件中,包括 jQuery 和所有其他 vendor 库 - 在 99% 的时间内它会更快。

关于javascript - 通过 CDN 或 minifiy/concat 加载资源并为自己服务?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30984479/

相关文章:

javascript - IE-8 Flash 后备可以离线工作但不能在线工作

Javascript 正则表达式删除空格

html - 更改滚动可见部分上方和下方的样式元素(那些隐藏的)

html - 使用纯 CSS 创建水平可折叠 Accordion

php - Wordpress 仅在主页中缩小 html

javascript - 调用 componentWillReceiveProps 后,参数返回未定义

javascript - Vue 模型绑定(bind)为数字

html - 如何使用 CSS 为 ul/list 创建 "selected effect"?

javascript - 钛加速器代码缩小

javascript - 如何检测 js 文件在运行时是否被缩小 (Node.js)