Web front-end page performance optimization summary page optimization - reducing the number of HTTP requests

This article is a reprint of someone else's article. Because I don't know the address of the original blog, I am very grateful to the original blogger for his selfless sharing.

1. Advocate front-end development engineers to achieve structural semantics when writing xhtml.

The structure mainly includes two parts, head and body, but we often say that the semantics of the structure is mainly the tags in the body, but I will briefly talk about the head here. The head actually includes some useful for our seo. Some things, such as title, Description, Keywords, these things are helpful when the spider crawls, of course, there are other things, I will not explain them one by one here, such as setting cache and some others information.

Then there are many tags in the body. I think as a qualified front-end developer, you should be familiar with them, such as the use of tags such as div, span, h, ul, ol, dl, p, etc. It should be very reasonable, and it is very important to pay attention to the fault of the h tag and the use of the h1 tag.

At the same time, do not appear inline styles and events such as style and onclick in our structure. I hope everyone can pay attention to the separation of structure from performance and behavior.

(PS: The benefits of tag semantics: 1. Beneficial to search engines; 2. Needless to say about the role of well-structured HTML in teamwork; 3. It is beneficial to blind screen readers. As for how to achieve tag semantics It depends on personal understanding. I also feel vague in this regard, and it is estimated that it has a certain relationship with personal habits. In short, Mr. Zou Huibin thinks that my labels are not semantic.)

2. Optimization of the number and size of css and js files

As for the optimization of css and js, it is generally recommended that css and js be externally linked. But if your page has a lot of content and the designer makes the whole effect more expensive, I am afraid there will be a lot of css. In this case, you must plan your css well and use abbreviations as much as possible, so that you can Reducing the size of CSS files, then making corresponding planning for CSS can also reduce the number of CSS and HTTP requests, and the same is true for JS.

(PS: Reducing repetitive code, code reuse, is particularly important here)

3. Optimization of the number and size of background images

When we restore the designer's design draft to a static page, unless all the decorations on the page are color blocks, the content is all text, and there are no pictures, if this is not the case, then we need to optimize the pictures. Of course, there is nothing we can do about the content picture, because it belongs to the content part. Generally, it is due to editing. Of course, I still have a small suggestion. If we need to have content pictures on our website, I hope the editor can add After they are optimized, they will upload and tell me the method in a while. Next, I will talk about how to deal with our modified (background) images as front-end developers.

Since we have a large number of background images, this will affect the server and increase the number of http requests. Do we have a good solution? The answer is yes, if you are a qualified front-end developer, you should be clear that when our CSS defines the background, the background can be positioned by coordinates. In this case, we can combine these backgrounds , so that the number of http requests can be reduced. At the same time, when we integrate the background, we also need to consider the quality of the image and the size of the image. I have written a corresponding blog post before.

(PS: It is recommended to use PNG8 format images combined with css sprite. For the same image, PNG8 format will be relatively smaller than GIF)

Fourth, the optimization of the size of the content image

In fact, I have already mentioned the problem of content pictures, so I am here to tell you that a relatively simple method is to use a tool provided by Yahoo. He is smushit: http://www.smushit.com/

However, I think his tool is still more troublesome for the content pictures we need to publish, but he can optimize the purpose of optimizing pictures. As I said at the beginning, the smaller the picture, the faster the download speed of our users. Server bandwidth can also play a role in saving.

The above are some simple views on the performance of front-end pages. Of course, the structure, performance, and behavior mentioned in web standards, xhtml, css, and js that we talk about in our work actually have many things that we need to learn, such as structural semantics. Transforming it is a subject of in-depth research, as is performance optimization, but only if we continue to dig and rise, we can make progress. Here is a simple suggestion for my front-end development products:

1. The pages we restore can pass the verification of http://validator.w3.org . Of course, css hopes to pass the verification of http://jigsaw.w3.org/css-validator/validator , but sometimes due to the need Compatible with multiple browsers, it will be affected by hacks, and CSS is not mandatory.

2. As a front-end, I think I should know yslow. If you don't know, you can look at the articles I wrote before. You think your static pages should be able to pass the classic (V1) level detection of yslow2.0, and I think the detection result should get an A.

3. Your background images are guaranteed not to exceed 3, your css files should not exceed 2, and your js files should not exceed 3. And it complies with some regulations of web standards, css is placed in the head, and js files are placed before or after </body>.

4. Of course I want you to be able to do a nudity check on your page. In fact, it is to test whether your structural semantics is effective.

Nude inspection: just remove your css and js, check your html, and see if you can understand the content.

5. Check whether your h tag is faulty.

   (PS: Just follow h1, h2, h3, h4.... don't miss h2 in the middle)

6. It is recommended to add text-align: center to the body.

7. Of course there are many more, such as what id, the name of the class, these things, I think it should be done in your team.

  (PS: Here we have to take a good look at the weight and priority of the clsaa selector)

8. As a large website, the home page uses an inline style sheet, which can reduce the number of http requests and prevent streaking. Of course, other pages need to use external style sheets, so as to facilitate maintenance. Because as a large website, his homepage traffic is very large, so. .

Put style sheets at the top
Put scripts at the bottom of the page
Avoid CSS Expressions
Use external JavaScript and CSS
to reduce JavaScript and CSS
Use <link> instead of @import
Avoid filters to
eliminate duplicate scripts
Reduce DOM access
Develop smart event handling program

The best solution is to load your stylesheets in the document <head /> according to the HTML specification.

For homepages with high pageviews, there is a technique that balances the reduction in HTTP requests from built-in code with the benefits of caching through the use of external files. One of them is to have JavaScript and CSS built into the home page, but dynamically download external files after the page is downloaded, and when these files are used in subpages, they are already cached in the browser.

cookie:

Reduce cookie size
and use cookie-free domain names for page content

picture:

Optimize images
Optimize CSS Spirite
don't scale images in HTML
favicon.ico is small and cacheable

mobile application:

Keep single content less than 25K
packed components into compound text

This article talks about editing. In fact, according to the companies I have visited, many companies are not only editors, but even developers. They don't know enough about xhtml planning, so there are often some pages that have been launched online. problems, such as comments, or the labels are not closed, etc., so I suggest that each company can hold some meetings about communication. In this case, various positions can interact with each other. In fact, it can also be called training. Only in this way can we build produce a good product.

 

 

 

Page optimization - reduce the number of HTTP requests

1. About reducing the number of http requests

 

Reducing the number of http requests is a very important aspect of front-end development performance optimization, so in all basic optimization principles, there is this principle: reduce the number of http requests.

Forget about the rest, let's first consider why reducing http requests can optimize performance.

Reducing http requests has several advantages:

(1) Reduce the time spent by DNS requests.

Not to mention right or wrong, because basically, reducing the number of http requests can indeed reduce the time spent on DNS requests and resolution.

(2) Reduce server pressure.

This is usually the most considered and the biggest reason I use to explain it to others, because each http request will consume server resources, especially some servers that need to calculate and merge and other operations, it is no joke to consume the cpu resources of the server The hard disk can be bought with money, but the CPU resources are not so cheap.

(3) Reduce http request headers.

When we initiate a request to the server, we will carry the cookie under this domain name and some other information in the http header, and then the server will also bring back some header information such as cookies when responding to the request. These Messages can sometimes be large and can impact bandwidth performance during such requests and responses.

2. let's come together

(1) What is DNS request and resolution?

To put it simply, for example: a url such as www.taobao.com, where the www part is called the hostname, the taobao part is the second-level domain, and com is the first-level domain, if it is such a URL: www .ali.taobao.com. Then ali is the third-level domain.

When we request a url, we will first go to the local server to find out whether there is a resolution result in the cache. If there is no resolution result, we will go to the root domain name server to request, and the root domain name server will return to the local domain name server a queried domain name. The ip address of the main domain name server, and then we go to the domain name server that requests the ip address just returned, and then return the ip address of the next-level domain name until we find the server ip pointed to in the domain name, and then cache the result for the next time. use, and return this result.

The DNS resolution process of a url requested for the first time may be very expensive. But after parsing once, the result will be cached, and subsequent requests do not need to go through the above complex resolution process.

As for how long a normal DNS request will take, there is no conclusion, it depends on the network speed and region, but consider that a DNS resolution will be cached after parsing. Large websites like Taobao are all repeat customers. Is it possible to ignore the time spent in DNS resolution?

There is also an optimization method in front-end optimization, that is to add hostname, for example, Taobao image server, which is divided into img01, img02, img03 and other host names, this is done because the browser makes simultaneous http connections under the same domain name The number of restrictions can be seen in the following table: . Then we put the pictures in a page under different hostnames, so that multiple pictures can be downloaded at the same time, the limit of the number of browser http connections can be alleviated, but this The consequence of this is that the yslow score will drop, because yslow considers DNS requests more important.

Browser   HTTP/1.1       HTTP/1.0 IE 6,7           2                     4 IE 8               6                    6 Firefox 2      2                     8 Firefox 3      6                     6 Safari 3,4     4                     4 Opera 9.61   8                     2

Here, it is necessary to introduce what we want to discuss, why the yslow score will be lower under reasonable circumstances, because yslow is just a machine program, it does not know what type of website our website is, what size it is, Is it content-based or application-based, so we can use asynchronous loading to deceive yslow's score for dom nodes, but is asynchronous loading really suitable for our website? Similarly, someone else wrote an article, out of a principle, a Best practice, but are you sure what he's talking about is right for your situation? Sites are big and small, and the things you need to consider are different.

Why is it a better solution to use a different hostname for Taobao pictures?

First of all, because of the particularity of Taobao.com, most of the visitors of Taobao.com are repeat customers, and most of them have dns records cached in their computers. In this case, if it is a small website or an emerging website, it may be considered because there are more new users. DNS requests are a bit more expensive, and first impressions are more important for these sites.

Furthermore, there are many pictures in Taobao, and dozens or even hundreds of pictures are usually used in a page. In this case, we need to break through the limit of the number of http connections of the browser in order to speed up the loading speed. At this time, the priority of loading speed is much higher than the influence of DNS, and the emphasis on DNS in yslow may be more inclined to small and medium websites and websites with fewer pictures.

For DNS requests or tcp (such as tcp handshakes also consume request time) requests, there is also a way to keep alive, keep your link keeplive, so that you can only establish a link once, and then transmit Multiple files can effectively reduce the time to establish a connection.

(2) Reduce server pressure

Too many http requests are very dangerous for the server. If your server is not very strong, please put this consideration in the first place. Other optimization strategies are just optimization, and here is the server involved. Make sure your server is up and running.

Of course, if you are on Taobao, you can sit down and talk to a group of great people about why you should ignore the impact of http on the server, because we have to remember: we are front-end development engineers, we are doing front-end optimization, and the back-end has nothing to do with us , Because we have strong enough technical support and hardware support, when the technology of the website develops to a certain level, our focus should be focused on the user, because what the user sees is what we ultimately want to show, and the user feels The best experience and speed is the speed we want to achieve. No matter how fast we do it in the background, the front desk is slow, our server consumption is less, and money is saved, but users have abandoned us because of this, and everything is in vain. Therefore, When the backstage is enough to support you and you don’t need to think about the pressure of the backstage, then feel at ease and consider how to do the work of the frontstage well.

Yslow is really a misleading tool. As long as we optimize the website according to its principles, we can definitely get a high score to deceive the boss in the end, but for some scenarios, these optimizations are often a kind of performance damage, such as Taobao In order to improve the Yslow score on the homepage of the mall, all images use a hostname. The score is improved, but parallel loading is reduced. However, the homepage of the mall is asynchronously rendered and loaded asynchronously, so this effect does not seem obvious. .

There are many optimization points for yslow on the homepage of the mall. Of course, most optimizations are correct. For example, the navigation is all written on the page. Don't underestimate the navigation. There are N link nodes in it, so that from the browser When copying the source code, the browser will freeze, because the number of bytes is too much, and yslow will definitely not spare it here. Later, we made the navigation load asynchronously, and the score goes up as a matter of course. But this is Taobao.com , we have enough speed to provide a sufficient user experience. If your server can't provide this speed and can't withstand such frequent asynchronous requests, this optimization must be done carefully, and the delay may cause navigation to be unavailable. This It is also tailored to the scene.

Taobao is now widely deploying CDN, CDN can provide us with sufficient back-end resource guarantee, in the case of continuous improvement of CDN and back-end environment, the consideration should be more focused on the improvement of front-end transmission speed and display parsing speed.

(3) Merge scripts and styles?

In fact, the discussion in the previous article is also about different considerations for different application scenarios.

One way to reduce the number of http requests, for the front end, is to combine script and style files, called combo, by combining multiple files into one file and then transferring it to the client at one time, which can reduce http requests, indeed It is an effective method. Even for some special pages, such as the home page, we write the styles and scripts in the page, and they are not separated at all. They will not generate http requests, and of course, they will not be cached. the price of sacrifice.

Why do we do this, because the number of visits to the home page is very large? This can effectively reduce the number of http requests? Well, this is only part of the reason, it does have such benefits, and for websites whose assets server is not powerful enough, in concurrent It is very effective to implement this set on a large number of homepages.

However, the most visited page on Taobao is not the home page, but the detail page, which is the product details page!

This is the focus of our discussion. Why is the home page using combo or even written in the page, while the detail is referenced according to normal styles and scripts. The home page is similar to a static page, and the detail is an application type. It plays a guiding role, but if the detail page script is not running, you can't even buy the product.

In fact, this discussion here does not clearly see the problem, because Taobao is not very mature in these aspects, the detail page references a lot of scripts and styles, and many content are redundant and expired.

This essentially represents two page types, one content and one application. For content sites, scripting is not very important (or even styling), because without scripting, the user can still browse the page, It’s just that some effects may not be visible, so we can combine the scripts and put them at the bottom of the body. After the page content is loaded, load it in at one time. For application-based web pages, let the application run. Most importantly, because this webpage is meaningless without the application, it is a trend to load scripts on demand at this time. We need to load the basic framework and functions of the application on demand first, and let them run separately, while Instead of waiting for the script to load and then initializing it together, we need the application to respond quickly to the user,

And when it comes to CDN, when the CDN becomes strong enough, the number of connections is no longer a bottleneck. We should think more about how to make web pages appear to users more quickly. For content-based web pages that can provide services without scripting, use Scripts are placed at the bottom of the page and combined (to reduce the number of connections, we still need to reduce the number of connections, without the need to use scripts too quickly), and for application-based pages, we need to make functions work as soon as possible, even let them Parts are initialized by priority, at this time, the scripts should be separated and loaded on demand.

(4) Reduce http request headers

The http header is a huge guy, you open the homepage of taobao.com, alert document.cookie, you will find that Taobao's cookie is so huge, even bigger than a small web page, every time you request Taobao's server, it will go back and forth to the data , there are some other header information, the space occupied is not small, it is conceivable how much this consumption is.

Then in fact, since CDN is used, there is no need to think about it too much, because CDN and Taobao main site are not under the same domain name, cookies will not pollute each other, and there is basically no cookie and header information under the domain name of CDN, so every time When requesting static resources, it will not run around with the cookie of the main site, but only transmit the subject content of the resource, so the impact on performance will become very small after using cdn. But if your static resource server and the main site The server is under a domain name, so it is necessary to control the size of cookies and other header information, because they will be sent every time.

finally

In a word, the optimization principle is not absolute. Different focus should be considered for different scenarios. Others’ solutions may not be optimal for you. You should optimize the scale and type of your own website appropriately, and you should not blindly pursue Standards and best practices.

 

(1) Reduce the number of http requests: CSS Sprites, JS, CSS source code compression, image size control is appropriate; webpage Gzip, CDN hosting, data cache, image server. (2) Front-end template JS + data, reduce bandwidth waste caused by HTML tags, front-end uses variables to save AJAX request results, each operation of local variables, no requests, reduce the number of requests (3) Use innerHTML instead of DOM operations to reduce the number of DOM operations , optimize javascript performance. (4) When there are many styles to be set, set the className instead of directly operating the style. (5) Use less global variables and cache the results of DOM node search. Reduce IO read operations. (6) Avoid using CSS Expression (css expression), also known as Dynamic properties (dynamic properties). (7) Images are preloaded, style sheets are placed at the top, and scripts are placed at the bottom with timestamps. (A timestamp, usually a sequence of characters, uniquely identifies the time at a certain moment. Digital timestamp technology is an application of a variant of digital signature technology.)

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325232810&siteId=291194637