Question

背景

我正在整理一个将使用ajax作为更改内容的主要方法的网站。这样，主页框架和图像不必在每次页面更改时不断重新加载。主框架有自己的site.css样式表。

问题1：

将所有样式表信息放入单个样式表是否值得？我认为这会使网站更少模块化。每次添加/删除新页面或内容时，都必须更新css（假设内容需要不同的样式信息）。

问题1.1：

同样的问题，但使用javascript。

问题2：

如果有多个样式表是值得的（我认为是这样），那么在不使用样式表时卸载它是有益的。例如，我加载profile.php页面，以便动态加载profile.css。然后用户更改到settings.php页面，我卸载profile.css并加载settings.css。这种恒定的装载/卸载是否会达到油箱性能，甚至可以节省网站尺寸？

问题2.1

与上述问题相同，但适用于javascript函数。

Answer 1

将javascript或css文件下载到计算机后，它们会被浏览器缓存。因此，您不会产生另一个HTTP请求的额外成本。延迟加载脚本和样式表可能有意义，但是一旦将这些Web资产发送到客户端，就没有任何意义。

最好使用某种机制来编译脚本和样式表，以便将每个资产类型的初始http请求最小化。在许多情况下，只有一个样式表和一个javascript文件将是一个建筑噩梦，但这并不意味着你仍然无法以这种方式将它呈现给浏览器。我使用.NET，所以我不确定你是如何在PHP中处理这个问题的，但我确信它的功能就在那里。

Answer 2

回答1：

这都是关于平衡的。您应该保留不同的CSS和JS文件，但在部署之前将它们全部合并为一个（一个CSS文件和一个JS文件）。基本上没有必要用一个大文件开发，因为有些工具可以为你编译它们。

棘手的部分（取决于您网站的复杂性）正在弄清楚哪些CSS和JS代码经常使用，以便在每个页面上调用。如果您的代码只能在一个页面上使用，您应该动态加载它...除非您的整个站点只有5页。就像我说的那样，平衡。

回答1.1和1.2：

不，不值得。只要加载CSS和JS文件，它们就会缓存在用户的计算机上。所以卸载它们毫无意义。

Answer 3

这对我来说有些过早的优化。让我们来看看SO的加载时间：

all.css - 46.8 Kb - 加载时间87 ms

只是为了更多地推动这一点，这里是这个特定SO页面上的一堆其他项目的加载时间（通过光纤连接在我四岁的笔记本电脑上）：

web site component lag times

以下是（某些）组件的相对大小：

web site component sizes and lag times

我认为，如果你能很好地构建网站的其余部分，那么你不必担心在最后几毫秒内优化它们，直到它们真正计算在内。

Answer 4

每当您需要另一个css或js文件时，您的浏览器会请求它。您提出的请求越多，页面加载的时间就越长。

Answer 5

问题1

是的，因为如前所述，一旦下载了css就会被缓存。这就是为什么通常在包含样式信息时最好不要内联定义它。您可以使用一个简单的PHP脚本来处理这个问题，该脚本将内容类型声明为css，然后将您的各个css文件包含在一起。

header("content-type: text/css");
$file = file_get_contents('your.css');
$file .= file_get_contents(...)

然后在链接标记中正常引用它。

<link rel="stylesheet" href="yourCSS.php" >

问题1.1

与之前的答案相同：

header("content-type: application/javascript");

问题2

没有。加载后，它将始终可以在内存缓存中访问。 Googles GWT框架实际上编译了所有外部内容，并将其作为一个庞大的整体包进行传输。这是因为每个域只能执行2个并发HTTP_Requests。这也是为什么雅虎的速度指南建议你将你的CSS放在页面的顶部，你的javascript放在body标签的底部。

问题2.1

没有。但是请尽量保持外部文件的小巧。始终缩小生产代码。

Answer 6

回答1

虽然根据需要加载CSS规则可能会有一些好处，但我建议不要这样做。仅仅因为这不符合您的站点或Web应用程序的统一布局。您的设计应该在所有页面中标准化，并且无论您通过Ajax请求加载什么“模块”，它们都应使用与主页面相同的布局。 JQuery UI就是一个很好的例子;无论你是否使用小部件，它的风格都会被下载。

但是，如果您需要将特定样式应用于从请求中检索的HTML位，那么您只需将这些规则放在<style>部分附加的<head>标记内，或者<head> add the CSS file，或者甚至将规则设置为HTML元素的style属性。

回答1.1

如果您应该根据需要加载Javascript代码，则不应重新加载此代码两次，除非您确实需要以某些不明原因重新加载代码...

但无论如何，CSS和Javascript都不应该“卸载”，没有任何意义。

回答2和2.1

如果几年前你问过这个问题，答案可能是“加载单个样式表和/或Javascript更好”，但这不再是真的了。随着互联网连接速度和计算机性能的提高，浏览器变得非常高效，并且麻烦不值得性能提升（大多数时候）。此外，如果这些资源是静态的（URL不会更改），则会对它们进行缓存和重用，但是可以使用很多资源。用户通常不介意等待if waiting is expected（参见第2.10节），或者这是第一次。

动态加载/卸载javascript和css样式表是否有优势？

6 个答案: