1

I don't know much about JS parsing or performance.

But I would like to know if there is a performance difference when the browser parses a large file, vs smaller ones with the same total size.

What parses faster:

10kb vs. (2 x 5kb)

Does it matter? Or is it negligible? What if we compare:

1mb vs. (1000 x 1kb)

Note1: This is about browsers parsing JS.

Note2: I'm assuming it's all the same JS code. I mean, either in a single file, or split across multiple smaller files, the parsed code should be the same.

cbdeveloper
  • 27,898
  • 37
  • 155
  • 336

2 Answers2

4

(V8 developer here.)

For parsing speed, the overall amount of script matters, not the organization into files.

That said, there could be secondary effects, which could have more impact on overall perceived page load performance than raw parsing speed. As Ashok's answer points out, the downloading is part of the picture, where historically many small resources were at a disadvantage, which as you point out should be addressed by HTTP2. On the flip side, a few resources might get a speedup thanks to concurrent connections, compared to a single larger chunk.

Another effect worth considering is caching. If you have one part of your code that changes rarely (e.g. a third-party library, which you only update every few months) and another part that changes a lot (e.g. your own code, where you deploy new versions every other day), then it makes sense to split the script files along this line, so that the browser can cache the parts that don't change. That would at least avoid the download of the part that hasn't changed; some browsers might even be able to cache the result of parsing/compiling the code, which would save even more work.

The applicable rules of thumb are:

(1) Do what makes sense for your case (i.e. what's most convenient); or at least start with that and see if it works well enough. Premature optimization (i.e.: making things more complicated in the hope of enabling more speed, without having verified whether that's actually necessary or helpful) is usually a bad idea.

(2) Measure any alternatives yourself, with a test that's as close as possible to your real situation. For example, apply a realistic split to your actual sources (maybe in a handful of chunks? or combine them into one if splitting was what you did before) and test that, rather than generating thousands of files with dummy content. If you can't measure a difference, then there is no difference that matters! And if you can measure a difference, then you have your answer :-)

jmrk
  • 34,271
  • 7
  • 59
  • 74
  • At what size would you say lazying loading would have a perceivable impact on parsing speed? – Bob Dec 07 '20 at 10:39
  • As usual with performance questions: "it depends", e.g. on network speed, cacheability, and the contents of your files. See the two rules of thumb I gave in my answer ;-) – jmrk Dec 07 '20 at 18:01
  • Let me ask another way. How much js code can v8 parse per second? – Bob Dec 08 '20 at 21:35
  • Depends on what it's parsing, and of course also on the hardware ;-) I believe preparsing (i.e. a first quick look at the source, to determine where functions are so that they can be parsed+compiled lazily later when needed) reaches 100 MB/s or so. Again: when in doubt, measure what you care about! – jmrk Dec 08 '20 at 23:55
0

Speed-wise, a single JS file is always better than multiple JS files as browser would be making fewer network requests. Also, to fetch each JS file, the browser would first open an HTTP request connection, perform handshake and then make the data (JS file) transfer.

Due to this, the multiple JS files makes the content load slower.

But again it depends on what code does the JS file holds. For more detailed info please have a look at One big javascript file or multiple smaller files?

Ashok
  • 2,411
  • 1
  • 13
  • 23
  • Thanks, Ashok. I've heard about this (single file benefits) that you're mentioning on your answer. But I don't think this still stands after `HTTP2` protocol, does it? 93% of browser now have `HTTP2` support, and `HTTP2` will multiplex multiple requests into a single TCP connection. – cbdeveloper Feb 21 '20 at 13:03