All geek questions in one place

Tension between DRY and performance?

I have several pages in my application that show partial FOUC (flashes of non-leafy content) when loading, which is because some of them have stylesheets and / or javascript defined in the head of the document and not in the layout. The main problem is in that the DOM starts before loading these stylesheets.

To solve this problem, I assume that there are several possibilities:

  • Delay in starting the DOM until additional stylesheets are loaded. This will work, but it will slow down the site, as we will force the DOM to wait for at least two stylesheets to be loaded sequentially.
  • Leave it where it is, FOUC and all.
  • Move the necessary style sheets to the layout that will be loaded with the rest for the first time. This is optimal in performance, but it interferes with my confusion. I have many pages that use the same layout, but each of them needs different stylesheet modifications. For example, users can use the application layout, but need the users.css file, while products can use the application layout, but this requires the products.css file. The endpoint of this parameter is a lot of almost identical layouts, with the only difference being that css is included (horribly unDRY).
  • An elegant technical solution that I do not know about in my mediation.

What is the correct way to use different stylesheets, and can this be done without duplicating the layout code?

+3
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 */
}
0

, , , .

, 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

? , .

+1

Source: https://habr.com/ru/post/1769610/

More articles:


All Articles