Shulou(Shulou.com)06/03 Report--

This article mainly introduces the technologies used in high-performance websites, which are introduced in great detail and have certain reference value. Friends who are interested must finish reading them.

Translated by mask

Since 2004, I began to join Yahoo's abnormal performance team. We are a very small team specializing in quality testing and improvement of Yahoo products, and as a back-end engineer, I am now starting to work on front-end code optimization, so I think this is an excellent opportunity for progress. My goal is to improve the user-side experience. I measured the response time of browsers at various bandwidths and came up with the following chart showing traffic from http://yahoo.com 's http.

The first tag of the above icon is html, which is the first thing a html document loads. In this example, reading html code accounts for only 5% of the total response time. This result applies to the vast majority of websites. Only one of the top 10 sites sampled in the United States is more than 5% but less than 20%, and the remaining 80% of the time is spent reading the rest of the page, that is, the front end (the original text is front-end). It means it doesn't include the rest of the html code, it can be pictures, scripts, flash, videos, etc.). This is the key reason why we should focus on these things to improve the display speed.

There are three main reasons why you should start at the front end:

There is potential for improvement and improvement. If you can reduce the volume by half, you can reduce response time by 40%. It takes less time and resources to improve the front end than to improve the back end. (to improve the back end to redesign application planning, code, find ways to optimize code, add or change hardware configuration, distributed database, etc.) front-end improvements have been proven in our work, we have 50 teams at yahoo, under our best performance rules, improve their client response time by 25% or more.

Our golden rule is to optimize front-end performance first, which consumes 80% of the client's response time.

1. Reduce the number of http requests

Images, css,script,flash, etc., all increase the number of http requests, and reducing the number of these elements reduces response time.

CSS Sprites technology can reduce the number of requests for pictures, put scattered small pictures together, and use background-position to change the position of the background image, provided that the html element defines the width and height in advance, in fact, it is like a mask, moving the background will see a different scene.

Embedded images use data:URL scheme to embed the image content code directly into the html code, which increases the size of the html code, and the improved way is to embed the embedded image into the css (css is cached), which will better reduce the number of http requests without increasing the size of the html.

Many users enter your site in an empty cache, so the speed of the first time will be very important.

The first rule is the most important one.

The above is all the contents of the article "what are the technologies used in high-performance websites?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.