Rendering page with HUGE amount of 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:

1. Processing options after creation to add them. This is pretty gross and possibly won't give you much speed up over the default generators.
2. 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?