Question

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

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

Answer 1

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

不要在你的CSS中添加cdn链接。

Answer 2

这取决于你想要什么。你打算采用页面速度吗？

如果您想针对页面速度优化您的网站，我建议将CSS和JavaScript文件合并到单个文件中（有automate this process的工具）。此外，如果您真的想要优化网站的页面速度，可以动态地应用组合的CSS和JavaScript，方法是将以下片段放在结束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等工具，这样可以很好地优化您的网站。

引导。建议需要重新本地CSS文件和CDN链接

2 个答案: