Question

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

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

延迟DOM触发，直到加载其他样式表。这会起作用，但它会减慢网站速度，因为我们会迫使DOM等待至少两个样式表串联加载。
将它留在原处，FOUC和所有。
将所需的样式表移动到要在第一时间加载其余部分的布局。这是性能最佳的，但它会干扰我的混乱。我有很多页面使用相同的布局，但每个页面都需要不同的修改样式表。例如，用户可能使用应用程序布局但需要users.css文件，而产品可能使用应用程序布局但需要products.css文件。这个选项的终点是很多几乎相同的布局，唯一的区别是要包含的css（可怕的unDRY）。
一个优雅的技术解决方案，我不知道我的中介。

包含不同样式表的正确方法是什么，是否可以在不重复布局代码的情况下执行此操作？

Answer 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

这有意义吗？没有测试过，但它应该让你走上正确的轨道。

Answer 2

布局/ application.erb

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

公共/样式表/ combined.css

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

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