Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 1 down vote favorite

I took the Bubble chart visualization from Jim Vallandingham: http://vallandingham.me/vis/gates/ and added a few other features such as: a picture over svg, a click function, option to select only one year and have the others disappear. While I was comparing the load time of the wepage, I noticed that it takes almost 4 times longer to load the webpage with the modified script as it does with the original. I can't understand what can be giving it this slowing down of the load. But I'm surely looking for a solution to speed up my modified version.

The original script is at Jim Vallandingham web

The modified script: http://www.qsvlore.com/ft/viz-bsf.html

Any help would be very much appreciated. Thank you

share|improve this question
You must include the code you want review rather than a link to it. See the FAQ. Some links are inaccessible to other users, and their lifetime may make this question and answer meaningless in the future. – Paul Sep 16 '12 at 5:49

closed as off topic by codesparkle♦, Corbin, Brian Reichle, Jeff Vanzella, palacsint Sep 18 '12 at 11:23

Questions on Code Review Stack Exchange are expected to relate to code review request within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

1 Answer

up vote 3 down vote accepted

I noticed that it takes almost 4 times longer to load the webpage with the modified script as it does with the original.

The main problem is that you added code to Vallandingham's script without changing the structure to eliminate redundancy caused by your new features.

Most likely the load time issue is caused by the coffeescript to javascript conversion process.

Vallandingham CofeeScript:

Coffescript lines of code: ~210
Compiled JS lines of code: ~230

Your CoffeeScript:

Coffescript lines of code: ~650
Compiled JS lines of code: ~910

(Your Converted JS) / (Vall. Converted JS) = 910 / 230 = 3.956 ~= 4

Here are two solutions to this problem.

  1. Load only the pre-compiled javascript
  2. Rewrite your coffeescript so that the compiled javascript is under 500 lines of code.

Next time, post code that you suspect is the cause of your slow down instead of only providing a link to your website.

Useful links:

share|improve this answer
Dear Larry, thank you so much for your answer. I thought in the beginning of adding the code here, but as you've seen, it was quite a long one to provide for comparison. I agree that I've extended a lot the script, but that was because I don't know how to compile JS. So I took bits of code and just added them continuously for every year to provide additional information and functionality. I noticed you provided the number of compiled JS lines. Do you use any tool to convert the coffee script to JS? Also, I don't quite understand how to load only the pre-compiled js. Can you elaborate? – Drini Sep 15 '12 at 20:47
@Drini Updated my answer. – Larry Battle Sep 15 '12 at 22:27
Hi Larry, I removed the declarations for every years' attributes and coordinates, resulting thus in a 181 lines of code in coffee-script. It's a tad faster but still not fast as I wanted it to be. According to firebug NET, the JS files take about 3 to 4 seconds to download making the whole page open up in 11.21 seconds (onload 8.38s) I used prefetching so that the page loads its content faster <link rel="prefetch" href="viz-bsf.html"> <!-- Firefox --> <link rel="prerender" href="viz-bsf.html"> <!-- Chrome --> but from Firebug seems like it didn't work. Thank you for the solution. – Drini Sep 15 '12 at 23:36

Not the answer you're looking for? Browse other questions tagged or ask your own question.