为什么在 Rails 中滚动 javascript 或 css 会影响布局？
现在有几次，当我从开发转向登台时，我对 JavaScript 和样式表在汇总到单个文件中时如何改变其行为感到震惊。
例如，我试图保持一系列样式表的模块化和小型化，以提高可维护性，如下所示：
<%= stylesheet_link_tag "reset-fonts-grid.css", "typography.css", "layout.css", "cms.css", "cms.about.css", "cms.legal.css", "comments.css", "user_generated_content.css", "overlay.css", "login_page.css", "flag_for_admin.css", 'patch.css', 'nag_guide.css', :cache => "cache/all" %>
当您更关心调试而不是计算 http 请求时，它在开发中工作得很好。
但是，一旦我转移到生产环境或在 config/environments/development.rb 中设置缓存（如下所示），布局就会中断：
config.action_controller.perform_caching = false
这里发生了什么，为什么串联文件会表现出来与这样的一系列较小的请求不同，我该如何解决这个问题？
顺便说一句，与文件大小相比，页面上实际发出的 http 请求数量有多大差异？
On a few occasions now when I've moved from development to staging, I've been bitten by how JavaScript and stylesheets change their behaviour when rolled up into a single file.
For example, I'm trying to keep the series of stylesheets modular and small for maintainability, like so:
<%= stylesheet_link_tag "reset-fonts-grid.css", "typography.css", "layout.css", "cms.css", "cms.about.css", "cms.legal.css", "comments.css", "user_generated_content.css", "overlay.css", "login_page.css", "flag_for_admin.css", 'patch.css', 'nag_guide.css', :cache => "cache/all" %>
The works fine in development, when you're more concerned with debugging than counting http requests.
But as soon as I move to a production environment or set caching to be on in config/environments/development.rb like below, the layouts break:
config.action_controller.perform_caching = false
What's going on here, and why would a concatenated file behave differently to series of smaller requests like this, and how can I fix this?
As an aside, how much of a difference does the number of http requests actually make on page, compared to file size?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你的 CSS 验证了吗？ 我过去遇到过与您类似的问题，这些问题是由我在验证时发现的小错误引起的。
尝试 http://jigsaw.w3.org/css-validator/
Does your CSS validate? I have had problems in the past similar to yours which were caused by small errors that I found with validation.
Try http://jigsaw.w3.org/css-validator/
出于兴趣，如果您更改
:cache选项以使其不包含正斜杠，它会起作用吗？ 例如：link元素是什么样的？Out of interest, does it work if you change your
:cacheoption so that it doesn't include a forward slash? For example:linkelement look like that Rails is generating for your combined stylesheet?如果您想深入了解如何在串联和非串联情况下应用样式的详细信息，您可以安装适用于 Firefox 的 FireBug 插件。 然后，可能会打开两个浏览器窗口，一个是开发中的页面，一个是生产中的页面，然后使用 FireBug 隔离一个给您带来麻烦的 DOM 元素，并比较在两种不同情况下该元素的计算 CSS 属性。
最新版本的 Safari 有一个与 FireBug 非常相似的内置工具。
Rails 是否有可能以错误的顺序连接 CSS 文件？ 似乎不太可能，但也许 Rails 中有一个错误。 查看串联的文件并检查顺序。 如果它们乱序，您可以创建一个主 CSS 文件，并使用
@include语句包含其他文件。 这将确保它们以正确的顺序阅读。If you want to dig into the details of how the styles are being applied in the concatenated vs. the non-concatenated situation, you can install the FireBug plugin for Firefox. Then maybe open up two browser windows, one with the page in dev and one in production and use FireBug to isolate one DOM element that's giving you trouble and compare the calculated CSS attributes for that element in the two different situations.
The latest version of Safari has a built-in tool that is very similar to FireBug.
Is it possible that Rails is concatenating the CSS files in an incorrect order? Seems unlikely, but perhaps there's a bug in Rails. Take a look at the concatenated file and check the order. If they're out of order, you could create one master CSS file and include the others with
@includestatements. That would ensure that they're read in the correct order.