0

I'm trying to find the best patterns for javascript usage in my sites, and in doing so I tend to look at source code at some sites (meetup.com, facebook.com, etc). One thing that sticks out at me is the fact these sites seem to compress all of their javascript and place it in the actual page rather than using a <script src="...." type="text/javascript">

My question(s):

1: How are they compressing (or how would one compress) the javascript? Should I use YUIcompress on every page call?

2: What is the benefit of doing things this way rather than importing separate scripts? I would think the separate scripts would make the page itself load quicker.

Thanks

  • 2
    If you View/Source on this page, you will see that it is a combination of external libraries and inline script. I have personally found this to be true for many sites. – Robert Harvey Apr 2 '14 at 23:22
2

How are they compressing (or how would one compress) the javascript? Should I use YUIcompress on every page call?

I usually use something like UglifyJS prior to uploading my script files. Doing it every single time you have a page call doesn't seem very efficient. It's preferable to already have the JavaScript minified/compressed before you make it available as a resource on the page.

What is the benefit of doing things this way rather than importing separate scripts? I would think the separate scripts would make the page itself load quicker.

There is some debate about whether loading an external script file vs having the script inline is faster or slower. If you have the script inline it's one less resource that needs to be loaded before the page is loaded. Typically, if your script is small (less than 10-15 lines), it's better to just have it in a block on the page rather than an external file.

Google has a plugin called PageSpeed that will analyze your site and show you some ways that you can optimize it. They have a number of articles that touch on JavaScript optimization.

  • 1
    And conversely, if you use the same script on multiple pages, having it in a separate file means it doesn't need to be downloaded repeatedly. – Ross Patterson Apr 3 '14 at 0:04
  • @RossPatterson: Definitely true. This is also why using a CDN is recommended for certain resource files (jQuery, etc), so that you can take advantage of the fact that many sites may be using the same resource and you won't have to have it redownloaded for your page. – Dylan Ribb Apr 3 '14 at 15:52
1

What is the benefit of doing things this way rather than importing separate scripts? I would think the separate scripts would make the page itself load quicker.

In a word "caching" your browser can cache the downloaded script file and use it again and again without recourse to the network. If you embed your javascript in HTML then it gets downloaded with every page request.

But that's just the beginning. Modern browsers will also cache the parser's results so the script needs to be parsed only once, some will even compile snippets to machine code and cache the resulting executable. All these aggressive optimizations depend on having a recognizable static source, its much harder to do when the javascript is mixed in with random web pages.

  • Splitting off large scripts which would be shared among many pages would certainly seem helpful. If a piece of JS only makes sense in the context of a particular page, however, would browsers still benefit by having it as separate files? – supercat Jul 20 '14 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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