Ruby on rails 干燥和性能之间的紧张关系？_Ruby On Rails_Css_Performance_Layout_Dry

Ruby on rails 干燥和性能之间的紧张关系？

ruby-on-rails css performance layout

Ruby on rails 干燥和性能之间的紧张关系？,ruby-on-rails,css,performance,layout,dry,Ruby On Rails,Css,Performance,Layout,Dry,我的应用程序中有许多页面在加载时显示部分FOUC（未设置样式的内容的闪烁），这是因为其中一些页面在文档的头部而不是在布局中定义了样式表和/或javascript。基本问题是DOM在加载这些样式表之前启动为了解决这个问题，我认为有几种可能性：延迟DOM触发，直到加载其他样式表。这会起作用，但会减慢站点的速度，因为我们将迫使DOM等待至少两个样式表串联加载把它留在原处，福克斯和所有人将所需的样式表移动到要加载的布局中，其余样式表将在第一次加载时加载。这是最佳性能，但它干扰了我的困惑。我有很多

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

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

延迟DOM触发，直到加载其他样式表。这会起作用，但会减慢站点的速度，因为我们将迫使DOM等待至少两个样式表串联加载

把它留在原处，福克斯和所有人

将所需的样式表移动到要加载的布局中，其余样式表将在第一次加载时加载。这是最佳性能，但它干扰了我的困惑。我有很多页面使用相同的布局，但每个页面都需要不同的修改样式表。例如，用户可能使用应用程序布局但需要users.css文件，而产品可能使用应用程序布局但需要product.css文件。这个选项的终点是很多几乎相同的布局，唯一的区别是css包含了什么（可怕的不整洁）

一个优雅的技术解决方案，我不知道在我的中介

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

不确定这是否会得到您的批准，但我会这样做

通过删除所有非通用的

样式表\u链接\u标记

调用来修改主布局。将其替换为以下内容：

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

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

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

def userscocontroller


这有意义吗？尚未对其进行测试，但它应该会让您走上正确的道路。
layouts/application.erb
<body id="body-<%= content_for :body_name %>">
  ...
</body>

你能澄清一下“文档头”和“布局”是什么意思吗？你是指HTML页面的部分和Rails application.HTML.erb文件吗？嗨，蒂姆。我所说的布局是指Rails布局，例如application.html.erb。我说的head是指（可能不准确！）视图顶部的样式表声明users/new.html.erb.Justice，谢谢你的回答。我知道这将只选择我想要应用于特定页面的样式。我是否正确，这仍然会为每个页面加载一个巨大的样式表？是的。但是样式表通常没有那么大，而且单个样式表（虽然相对较小）无论如何都会被浏览器缓存。因此，最好有一个3-5K行的组合.css表，最多可以提供15-20个不同的离散样式表。是的。为了确保这一点，请描述传输的字节数（web服务器应将其发送到Gzip）以及所需的毫秒数。但是文本是高度可压缩的，当压缩以进行传输时，您的组合样式表听起来一点也不大。另外，看看CSS缩小，它去掉了多余的空白和注释。您将开发combined.css文件，缩小步骤将生成combined.min.css，这是您的页面将引用的内容。
#header {
  /* styles for all pages */
}

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