Site analysis 5173 home front end performance optimization practices

from the development plan, to the front and rear end of the development, and finally to the test and on-line, which lasted 4 months, 5173 home front end performance optimization project has finally been successfully on-line, and achieved the expected performance optimization goals. The project is not revision, but the original design and function of the same page, only to refactor and optimize. Although the project is called front end performance optimization, but it is not just the front end of the unilateral work, to thoroughly optimize the good, you need to cooperate with the front and rear end.

history background

is a 09 year old home should be on the line, home is the place where all departments for resources, everyone wants to have a space for one person in the home, each department in the home have small chunks of their own, if there is a new project on-line, mostly patch, and the only standard is to ensure the normal operation. As for the performance, that is very far away. Bitter is the developer, every time a home modification is feel alarmed and afraid of change and the the problem of historical reasons, more and more problems.

first can not see, it should be front-end staff, because the home page in the repair repair constantly, the performance has been poor to the front end staff feel very pale. But not only do not go down, not to take substantive measures to improve, because it involves the interests of various departments, such as the above said, the optimization is not only the front and front end staff can only reflect the above problems. To this year, leaders finally could not stand, a leader in overseas visit our home page 818 and 5173, in contrast to the former home soon (by the way, the 818 page developer is my ^_^), the home is very slow, the difference. Thus, in the promotion of leadership attention, the 5173 front page performance optimization project was approved, developers can finally let go of the bold.

problem analysis

should make plans and make plans before starting a job. Starting from solving practical problems, first of all, look at the old home page. This is the relevant data I collected when making plans:

1, the number of requests too much, in which CSS outside the chain number has 12, JavaScript outside the chain number has 41;

2, the total volume of the page is too large, many static resources are not plus gzip, dynamic site JS even have not compressed;

3, the resource occupation is serious, in the IE6 scroll page, CPU occupancy rate as high as 80% above, memory leak is also very serious;

4, ad systems, advertising pictures are loaded in document.write, and the pages are clogged.

5, the page has 7 iframe;

6 and data source interface confused;

7, page loading speed is too slow, >