How to quickly display our webpage skills

A few days ago, xiaofang had been initiating some acceleration topics in the group. I had extracted the chat records and planned to prepare a decent copy. I didn't expect xiaofang to come out quickly. I just saved it.

In particular, these solutions are not suitable for all websites, and it will be better if some websites do not. If you have more ideas, you can discuss them here or comment on them. I just archive them for easy reading. I will also add some valuable results from Forum and group discussions.

How to quickly present our webpage Author: flashsoft (the content has been slightly repaired and deleted by me ).

I. We need to solve the problem

• Reduces the number of HTTP requests. What are the benefits of reducing the number of HTTP requests?
  • Reduce the establishment of servers and clients and eliminate the overhead of HTTP requests and Response Headers
  • Reduce the overhead of processes and threads for HTTP connections on the server. If possible, the overhead of GZIP compression CPU is also included.
• Reduce the size of the requested file and the network bandwidth occupied by the request data.
• Allows users to view desired results more quickly.
• Improve client rendering speed.
• Allows the browser to request more data at the same time.
• Increase the server speed.
• Use versioning to control the client Cache.

Ii. How to solve our troubles A. How to reduce the number of HTTP requests

1. Merge JS files and CSS files.
2. Merge frame images and images with relatively few changes into one image, and perform rendering through CSS background cutting, for example, accelerating image display.
3. Properly use the local Cache to Cache JS/CSS/IMAGE.
4. Reasonably use UserData to cache JS files. For FF users, they can independently request the server, which can solve the problem of 80% users. The code can be the js framework1 of meizz.
5. Merge JS and CSS into a file

B. reduce the size of the requested file and the network bandwidth occupied by the requested data

1. Compressing JS volume: delete blank line breaks, comments, and obfuscation in JavaScript to replace long variables with short variables;
2. Compress CSS volume: delete CSS comments and try to use abbreviations;
3. Use (X) HTML + CSS to build website structures, improve CSS reusability, and reduce (X) HTML file size;
4. Use GZIP on the server to compress JS/CSS files and reduce the file size. Note: GZIP of Apache1 and Apache2 is different in efficiency and mode. You can choose one as needed.

Additional description: compression, merging of JS and CSS are all processed by the program. Instead of manually reducing or deleting the file, it is not conducive to later maintenance.

C. allows users to view desired results more quickly

The tolerable time for a site's white pages is 8-12 seconds. The white pages may be generated for various reasons. What we can do is to let users wait a little longer.

• Solution 1. Create a boot page to let users know the changes
  Case: loading guide page in mail.aol.com
• Solution 2: load the Page Structure and structure images first, load the data on the current page in the next step, and load the data such as Iframe and Flash in the next step, so that users can see the hope of the opened page as soon as possible.

D. Improve client rendering speed

This problem is quite general, affecting the client rendering speed in many aspects, the main purpose is to improve the efficiency of the program.

1. For a large index structure, use as few indexes as possible to access it. You can use the method of accessing sibling nodes as much as possible.
2. Concatenate strings in array mode as much as possible
3. Do not use the appendChild method to add node data on a large scale. Try to use the insertAdjacentHTML method similar to innerHTML, and change the value to 2 in FF.

E. Allow the browser to request more data at the same time.

By default, the browser only supports two HTTP requests for a single domain name at the same time. Using Multiple Domain Names can increase the number of requests, allowing you to download data faster and present results when the network conditions are good.

F. Increase the server speed

It should be a good solution to put files that require rapid response into the server that responds quickly. The system reserve group should provide the optimization scheme.

G. Control the Client Cache through versioning.

Files such as js and css are frequently changed. However, to speed up loading, we may need to set the expiration time of these files to a few days. The problem we encounter is, how to update these files in the cache in a timely manner?
Through a simple configuration, you can modify the JS version to tell the browser in time that these files must be requested again and do not continue to use the data in the browser cache. There are several solutions:

1. Manually change the js file names
2. Manually change the js path
3. Modify the js path through URL Rewrite
4. Through a js configuration notification page on the high response server, which JS files are linked to this page
5. The major version remains unchanged, and the minor version is constantly appended. after a certain period of time, it will be updated in a unified manner to efficiently use the cache

Annotation

1. The js framework of meizz has not yet been officially released. If you are interested, refer to the CSDN page.
2. Firefox Correction Method

   function addHTML(oParentNode, sHTML) {
      if(window.addEventListener) {// for MOZ
        var oRange = oParentNode.ownerDocument.createRange();
        oRange.setStartBefore(oParentNode);
        var oFrag = oRange.createContextualFragment(sHTML);
        oParentNode.appendChild(oFrag);
      }
      else {// for IE5+
        oParentNode.insertAdjacentHTML("BeforeEnd", sHTML);
      }
   }