Should CSS styles and JavaScript scripts be placed in external files?

should CSS styles and JavaScript scripts be placed in external files?

Or do you put them inside the page itself?

How to deal with some of the performance rules of thinking, 52css.com on these issues, make some discussion.

Using external files in a practical application can improve page speed because CSS styles and JavaScript script files can generate caching on the client. CSS styles and JavaScript scripts that are built into HTML documents are downloaded in each request with the HTML document. This reduces the number of HTTP requests, but increases the size of the HTML document. On the other hand, if CSS styles and JavaScript scripts in external files are cached by the client, you can reduce the size of the HTML document without increasing the number of HTTP requests.

The key issue is the frequency of external CSS styles and JavaScript script file caching and the number of times you request HTML documents. Although there is a certain degree of difficulty, there are still some indicators to measure it. Caching an external file can be more beneficial if a user browses to multiple pages in your site and the pages reuse the same scripts and style sheets.

Many websites did not pay attention to the establishment of these indicators. For these sites, the best way to do this is to use CSS styles and JavaScript scripts as an external file reference. The exception that is more appropriate for using built-in code is the homepage of the site. The home page has fewer (and perhaps only once) views in one session, and you can see that built-in CSS styles and JavaScript scripts will speed up response time for end users. And the homepage is generally the first page that the user accesses, and the built-in CSS style and JavaScript script can improve the speed of the opening.

For a home page with a larger view, there is a technology that balances the benefits of the reduced HTTP requests generated by the built-in code with caching by using external files. One of these is the built-in CSS style and JavaScript script in the home page, but dynamically downloading the external files after the download is complete, and they are already cached to the client when they are used in the subpages.