0

I have a view that has a large table with about 700 rows. In Chrome, Firefox and Safari (when running in development on my local machine), the page takes 2-3 seconds to load. Recently I deployed the app via Rubber, first to a Vagrant VM on my machine, then to EC2. In both cases, when deployed, the page takes about 60 seconds to load on Safari, but works OK on Chrome and Firefox.

I have a canvas element on each row and I have a javascript function DrawCircle that decorates a canvas on each row of the table with a colored dot with a number superimposed. That is fairly expensive, but according to what I can see in Safari developer tools, is that normally, after the page is downloaded there are about 40-50 events associated with DrawCircle, but in the pathological case there are thousands. So what I'm guessing is happening is that normally, only the elements that can be seen in the viewport (about a dozen or so rows) are rendered before the page is shown, but in this case it renders all 700 rows.

The rails 3.2 environment per se does not seem to be causing this, because I have tried copying my development.rb environment file to production.rb and deploying, and the same problem occurs. I deploy using unicorn and nginx, but I also use unicorn in development, so there should be very little difference other than the URL.

I would share some code, but I can't think of what could be relevant. Please ask.

UPDATE: While I was trying to track this down, my development environment suddenly started to have the same issues as production. So that solved one mystery (the difference between production and development) and added another (why did it change suddenly?). Anyway at this point I'm going to consider this just a quirk of Safari that makes it render my bad page badly and go back to work improving the page. @epascarello's tip helped a lot.

chetstone
  • 650
  • 1
  • 9
  • 19
  • 1
    Tables typically mean slow rendering. Why are you using canvas to do it. Simple sprite img of circles or CSS made circles would be quicker. What do your "dots" with numbers look like? – epascarello Jul 16 '14 at 15:03
  • 1
    CSS example: http://jsfiddle.net/mSN2k/ – epascarello Jul 16 '14 at 15:10
  • @epascarello, thanks for the great tip and the fiddle. Yes, my dots look just the same as yours. I remember when I first implemented this, I was trying to use colored gif dots but had trouble getting the numbers lined up in the center, so I went to canvas. Didn't know about CSS circles. I know I also need to paginate this view-- it's ridiculous to dump the whole thing at once, but in the meantime it'd sure be nice to know what's causing this anomaly with Safari. – chetstone Jul 16 '14 at 18:08

0 Answers0