1

Say I have a javacsript file containing ten components. Why, exactly, is this better for performance than loading 10 files containing a component each? It seems like it's the same amount of data? So what's the difference?

George Welder
  • 3,787
  • 11
  • 39
  • 75
  • 1
    By "loading" do you mean requesting? If so, there's your answer. Each request takes time traveling to and from the server. – Wes Foster Jun 08 '17 at 16:44

2 Answers2

3

The difference is that browsers don't load all resources at the same time. Most browsers only have 2-4 concurrent requests open, so if you have 5 JS files, the browser will request the first four and then wait until one of them completes before requesting the 5th. Some older browsers only request one JavaScript file at a time, and wait until it's fully parsed before fetching the next.

Often the network time is the worst part of the user experience (especially in some parts of the world or on some devices), so having a bundle where only one request is made instead of 5 means your app will feel more responsive.

There are a number of good articles online about this as well, YSlow was one of the first tools & metrics used to check these things, but there are others.

Paul
  • 35,689
  • 11
  • 93
  • 122
0

Simply put, it's not about the size of the requests it's about the amount of requests and whether or not they are synchronous or asynchronous.

Synchronous programming means that, barring conditionals and function calls, code is executed sequentially from top-to-bottom, blocking on long-running tasks such as network requests and disk I/O.

Asynchronous programming means that the engine runs in an event loop. When a blocking operation is needed, the request is started, and the code keeps running without blocking for the result. When the response is ready, an interrupt is fired, which causes an event handler to be run, where the control flow continues. In this way, a single program thread can handle many concurrent operations.

And as this answer by Cletus explains:

JavaScript is always synchronous and single-threaded. If you're executing a JavaScript block of code on a page then no other JavaScript on that page will currently be executed.

JavaScript is only asynchronous in the sense that it can make, for example, Ajax calls. The code will stop executing until the call returns (successfully or otherwise), at which point the callback will run synchronously. No other code will be running at this point. It won't interrupt any other code that's currently running.

This is why your performance suffers when you load more JavaScript files.

  • It seems like you're talking a lot about JS, when the question is really about a variable number of HTTP requests on page load. – Tom Fenech Jun 08 '17 at 16:51