The three methods we have for using CSS and JS code include the following.
- External: In this method, our codes are in the form of a file and in a separate address, which we call the file that contains css and js codes using the meta tag.
- Internal: In this method, our codes are located directly on top of the content of our HTML document, which are inside the style tag for css files and inside the script tag for JS files.
- Inline: In this method, our codes are inline inside tags like p, div, etc.
Now, when we type a page of a site in the browser, these codes start to be loaded in a prioritized manner. That is, for example, if you come for a specific class of template and choose a specific color or the desired font using the three methods mentioned, inside the html document there is priority with the style code that is specified as Inline. If this mode does not exist, in the next step Internal mode and finally External mode will be prioritized. Exactly the same thing will happen for JS files.
Now, when you open a site, browsers will block CSS and JS resources that are loaded externally at the first moment. Because the priority is to load the sources that are inside you and your domain is located, after the internal sources are loaded, the external source is unblocked and starts to load, and finally, when this step is completed, you will have the complete appearance of a You see the site. The bad thing that happens in this situation is the blocking and unblocking stage. Because in this period of time, although very short, there is an interruption in loading the site and the browser is still trying to load the site completely. This issue will increase the load of the site, which will result in a decrease in the speed of the site and an increase in the number of HTTP requests.