Front-end performance and number of css/js files

Question

I am trying to find an answer as to how to improve front-end performance for web applications. My question is say I have multiple css/js files being referenced. Now the browser would make http call for each of the css/js file. But my questions are;

1. Does it happen in parallel or happen one after the other ? Is it same for both CSS/JS ?
2. Is the behaviour (parallel or one after the other) browser-specific ?
3. Is the use of async attribute for script tag standard or accpeted way for asynchronous download?
4. Are there any limitations to the number of http calls that can be made for a single page ? Is it browser-speicific?
5. Does using AMD frameworks like RequireJS solve any of the performance issues OR is it to be used only in a single-page app development ?

Apart from that references to any other general front-end performance improvement tips would be great?

Answer 1

1. Does it happen in parallel or happen one after the other ? Is it same for both CSS/JS ?
2. Is the behaviour (parallel or one after the other) browser-specific ?

Browsers download the content of a website in parallel using multiple connections. The number of those connections depends on the browser and its user settings. If memory serves, the average number of connections is 4.

3. Is the use of async attribute for script tag standard or accepted way for asynchronous download?

The async attribute is used to denote that the script is to be executed asynchronously, it has no effect on the precedence of download

4. Are there any limitations to the number of http calls that can be made for a single page ? Is it browser specific?

There is no limit, although obviously the more you have, the longer it will take for the page to download due to the connection limit.

5. Does using AMD frameworks like RequireJS solve any of the performance issues OR is it to be used only in a single-page app development ?

Those frameworks can be used on any website, with any structure. Their benefit comes from delaying the download of JS until it is actually required by the page. This means that other UI elements, such as images and video can be downloaded first which makes the page load appear quicker for the end user.

Answer 2

Does it happen in parallel or happen one after the other ? Is it same for both CSS/JS ?

Answer:

when user visit any website first time the browser keep cache of your the contents like js css and parallel request depend on browser to browser. by default different browser has different parallel request limit. and it is same for js and css even for your Ajax request as well.

Is the behaviour (parallel or one after the other) browser-specific ?

Answer: yes its browser specific.

Is the use of async attribute for script tag standard or accepted way for asynchronous download?

Answer

there is no standard way to use it not uses depend on the requirement and use of async attribute is not related to asynchronous downloading. the downloading of content depend on browser setting or default setting.

Are there any limitations to the number of http calls that can be made for a single page ? Is it browser specific?

Answer:

there is no limit of http calls to a server however the browser will send it in own way as per default setting or user settings.

Answer 3

1. If you linking your css/js file in index.html the the request will be parallel, not serial.
2. I'm not sure about this, but I guess for all browsers it's parallel. Unless you link one css in index.html and then import the other css using the @import in css file.
3. For asynchronous download, you need to use require.js or any such kind of package manager. The async attribute is used for execution only not for request.
4. There is no limitation for http requests in a page.
5. Using require.js is a good option.Actually with require.js you can use r.js which will help you to create a build, which will reduce your multiple css & js files to a single file.