Static resource version updating and caching for front-end engineering and performance optimization

Each front-end engineer who has been involved in developing an enterprise-class Web application may have thought about front-end performance optimization issues. We have Yahoo 14 performance optimization principles, there are two very classic performance optimization guide: "high-performance Web site Building Guide", "high-performance Web site Building Advanced Guide." Experienced engineers for the front-end performance optimization methods, the basic can be enumerated. These performance optimization principles were proposed more than 7 years ago and have a very important guiding significance for Web performance optimization so far.

However, it is not easy to adhere to these optimization principles for teams that build large Web applications. Because many of the requirements of the optimization principle is contrary to the engineering management, such as "Put the CSS in the head" and "put JS in the tail" These two principles, we can not let the team's engineers in the writing style and script references to modify the same page file. This can seriously affect the efficiency of concurrent development among team members, especially if the team has version management, which takes a lot of time each day to incorporate code modifications, which is difficult to accept. Therefore, in the front-end engineering sector, will always see the periodic performance optimization work, the Hard-working front-end engineers every night on the full moon full force according to the optimization principle to do a performance optimization.

This article from a new perspective to consider the relationship between Web performance optimization and front-end engineering, through the interpretation of Baidu Front-End Integration Solution Group (F.I.S) in the building High-performance front-end architecture and unified Baidu more than 40 front-end product line of the process of the experience of the technical trial, The realization of front-end performance optimization in front-end architecture and development tool design level is revealed.

Principle and classification of performance optimization

The author first assumes that the reader is a front-end development experience engineers, and the enterprise-level Web application development and performance optimization has some thinking, so I will not repeat Yahoo 14 performance optimization principles. If you do not have these prior knowledge, please visit here to learn.

First of all, we put Yahoo 14 optimization principles, "high-performance Web site Building Guide" and "High-performance Web site Building Advanced Guide" mentioned in the optimization point to do a comb, according to the optimization direction classification, you can get such a table:

Table 1 Classification of performance optimization principles

At present, most of the front-end team can use Yui compressor or google closure compiler, such as compression tools easy to "streamline JavaScript" this principle; Similarly, you can use the image compression tool to compress images to achieve "image optimization" Principle. These two principles are the treatment of individual resources and therefore do not cause any engineering problems. Many teams also make sure to implement the "avoid CSS expressions" and "avoid redirection" Principles by introducing code validation processes. At present, most Internet companies have also opened the service-side gzip compression, and use CDN to achieve static resource caching and fast access; some of the technical strength of the front-end team even developed an automatic CSS sprites tools to solve the CSS sprites in the engineering maintenance problems. With the "Find-replace" approach, we also seem to be able to implement the "divide the master domain" principle well.

We have put these to the mature application of the actual production of optimization methods to remove, leaving those are not well implemented optimization principles. Review the previous performance optimization categories:

Table 2 The more difficult to implement optimization principles

There are a number of top-end teams that can solve all the remaining optimization principles, but most teams in the industry have not been able to solve them well. Therefore, this article will be on these principles of the solution to do further analysis and explanation, so that those who have not yet entered the front-end industrialization development of the team to provide some basic technical advice, but also to take this opportunity with the industry's top front-end team in the direction of industrial engineering to exchange each other's experience.