Website front-end and back-end performance optimization (net excerpt)

1. Reduce the number of http requests
Merge files, by placing all scripts in one script file or all style sheets in one style sheet file, thereby reducing the number of HTTP requests.
CSS Sprites are the preferred solution for reducing image requests. Combine all background images into one image, and use the CSS background-image and background-position properties to control the appropriate image area.
Inline images use the data: URL scheme to embed image data into the page, but this will increase the size of the Html document.
2. Use Content Distribution Network
Content Distribution Network (CDN) is a collection of servers distributed in different regions, which can send information to users more effectively. It chooses the server to send data to for a user based on a measure of domain distance. For example, the server with the fewest hops to reach the user or the fastest response speed will be selected.
3. Add an expiration date or Cache-Control to the header
For static components: Set the cache period of the header to some distant future so that it can "never expire".
For dynamic components: Use appropriate Cache-Control headers to help the browser perform specific requests.
4. Gzip compression component
The compression format specified by Accept-Encoding in the header of the HTTP request:
ν Accept-Encoding: gzip, deflate
ν Content-Encoding: gzip
5. Put the style sheet in front
Moving the style sheet to the head of the document can make the page load faster. Because placing the style sheet at the head allows the page to be rendered gradually.
6. Put the script at the end
Scripts may block concurrent downloads. The HTTP/1.1 specification recommends that browsers only perform two concurrent downloads per domain name.
Set up a lazy loading script, which can also be placed at the bottom of the page
7. Do not use CSS expressions
CSS expressions are a powerful (and dangerous) way to dynamically set CSS properties.

The problem with CSS expressions is that they are executed more often than most people would expect. Expressions are not only executed when the page is displayed and resized, but also when the page is scrolled and even when the user moves the mouse on the page. Adding a counter to a CSS expression can track when and how the CSS is executed. Moving the mouse around the page can easily generate more than 10,000 executions.
8. Using external JavaScript and CSS
Using external files in practical applications often produces faster pages because browsers cache JavaScript and CSS files. If JavaScript and CSS placed in external files are cached by the browser, there is no need to increase the number of HTTP requests and the size of the HTML document will be reduced.
9. Reduce DNS queries
DNS generally takes 20-120 milliseconds to look up the IP address of a given domain name. The browser won't download anything from the target domain name until the DNS lookup is complete.

10. Minify JavaScript and CSS

Minification refers to removing unnecessary letters from the code, reducing the file size and improving loading speed.

When reducing code, you need to remove all comments, as well as unnecessary whitespace (spaces, new lines and tabs).

Reduce the size of js or css files and improve responsive performance.

Code obfuscation is another optimization solution that can be used for source code.

Compress

• Summary of Html knowledge
• How to learn HTML quickly
• The difference between html xhtml xml
• The difference between src and href attributes
• About HTML5 and CSS replacement use