Rendering page with HUGE amount of HTML - html

Question

I'm creating a website that has a huge amount of HTML (many thousands of div elements). There's no real way to get away from having all these div elements and it's making the site load very slow (7-12 seconds). I've tried putting caching on the site, but it doesn't help, since the site still has to render all these div elements.
More specifically it's 140 dropdowns, that each contain 100-800 div elements and they take a long time to show.
My thoughts, was to render the div elements that are inside the dropdowns, after the page loads, but I don't know how to go about that?
What is the easiest way to render some of your partials AFTER the page has loaded? I'm using Rails 4 btw.
Any other suggestions on how to deal with HUGE amounts of HTML?

Answer 1

I have a similar issue on one of my pages. Here are some things to try related to the select boxes.
(The top two may not be relevant since you said you tried caching, but I'm including for completeness. What type of caching did you try? How did you verify it was the browser rendering that was slow?)
Double check the cause of the problem
Comment out the code that generates the select boxes and check whether the time in your rails logs (as opposed to your browser measurements) drops. This establishes your "lower bound" for performance improvements on that measure.
Avoid using rails helpers.
If you're using select_tag, options_for_select, or any of that family of methods you may be doing a lot of repeated work since each time they are called they need to rebuild the list of options. If the options are the same for each select box, you can build them up once then just dump them in the page:
<% options = options_from_collection_for_select(#array, "id", "name") %>
<%= select_tag "myfield", options %>
If you need different selected values for each, you can try:
Processing options after creation to add them. This is pretty gross and possibly won't give you much speed up over the default generators.
Dump the defaults into a javascript variable, then set them with JS after the page loads.
AJAX in partials
This will give the illusion of loading faster, even though server time is the same (though it may be parallelized somewhat, you add extra network delay). The easiest way to do this is with jQuery's .load method.
$("#element-1").load("/path/to/partial/1")
Generate select boxes in JS
If you can get all the data you need to the client relatively fast (maybe serve it up in a JSON endpoint?) you can try building up the select boxes directly with jQuery, which is covered in Programmatically create select list
Remove redundant HTML
Why do your dropdowns have divs inside them? Is there a way to simplify?

Answer 2

Although the question is few years old, maybe someone will benefit from this one.
1) in controller:
#companies = Company.all.pluck(:name, :id) #order is important here
2) in view:
<%= f.select(:company_id, options_for_select(
#companies, selected: #user.company_id
), {}, class:"form-control m-b") %>
pluck grabs only :name, :id values, array of arrays, e.g,
=> [["Sumptus xiphias canto.", 5], ["My First Co.", 1]]
is created and then options_for_select populates options.
My 5000 records are populated in ~300ms in AJAX modal window. Not super fast, however I don't think regular user would complain.