DRY 和性能之间的紧张关系？答案

【问题标题】：A tension between DRY and performance?DRY 和性能之间的紧张关系？
【发布时间】：2010-10-14 19:35:08
【问题描述】：

我的应用程序中有许多页面在加载时显示部分 FOUC（无样式内容的闪烁），这是因为其中一些页面在文档开头而不是在布局中定义了样式表和/或 javascript .根本问题是 DOM 在加载这些样式表之前就被触发了。

为了解决这个问题，我想有几种可能：

将 DOM 触发延迟到加载其他样式表之后。这会起作用，但会降低网站速度，因为我们会强制 DOM 等待至少两个样式表连续加载。
把它留在原处，FOUC 和所有东西。
将所需的样式表移动到布局中，以便在第一时间加载其余样式表。这是性能最佳的，但它干扰了我的困惑。我有很多页面使用相同的布局，但每个页面都需要不同的修改样式表。例如，用户可能使用应用程序布局但需要 users.css 文件，而产品可能使用应用程序布局但需要 products.css 文件。这个选项的终点是许多几乎相同的布局，唯一的区别是要包含什么 css（可怕地 unDRY）。
一个优雅的技术解决方案，我不知道我的中介。

包含不同样式表的正确方法是什么，是否可以在不复制布局代码的情况下做到这一点？

【问题讨论】：

你能澄清一下'文档的头部'和'布局'是什么意思吗 - 你是指 HTML 页面的部分和 Rails application.html.erb 文件吗？跨度>
嗨蒂姆。布局是指 Rails 布局，例如 application.html.erb。我的意思是（可能不准确！）在视图 users/new.html.erb 顶部的样式表声明。

【解决方案1】：

不确定这是否会得到您的认可，但我会这样做。

通过删除所有非泛型 stylesheet_link_tag 调用来修改您的主布局。用这个替换它们：

= stylesheet_link_tag 'style_used_in_every_page'
- @stylesheets.each do |css|
  = stylesheet_link_tag css

在您的控制器中，指定用于该控制器视图的样式表：

def UsersController < ApplicationController
  @stylesheets = ['users', 'admin', 'print']
end

这有意义吗？尚未对其进行测试，但它应该能让您走上正轨。

【讨论】：

【解决方案2】：

layouts/application.erb

<body id="body-<%= content_for :body_name %>">
  ...
</body>

public/stylesheets/combined.css

#header {
  /* styles for all pages */
}

body#body-products {
  /* styles for the products page only */
}

【讨论】：

正义，谢谢你的回答。我知道这只会选择我想为特定页面应用的样式。这仍然会为每个页面加载一个巨大的样式表，我是否正确？
是的。但是样式表通常不会那么大，而且单个样式表虽然比较小，但无论如何都会被浏览器缓存。
所以最好有一个combined.css 表，大概有3-5K 行，最多可以提供15-20 个不同的离散样式表。
是的。可以肯定的是，分析它的传输字节数（Web 服务器应该将它压缩后发送）以及需要多少毫秒。但是文本是高度可压缩的，并且您的组合样式表在为传输而压缩时，听起来一点也不大。此外，查看 CSS 缩小，它去除了多余的空白和 cmets。您将开发combined.css 文件，缩小步骤将生成combined.min.css，这是您的页面将引用的内容。