[Code Optimization] How to improve the loading speed of web pages

Summary: 1. Reduce page requests: From the operating principle of WEB, IIS requests are stateless, and the connection and closing are always going on on the server side. If the server requests can be reduced, the total time will be reduced. When I downloaded the pictures of the landing page of 163 mailboxes, I found that they only used one picture to complete all the pictures of the entire page. At that time, I was wondering, this is different from the usual website.

1. Reduce page requests:

From the operating principle of WEB, IIS requests are stateless, and the connection and closing are always going on on the server side. If the server requests can be reduced, the total time will be reduced.

When I downloaded the pictures of the landing page of 163 mailboxes, I found that they only used one picture to complete all the pictures of the entire page. At that time, I was wondering, this is different from the usual website. However, doing this reduces the number of browser requests, and with httpwatch you will find that the total request time is greatly reduced. In the same way, when doing CSS styles and JavaScript codes, you should put them in a file as much as possible to reduce WEB requests.

2, page compression technology, give us js, HTML code to slim down.

As the most lightweight class library of JS, jQuery's original class library is 242KB, and it is only 91.6KB after compression. Common compression tools include Google Closure Compiler, YUI Compressor, JsPacker, and gzip. I usually use gzip because it has the highest compression ratio. After compressing with jdk, it will remove some spaces and replace our long variable names with very short letters.
3. Separation of style, behavior and structure.

When the user visits the page for the first time, the user can download the CSS and JS code. Although this will slow down the loading speed of the web page for the first time, the subsequent pages will be much faster. When users visit other pages of this website, because other pages also refer to this CSS style and JS code. The browser finds that it has been downloaded, and it can be downloaded next time. This achieves one download and the effect of subsequent speed.

4. Use the stored procedure

Before running the stored procedure, the database has carried out the syntax and syntax analysis on it, and gave the optimized execution plan. This already compiled process can greatly improve the performance of SQL statements. Because most of the work of executing the SQL statement is already done, stored procedures can execute extremely fast. This precompiled SQL statement can be executed directly and saves a large part of the query time.

5. Some details:

put CSS styles at the head, and if there is a lot of JS, put the js code at the end. In this way, the DOM structure of the page can be loaded as much as possible before the user experience can be improved. If the JS is too large, the page will not be loaded, how can the user experience be said.

6. Appropriate use of AJAX

The current Ajax seems to be a bit of a myth. It seems that as long as the web page is Ajax, then there is no efficiency problem. This is actually a kind of misunderstanding. Poor use of Ajax won't make your web pages more efficient, it will make your web pages less efficient. Ajax is a good thing, but please don't over-myth it. Also consider the above guidelines when using Ajax.

7. Use the page style code generated for us by the style tool as little as possible, and write the style in the style file by yourself. Write as generically as possible.

8. Page caching Caching technology is used

in large portal websites, which is a technology that exchanges space for time.

Cache is mainly to improve the reading speed of data. Because there is a traffic bottleneck between the server and the application client, when reading large-capacity data, using the cache to directly serve the client can reduce the data interaction between the client and the server, thereby greatly improving the access speed of the secondary page. efficiency of the program.
9. Configure the entity tag of the website:

This Etag is not for users, but for browser caching. Etag is a mechanism for the server to tell the browser cache whether the content in the cache has changed. Through Etag, the browser can know whether the content in the current cache is the latest, and whether it needs to be downloaded from the server again.
10. Use CDN technology.

When we download things online, we often see "south servers" and "north servers" that use CDN technology to improve download speed and stability.

The full name of CDN is Content Delivery Network, that is, Content Delivery Network. The basic idea is to avoid bottlenecks and links that may affect the speed and stability of data transmission on the Internet as much as possible, so that content transmission is faster and more stable. By placing node servers everywhere in the network to form a layer of intelligent virtual network on the basis of the existing Internet, the CDN system can real-time based on network traffic and the connection and load status of each node, as well as the distance to the user and response time Such comprehensive information redirects the user's request to the service node closest to the user. Its purpose is to enable users to obtain the desired content nearby, solve the situation of Internet network congestion, and improve the response speed of users visiting websites (from Baidu Encyclopedia).

11. Use Gzip to compress documents:

GZIP encoding is a method used to improve the performance of web pages, not only to reduce storage space, but also to reduce the time required for transmission. After the files in the website are compressed with Gzip, the loading speed of the webpage can be significantly increased, and the bandwidth consumption of the website can also be reduced.
12. The style sheet file is called externally:

Put the javascript and CSS style sheet files that need to be used in the page in another folder, so that when opening other pages of the website, these called files will be cached, thereby speeding up The loading speed of website pages.
13. Slimming down JavaScript files:

This method is different from the gzip compression function. There are many ways to minify JavaScript documents, such as removing unnecessary spaces and other tags. After reducing script files, the access speed of web pages can be significantly improved.
14. Pictures use height and width properties The height and width properties of

each picture allow the browser to know the length and width of the picture before loading the picture, and reserve the specified length and width to be displayed after the picture is loaded. Without these two attributes, the browser needs to process the page layout style again after reading the image successfully, which undoubtedly slows down the loading speed of the web page. Therefore, in the case of fixed image size, it is best to use the upper length and width attributes.
15. CSS file compression and slimming

DIV+CSS is a fluent web layout method. DIV defines elements and CSS controls the display effect. So often we will write CSS to one or more externally linked CSS files, and the CSS file code also has many lines. We can use some CSS compression tools to remove unnecessary redundant content in CSS files, such as repeated definition of styles, spaces, etc. to slim down. Try using the CleanCSS tool to compress your CSS files.

16. Integrate CSS and JS files to reduce the number of HTTP requests.

  Today's web pages have multiple images, links to CSS external files, and links to Javascript external scripts. So when visiting a web page, the browser needs to request these files from the server multiple times. There is a considerable time lag between the request and the load. Especially on some webpages with multiple small pictures and icon buttons, the browser needs to request as many of these small files as there are many pictures, and many requests for these small picture files will obviously affect the loading speed of the webpage. So we should try to combine the small pictures on a large PNG picture as much as possible, and then display the icon by coordinates. It is much faster to request a large image at a time than to request a small image multiple times. Also, it's best to combine CSS and Javascript into one file as much as possible to help speed up page loading.
17. Add a slash (/) after the directory address

  If the visitor clicks to visit such a directory address: http://www.zhen.com/dajiaguifan, go to open the index.html document in this directory. When the server receives a request it takes some time to analyze whether it is a file or a directory. But if we add a slash (/) at the end, the server knows that you are accessing a directory address and just loads the default document index.html or index.PHP. In this way, the server does not have to spend time analyzing this address, and it also plays a role in speeding up.

Use Yunqi Community APP, feel comfortable~