Home > Article > Backend Development > Fourteen PHP programming details to improve website performance_PHP Tutorial
Bangkejia (www.Bkjia.com) Tutorial I believe that the Internet has become more and more an indispensable part of people's lives. Rich client applications such as ajax, flex, etc. make people more "happy" to experience many functions that could only be realized in C/S. For example, Google has moved all the most basic office applications to the Internet. Of course, while it is convenient, it will undoubtedly make the page slower and slower. I am a front-end developer. In terms of performance, according to Yahoo's survey, the backend accounts for only 5%, while the front-end accounts for as much as 95%, of which 88% can be optimized.
The above is a life cycle diagram of a web2.0 page. Engineers vividly describe it as divided into four stages: "pregnancy, birth, graduation, and marriage." If we can be aware of this process when we click on a web link instead of a simple request-response, we can dig out many details that can improve performance. Today, I listened to a lecture by Taobao Xiaoma on the research of web performance by the Yahoo development team. I felt that I gained a lot and wanted to share it on my blog.
I believe many people have heard of the 14 rules for optimizing website performance. More information can be found at developer.yahoo.com
1. Reduce the number of HTTP requests as much as possible
[content]
2. Use CDN (Content Delivery Network)
[server]
3. Add Expires header (or Cache-control)
[server]
4. Gzip component
[server]
5. Place CSS styles at the top of the page
[css]
6. Move scripts to the bottom (including inline ones)
[javascript]
7. Avoid using Expressions in CSS
[css]
8. Separate JavaScript and CSS into external files
[javascript] [css]
9. Reduce DNS queries
[content]
10. Minify JavaScript and CSS (including inline)
[javascript] [css]
11. Avoid redirects
[server]
12. Remove duplicate scripts
[javascript]
13. Configure entity tags (ETags)
[css]
14. Enable AJAX caching
There is a plug-in yslow under firefox, which is integrated in firebug. You can use it to easily check the performance of your website in these aspects.
This is the result of using yslow to evaluate my website Xifengfang. Unfortunately, it only scored 51 points. hehe. The scores of major Chinese websites are not high. I just took a test and both Sina and NetEase scored 31. Then the score of Yahoo (USA) is indeed 97 points! This shows Yahoo's efforts in this regard. Judging from the 14 rules they summarized and the 20 newly added points, there are many details that we really don't think about at all, and some practices are even a little "perverted".
The first one, reduce the number of HTTP requests as much as possible (Make Fewer HTTP Requests)
http requests are expensive, and finding ways to reduce the number of requests can naturally improve web page speed. Commonly used methods include merging css, js (merging css and js files in one page respectively), image maps and css sprites, etc. Of course, perhaps splitting css and js files into multiple files is due to considerations such as css structure and sharing. Alibaba's Chinese website approach at that time was to develop it separately, and then merge js and css in the background. This way it was still one request for the browser, but it could still be restored into multiple ones during development, which facilitated management and repeated references. . Yahoo even recommends writing the css and js of the homepage directly into the page file instead of external references. Because the number of visits to the homepage is too large, this can also reduce the number of requests by two. In fact, many domestic portals do this.
Css sprites only use the background images on the page to be merged into one, and then use the value defined by the background-position property of css to get its background. Taobao and Alibaba Chinese sites currently do this. If you are interested, you can take a look at the background images of Taobao and Alibaba.
http://www.csssprites.com/ This is a tool website that can automatically merge the images you upload and give the corresponding background-position coordinates. And output the results in png and gif format.
Article 2, use CDN (content delivery network): Use a Content Delivery Network
To be honest, I don’t know much about CDN. To put it simply, by adding a new layer of network architecture to the existing Internet, the content of the website is published to the cache server closest to the user. DNS load balancing technology determines the user's source to access the cache server nearby to obtain the required content. Users in Hangzhou access content on the server near Hangzhou, and users in Beijing access content on the server near Beijing. This can effectively reduce the time for data transmission on the network and increase the speed. For more detailed information, you can refer to the explanation of CDN on Baidu Encyclopedia. Yahoo! distributes static content to a CDN and reduces user impact time by 20% or more.