为什么通过在线链接链接 css 和 JavaScript 文件？ [复制]答案

【问题标题】：Why link css and JavaScript files by online links? [duplicate]为什么通过在线链接链接 css 和 JavaScript 文件？ [复制]
【发布时间】：2020-10-09 04:30:59
【问题描述】：

我是一个建立自己网站的初学者，我目前正在通过以下方式链接我的 css 和 js 页面：

<link rel="stylesheet" href="style.css">
<script src="jscode.js"></script>

其中 style.css 和 jscode.js 与 html 文件位于同一文件夹中。但是，已发布的网站似乎专门通过在线链接链接其 css 和 js 页面，如下所示：

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7">
<script async="" src="https://cdn.sstatic.net/Js/full.en.js?v=ada34f05dd4d"></script>

他们为什么要这样做，而不是将 css 和 js 文件托管在与 html 文件相同的文件夹中？我还应该在线上传我的 css 和 js 文件并链接它们吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

这是出于性能原因。

您可能已经注意到，它们链接了一个 CDN 托管样式表：https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7

很少更改的文件受益于托管在 CDN 上，从而提高了网站性能。对于常见的库尤其如此，例如Bootstrap 或 jQuery 或 Vue。

但是，如果您自己制作资源，则可以将 css 和 js 文件放在您的网页旁边。

【讨论】：

【解决方案2】：

当我们构建应用程序时，这些外部库会增加应用程序包的大小，因此也会增加应用程序的加载时间。当您从 CDN 加载 CSS 和 JavaScript 库时，您的网站会快速加载它们。

【讨论】：

嗯，有点。这是因为客户端可能已经在其缓存中拥有该 CDN 中的该文件，因此将使用该文件而不是再次下载该文件。

【解决方案3】：

您会注意到 src 中的“cdn”子域并输入属性：(href="https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7")。

这些是指“内容交付网络”。这些是分布在全球各地并托管相关 CSS 和 JS 文件的服务器。当用户访问该站点时，CDN 将从靠近他们的服务器提供缓存文件，从而加快站点加载速度。

但是，不需要使用 CDN。

【讨论】：

不是服务器提供缓存文件，也不是服务器的位置。这是因为客户端可能已经在其缓存中拥有该 CDN 中的该文件，因此将使用该文件而不是再次下载该文件。而且，如果确实需要下载文件，CDN 会针对高可用性和带宽进行优化，以加快下载速度。

【解决方案4】：

使用 CDN 链接通常可以更快地将内容/资源交付给用户，对于具有足够高流量的网站，它可以减少托管服务器上的工作量，因为 CDN 的工作方式，您可能需要阅读在 CDN here 上。但这也取决于代码的创建者，因为在大多数情况下，用户通常无法观察到差异。

【讨论】：