Напряжение между СУХОЙ и производительностью? - PullRequest
Новая
       23

Напряжение между СУХОЙ и производительностью?

3 голосов
/ 14 октября 2010

У меня есть несколько страниц в моем приложении, которые показывают частичные FOUC (вспышки содержимого без стиля) при загрузке, что происходит потому, что некоторые из них имеют таблицы стилей и / или JavaScript, определенные в заголовке документа, а не в макете , Основная проблема в том, что DOM запускается до загрузки этих таблиц стилей.

Чтобы решить эту проблему, я предполагаю, что есть несколько возможностей:

  1. Задержка срабатывания DOM до загрузки дополнительных таблиц стилей. Это будет работать, но это замедлит работу сайта, так как мы заставим DOM ждать по крайней мере двух таблиц стилей для загрузки последовательно.
  2. Оставь это там, где есть, FOUCs и все.
  3. Переместите необходимые таблицы стилей в макет, который будет загружен с остальными при первом запуске. Это оптимальная производительность, но это мешает моей путанице. У меня есть много страниц, которые используют один и тот же макет, но для каждой из них нужны разные модифицирующие таблицы стилей. Например, пользователи могут использовать макет приложения, но им нужен файл users.css, тогда как продукты могут использовать макет приложения, но нужен файл products.css. Конечной точкой этой опции является множество практически идентичных макетов, единственное отличие состоит в том, что включать в css (ужасно unDRY).
  4. Изящное техническое решение, о котором я не знаю в моем промежуточном звене.

Как правильно включать разные таблицы стилей и возможно ли это сделать без дублирования кода макета?

Ответы [ 2 ]

1 голос
/ 15 октября 2010

Не уверен, что это встретит ваше одобрение, но это то, что я бы сделал.

Измените основной макет, удалив все неуниверсальные 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

Это имеет смысл? Не проверял, но это должно привести вас на правильный путь.

0 голосов
/ 15 октября 2010

layout / application.erb 

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

public / stylesheets / комбинированный.css 

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

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