Bootstrap。需要有关本地 CSS 文件和 CDN link 的建议

Question

我很新手，所以请原谅基本问题。当我使用 Bootstrap 创建站点时，我相信我在每个页面的头部部分将 link 包含到 Bootstrap CDN 文件中，并且我还在我的文件中包含了一个 link拥有 CSS 风格 sheet。那是对的吗？或者我可以将 cdn 文件 links 放在我的风格 sheet 中，然后将 link 放在每个 HTML 标题部分的风格 sheet 中页数？

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

Answer 1

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

不要将 cdn link 添加到您的 css。

Answer 2

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

如果您想优化您的网站以提高页面速度，我建议将 CSS 和 JavaScript 文件组合成单个文件（有工具可以 automate this process）。此外，如果您真的想针对页面速度优化您的网站，您可以动态应用 CSS 和 JavaScript 组合，方法是将以下代码段放在结束 body 标记之前，这样HTML 可以在执行 Javascript:

之前渲染

<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 link：

<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。不过，您将失去用户已经缓存 bootstrap 的可能性。

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

Bootstrap。需要有关本地 CSS 文件和 CDN link 的建议

Bootstrap. Advice needed re local CSS file and CDN link

css

cdn

twitter-bootstrap