引导程序。需要关于本地 CSS 文件和 CDN 链接的建议答案

【问题标题】：Bootstrap. Advice needed re local CSS file and CDN link引导程序。需要关于本地 CSS 文件和 CDN 链接的建议
【发布时间】：2015-03-10 03:34:07
【问题描述】：

我是个新手，所以请原谅这个基本问题。当我使用 Bootstrap 创建站点时，我相信我在每个页面的头部包含了 Bootstrap CDN 文件的链接，并且还包含了我自己的 CSS 样式表的链接。那是对的吗？或者我可以将 cdn 文件链接放在我的样式表中，然后将指向样式表的链接放在每个页面的 HTML 头部部分吗？

同样的问题是关于 JavaScript。我是否链接到我网站每个页面上的 cdn 文件？

【问题讨论】：

标签： css twitter-bootstrap cdn

【解决方案1】：

在每个页面中包含 js 和 css cdn 链接总是好的，或者您可以下载这些并将其添加到您的项目中，并在包含样式表时包含。

不要将 cdn 链接添加到您的 css。

【讨论】：

谢谢！所以在我混乱的大脑中要清楚。每个页面都将包含指向 Bootstrap CDN 和 Java 文件的链接，以及指向我的 CSS 表的链接。如果我将 CDN 或 CSS 链接放在首位，在 head 部分是否重要？
并在

【解决方案2】：

这取决于你想要什么。你想要提高页面速度吗？

如果您想优化您的网站以提高页面速度，我建议将 CSS 和 JavaScript 文件合并到单个文件中（automate this process 有工具）。此外，如果您真的想优化您的网站以提高页面速度，您可以动态应用组合的 CSS 和 JavaScript，方法是将以下 sn-p 放在关闭 body 标记之前，以便可以在执行 Javascript 之前呈现 HTML ：

<script type="text/javascript">
    function (sources) {
        for (var i = 0; i < sources.length; i++) {
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = sources[i];
            head.appendChild(script);
        }
    })([
            '//domain.com/combined.js'
    ]);
</script>

请注意，JavaScript 文件不以同步顺序加载，但使用单个组合脚本并不重要。

对于工作表，我使用以下算法：

确定是否是会话的第一个页面视图：如果是这样，在head 标签中内联组合的 CSS：

<html>
    <head>
        <style><? echo file_get_contens('./path_to_combined_style.css'); ?></style>
    </head>
</html>

如果没有，只需在 head 标签中包含 CSS 链接：

<html>
    <head>
        <link rel="stylesheet" href="//domain.com/path-to-combined-style.css" type="text/css" />
    </head>
</html>

然后您可以通过执行XMLHttpRequest 在第一次加载时强制缓存为 CSS 样式，为简单起见，我在这里使用jQuery：

$(document).ready(function(){

    var href = "//domain.com/path-to-combined-style.css";

    $link = $("link[href='" + href + "']");

    if ($link.size() === 0) {
        $.get(href);
    }

});

你可以把它放在组合的 JavaScript 中。

请注意，您将无法利用 CDN 的速度优势。要解决此问题，您可以将合并的资源发布到您自己的 CDN。您将失去用户已经缓存引导程序的可能性。

当然，整个过程需要一些知识和经验，因此您可能需要考虑使用像 CloudFlare 这样的工具，它可以很好地优化您的网站。

【讨论】：