Frontend Performance Optimization

 

First, we must understand the optimization objects and clarify the optimization objectives so that we can adopt the correct optimization methods.

1. Optimization objects

--> Front end!

First, you must know the steps to open a webpage:

We can see that there are three main parts: Network, server, and browser.

After learning about the optimization object, we can optimize each part.

2. optimization objectives

--> Time! (Primary goal)

3. Optimization Methods

--> Hierarchical optimization!

First, understand the three-tier model to be optimized:

For more information about this model, see http://www.w3.org/TR/navigation-timing/

For the network layer, the optimization principle is:

1. Reduce redirection and bad connections

2. Streamline the number of static resources and the number of domain names on the hosts page.

3. enable caching

4. Exercise caution when using cookies and Https for the producer (cookis will bring a lot of data to the server to increase traffic; https requires more SSL requests)

For the server layer, the optimization principle is:

1. Return the first byte of content as soon as possible

2. asynchronously load the html content at the bottom of the page

3. Compress html and enable gzip.

For the browser layer, the optimization principle is:

1. Place CSS on the top of the page

2. Optimize the sequence of CSS and JS

3. Control the number of DOM trees

4. asynchronously load some static Resources

5. delayed execution

Example:The time consumption of each part is clearly displayed and can be optimized (the green font is the timestamp)

Source: http://www.cnblogs.com/kivi/p/3193612.html