When we include a script or CSS file in the HTML document, does an HTTP request happen?

Posted on

Question :

For example: <script src="file.js" > </script> or <link rel="stylesheet" href="style.css" >

Doubt: When we do this, does request HTTP occur? Would it be more performative if I did not do this, and put everything straight into the HTML document?


Answer :

Yes, for each referenced file there will be a different request.

It would be more performative to load everything into a single file, even the images, save some round trips to the server and in the end it will be faster.

But it will not necessarily offer a better experience for the user. It is possible for the user to wait longer to see the mounted page as the load is unique. If you’re bringing in smaller things, you can go on and start learning something first.

If the same things are needed on another page, and it is very common that this happens, very much, it will have to be transmitted again. Once this happens, the advantage has already gone to hell. Separating allows reuse.

Today, a lot of requests are made via AJAX or something. More and more we see loading occurring in parts. Of course, everyone might be doing it wrong, but you think if everyone is doing it, it should not be better that way in most cases. Of course each case is a case. I do not like it when everyone takes a unique path without seeing the context. Your case can benefit more if you put it all together, you will know …


Yes, there is an http request for each call.
In the question of performance may be yes, if it is a small thing, and it may be that not, if it is a lot, because instead of making several small requests, you will only make one big request, which can decrease the performance instead to increase.

Testing is best done by monitoring the DevTools Network tab and checking how long your page loads.

Another thing you can do is to minify your javascript and css files, so they get smaller and download them faster.


Separated is better than Together

See how the Browser stream works < – > Server: You type the URL in the browser and the request ( Request ) is made to the server. The server, after processing whatever it is on its side, will return a response ( Response ). The protocol ( HTTP ) works like this. A request – > An answer. There is no way to give you more than one answer to a request.

What does the browser do? It processes HTML and for each dependency it finds it will make new requests to the server to fetch the information it needs.

The issue of having better or worse performance putting everything in the body of the page and coming all on the same request depends on a few factors, but overall does not make sense.

For example, will your server serve only 1 client? Your CSS or Script is hosted in a CDN ? Do you have a control on the server to tell the browser that the CSS or script it is downloading has not changed and you can use what is in the browser cache?

In most cases the answer is that Web servers are designed to serve as many requests as possible in the shortest possible time, so that more clients can be served by the same process. And if your application does not collaborate to make it happen you will be killing the web server and probably your system will have scalability difficulties.

In summary: It would be best for you to break the parts instead of leaving everything in HTML . #tamoseparado


Leave a Reply

Your email address will not be published. Required fields are marked *