LebGeeks

A community for technology geeks in Lebanon.

You are not logged in.

#1 June 24 2012

Kassem
Member

JavaScript Weirdness

I have a website that takes too long to load in the browser. I thought I'd try to reduce the number of HTTP requests that happen when the page starts so I joined a couple of CSS files into one, cached (server-side) some data that doesn't change often (which outputs images) and thought I'd bundle some JavaScript files into one as well (there are like 8 JavaScript files being referenced on the page). So first I grabbed the jQuery library and the jQuery UI library from the Google CDN and threw them into a file (the page used to reference them from the CDN). I also thought I'd add to them everything related to the jQuery validation library, so I did.

Now when I run the site, I see a bunch of errors inside FireBug and parts of the site are broken. I do not understand what's going on... Why would it get broken if I bundled everything into one file? Note that I kept jQuery and jQuery UI libraries alone in one file and then jQuery Validate doesn't work anymore...

Maybe I'm missing something here?

Offline

#2 June 24 2012

xterm
Moderator

Re: JavaScript Weirdness

Could you try to reproduce the error in the simplest case scenario?

That would probably help you the most.

Offline

#3 June 24 2012

Ayman
Member

Re: JavaScript Weirdness

Are you sure that the Jquery core file is at the top of your concatenated file? Plus make sure you didnt remove the trailing semicolons from each script.

Decreasing the number of HTTP requests done is good but that doesn't mean that everything has to be hosted on the server and ditching the CDN. Although using the CDN just got jquery and Jquery UI will increase the number of requests by 2 you'll still benefit from decreased latency, increased parallelism, better caching, and reduced load on your server. I would personally prefer the CDN for a couple of scripts and merge the custom ones into 1 minified file.

Other than that I don't see any problems in combining everything in the same file regarding having it to work.

Last edited by Ayman (June 24 2012)

Offline

#4 June 24 2012

rtp
Member

Re: JavaScript Weirdness

i once joined js together and i got some errors... i guess you shouldn't do that... if my memory serves me well it isn't recommended to join javascript together( i think i read that at google speed test thingy)...

most probably you know these but i thought i would tell you never the less, maybe you missed one...
maybe you can use sprites...  and make sure the javascript and css are min ( no white spaces)

Offline

#5 June 24 2012

m0ei
Member

Re: JavaScript Weirdness

rtp wrote:

i once joined js together and i got some errors... i guess you shouldn't do that... if my memory serves me well it isn't recommended to join javascript together( i think i read that at google speed test thingy)...

most probably you know these but i thought i would tell you never the less, maybe you missed one...
maybe you can use sprites...  and make sure the javascript and css are min ( no white spaces)

That's completely wrong.

Offline

#6 June 24 2012

rtp
Member

Re: JavaScript Weirdness

m0ei wrote:
rtp wrote:

i once joined js together and i got some errors... i guess you shouldn't do that... if my memory serves me well it isn't recommended to join javascript together( i think i read that at google speed test thingy)...

most probably you know these but i thought i would tell you never the less, maybe you missed one...
maybe you can use sprites...  and make sure the javascript and css are min ( no white spaces)

That's completely wrong.

you know, wrong or not maybe you should help the guy instead of just bashing my idea...
its easy to say something is wrong but hard to come up with a solution...
so you saying am wrong is no biggy... at least  say something constructive or give a new idea...

or keep your comment to yourself

Offline

#7 June 24 2012

Kassem
Member

Re: JavaScript Weirdness

You guys have been helpful, thank you.

Anyway, I think I narrowed down the issue to two bottle-necks:
1. The file size of all the JavaScript files that I'm referencing.
2. The number of HTTP requests happening as the page loads.

As for the first problem, I'm not sure what else can I do other than minifying all the JavaScript files (most of them are already minified). Where as for the second issue, all I can do now is probably use an image that contains all of the icons and small images on the site, so rather than having an HTTP call for each and every little icon, there will be only one that will get them all.

Any other suggestions? Any other tools/techniques to further investigate this issue and figure out bottlenecks?

Offline

#8 June 24 2012

rtp
Member

Re: JavaScript Weirdness

by the way try this from google...

one more thing make sure the images that are loading on the page has the same size as the container...
make sure the images aren't being resized... decrease any large image to the size of the render thingy... instead of loading the big image on the website... i guess the sprite should fix that...

by the way this is a good tool to make sprites i really recommend it

Last edited by rtp (June 24 2012)

Offline

#9 June 25 2012

Joe
Member

Re: JavaScript Weirdness

The most important thing you need to do when debugging is what xterm suggested:
Try to reproduce the simplest case scenario. Or in other words: Take out as much of the page as you can while keeping the error.


A few questions you should ask yourself:

- Is the bottleneck at page generation server-side, is it on the network, or is it the page rendering?
- Do you notice it's slow in production? or in dev?
- Is it slow when server and browser are on the same machine?
- Have you monitored your db?
- Is it the same issue with all browsers?
- What happens when you turn js off?
- ...

As far as the real question of the topic, theoretically there shouldn't be any problem including all the Js in the page. If you have an issue, double check your syntax or anything like that.

Also, I've never had performance issues due to Google CDN. Actually, their cache often makes things faster.

Offline

#10 June 25 2012

rolf
Member

Re: JavaScript Weirdness

I would back-track, if possible, and go back to how it was before ( the working version ). You should always have a way to back-track to the working version.
Then re-apply changes one by one, testing every time. Eventually you'll figure out what went wrong. What you described sounds like a lot of changes.

Offline

Board footer