10

I'm writing a project which will use some fairly large JS libraries including jquery UI. The project will be run within an Intranet though. So download time is not really an issue for me and most people should only have to download the libraries once since I assume they will remain in the browser's cache.

My question is about how modern browsers (IE9,FF5,etc) handle the processing of the Javascript code. I imagine at some point it is compiled, but is this done on each page load, or is the compiled code cached too. If so, is it cached even after the browser is closed?

This web app may run on some low powered portable devices so I wanted to be reasonably efficient. I wanted to combine all the javascript files into one large one that is linked to on every page of the app.

But depending on how much work the browser must do to process all the JS I'm wondering if I should split them up so not all pages must load all the JS. Obviously that's more work though.

Any thoughts or info would be appreciated. Thank you.

5
  • 4
    Javascript is an interpreted language. It is not compiled.
    – Dismissile
    Jul 29, 2011 at 13:26
  • 7
    @Dismissile Modern browsers do compile JS (JIT). So its just partially true
    – meo
    Jul 29, 2011 at 13:31
  • @Dismissile Yeah, I'm not really knowledgable about the process but my understanding is that Mozilla's TraceMonkey does at least some compilation to gain speed.
    – C.J.
    Jul 29, 2011 at 13:33
  • 1
    Here is a link that discusses V8's Dynamic Machine Code Generation of JavaScript code.google.com/apis/v8/design.html#mach_code Jul 29, 2011 at 13:37
  • somes libraries have loaders to load dynamically their modules (ex:developer.yahoo.com/yui/yuiloader) You could use them to implement lazy load (exemple: you surely won't need the calendar module at page startup, as well as the RTE editor.)
    – BiAiB
    Jul 29, 2011 at 15:15

6 Answers 6

8

Yes, JavaScript size is still a performance concern if it is cached for the following reasons:

  • Most browsers don't cache the byte code that they execute. So the script must still be re-parsed on every page load. Modern browsers are doing this faster, but it still may be a concern for very large JavaScript files.
  • The code in your JavaScript files is actually executed on every page load. Even if browsers start caching byte code, they still have to re-execute the JavaScript every time the page is loaded.
  • You may get a lower cache rate than expected, for reasons beyond your control. Users may disable their cache, or visit so many sites that your files get expired from the cache quickly. You should check your logs to make sure that the ratio of page loads to JavaScript file loads is high.
  • Loading a file from cache is usually pretty fast, but it's not always trivial. It can take upwards of 200ms in some cases.

You can do a pretty quick test to get a rough idea of how long your scripts take to parse and execute like this:

<script>
  var startTime = (new Date()).getTime();
</script>
<script src="cachedFile1.js"></script>
<script src="cachedFile2.js"></script>
<!--all your scripts included this way-->
<script>
  var endTime = (new Date()).getTime();
  alert("Took " + (endTime - startTime) + " milliseconds to parse and execute");
</script>

Make sure to test on all the target browsers you support; JavaScript parse and execution time can vary wildly between different browsers. Also make sure that you test on a computer that is as slow as the ones your users will have. If you do find performance problems, you probably will need to solve them in a profiler. Minification won't help much for improving parse and execution time.

2
  • OK, thanks for the info and the speed test. Never occured to me to do that. Thanks
    – C.J.
    Jul 29, 2011 at 15:15
  • 200ms to access a cache? Sort of defeats the purpose of a cache in the first place. Under what circumstances would it ever take so long?
    – ICW
    Sep 14, 2019 at 23:43
0

Minify your javascript files. This takes up less space. Also, Javascript is an interpreted language so it is never compiled.

http://en.wikipedia.org/wiki/Minification_(programming)

3
0

It doesn't really matter how much there is code but how heavy it is. Nowadays browsers can run JS quite fast. Just try opening Gmail forexample (which is almost all about javascript) with IE7 and then with IE9 or Chrome.

0

You need to look into the JavaScript engines each browser uses to get a better understanding, for instance Google Chrome uses V8: http://code.google.com/p/v8/

Also this may help you understand a great deal better:

How do browsers execute javascript

How do browsers handle JavaScript?

2
  • Thanks b01. It's an interesting read. Unfortunately I'm having trouble finding out if the work these engines do is repeated each time a page loads or if it is saved and then reused on subsequant page loads...which would mean JS size would not be very important after the 1st page load.
    – C.J.
    Jul 29, 2011 at 13:46
  • Yeah, I'm still looking myself.
    – b01
    Jul 29, 2011 at 14:32
0

If your use-case is only in an intranet environment, then compared to other optimization techniques, code size is not really a problem for you. Presumably, target browsers are fairly new and have JS engines that can handle modern full-blown javascript sites, in which case the size of the code won't really affect the speed, since the code parsing takes so little anyways, compared to the execution. In older browsers, however there might be a small speed difference compared to more optimized code length since they were never meant to run javascript that's thousands and thousands of lines of code.

Compared to code execution optimization, code length optimization won't probably even be noticeable to end-user. You might be able to knock of a few ms by compressing the code, but most modern engines create a "map" when they parse the code, so that at execution time, the location of a function, variable etc doesn't really matter. So worry more about overall code optimization, rather than the library sizes etc.

You can listen about V8 internals here

0

I never thought about this from that point of view, but I can't really why not bundling everything up in a big file wouldn't help* - the Javascript build tools I know focus on doing precisely this.

*unless you have a big module that is only rarely used. In that case, keep it separate so not everyone has to use it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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