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

This article introduces you how to optimize the performance of the Web front-end, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Yahoo! Exceptional Performance team has made an outstanding contribution to the front end of Web. The well-known optimization rules have gone from 13 to 14, then to 20, and now to 34-really keeping pace with the times. The latest 34 articles are also classified for different angles.

There are currently 10 content-oriented optimization rules.

1. Minimize HTTP requests (Make Fewer HTTP Requests)

As the first and perhaps the most important one. According to Yahoo! According to the data analysis of the research team, a large number of users will benefit most from this article. There are several common ways to actually reduce HTTP requests:

1) merge files, such as combining multiple CSS files into one

2) CSS Sprites uses CSS background related elements to locate the background image absolutely; see: CSS Sprites: Image Slicing's Kiss of Death

3) Image map

4) inline images use data: URL scheme to embed image data in the actual page.

two。 Reduce DNS lookups (Reduce DNS Lookups)

It must be clear that DNS lookups are expensive. Besides, I think this is Yahoo! Common fault of all sites, Yahoo! The main site may not be obvious enough, some sub-sites, there are obvious similar problems. For domestic sites, if you use too much off-site Widget, it is also easy to cause too many DNS search problems.

3. Avoid redirection (Avoid Redirects)

Not absolutely avoid, reduce as much as possible. In addition, you should pay attention to some unnecessary redirects. For example, adding a / (Slash) to the subdirectory of the Web site can effectively avoid a redirection. There is a difference between http://www.dbanotes.net/arch and http://www.dbanotes.net/arch/. If it is an Apache server, you can eliminate this problem by configuring Alias or mod_rewrite or DirectorySlash.

4. Make Ajax cacheable (Make Ajax Cacheable)

Response time is critical to Ajax, otherwise the user experience would not be much better. The effective way to improve response time is Cache. Other optimization rules are also valid for this one.

5. Delay loading assembly (Post-load Components)

6. Preload component (Preload Components)

Strictly speaking, the above two items belong to the flexible application of the idea of asynchronism.

7. Reduce the number of DOM elements (Reduce the Number of DOM Elements)

8. Split components into multiple domains (Split Components Across Domains)

The main purpose is to improve the parallel download ability of page components. But don't cross too many domain names, or there will be some conflict with the second one.

9. Minimize the number of iframe (Minimize the Number of iframes)

Friends who are familiar with SEO know that iframe is a big taboo of SEO. For front-end optimization, iframe has its advantages and disadvantages, so let's look at the problem in two.

10. Eliminate http 404 errors (No 404s)

Full testing of page links and continuous tracking of Web server error logs can effectively reduce 404 errors and improve the user experience. It is worth mentioning that the 404 errors caused by CSS and JavaScript are often overlooked because they are slightly "difficult" to locate.

Here are 10 items in the content section. It should be said that the specific guiding content is not detailed enough. Will gradually add up according to their own understanding.

Web page production poluoluo article introduction: Web front-end performance optimization is a big topic, is a topic worthy of continuous tracking by operators, is a technology mercilessly ignored by many websites.

The second part of the Web front-end optimization best practices is for Server.

At present, there are a total of 6 practical rules. [note, this is a technical note at most, to view the original content, and please visit: Exceptional Performance: Best Practices for Speeding Up Your Web Site]

1. Use CDN (Use a Content Delivery Network)

The popularity of CDN in China is not enough. However, we have unique problems between telecom and Netcom, and if we optimize for this, we can basically get a CDN or similar effect (pretend to be so). [Tin said that domestic CDN is used a lot. Just look at the market of CDN manufacturers. It hasn't entered the homes of ordinary people yet.)

two。 Add Expires or Cache-Control headers (Add an Expires or a Cache-Control Header)

Each browser has its own solution. Apache example [Note: the following example is not detailed enough, and some adjustments need to be made in the specific environment]:

ExpiresActive On

After ExpiresByType image/gif "modification plus 1 weeks" Lighttpd enables the mod_expire module:

$HTTP ["url"] = ~ "\. (jpg | gif | png) _ _ FCKpd___1quot; {

Expire.url = ("" > "access 1 years")

} reference for Nginx example:

Location *\. (jpg | gif | png) ${

If (- f $request_filename) {

Expires max

Break

}

}

3. Compressed content (Gzip Components)

For most sites, this is a necessary step, which can effectively reduce the pressure of network traffic. Maybe some people are worried about the impact of CPU compression on CPU, don't worry about it, it's all right. Nginx example:

Gzip on

Gzip_types text/plain text/html text/css ext/javascript; also see:

How does IIS enable Gzip compression?

4. Set Etags (Configure ETags)

For Etag, it is probably something that most website maintainers will ignore. Before the emergence of this series of optimization rules, the vast majority of sites on the Internet may have ignored this problem. Of course, Etag does not have a significant impact on the performance of most sites. Unless it's a website for RSS. [see some friends criticize the brevity of writing and say that IE does not support ETag. To be clear: IE supports ETag, but when using IIS, you should pay attention to the relevant Etag Bug. ]

Add: I mean, "many websites open Etag without paying attention, but no website cares about how to use it and consumes resources without knowing. It is not that Etag is not good, rational use of Etag, absolutely can get a good profit."

5. Refresh Buffer (Flush the Buffer Early) as soon as possible

After thinking about this for a long time, it seems that it is still an asynchronous way of thinking. Can it improve the user experience better?

6. Use the GET method (Use GET for AJAX Requests) for AJAX requests

It takes two steps for XMLHttpRequest POST and one step for GET. Note, however, that the maximum URL length that GET can handle on IE is 2K.

Web page production poluoluo article introduction: Web front-end performance optimization is a big topic, is a topic worthy of continuous tracking by operators, is a technology mercilessly ignored by many websites.

The third part of the Web front-end optimization best practices is for Cookie. At present, there are only two practical rules.

1. Shrink Cookie (Reduce Cookie Size)

Cookie is a very interesting topic. According to the description of RFC 2109, each client maintains a maximum of 300 Cookie, a maximum of 20 Cookie per domain name (in fact, most browsers now have more than this, for example, Firefox is 50), and a maximum of 4K per Cookie. Note that the 4K here may not be strict 4096 depending on the browser. Don't go too far, the most important thing for Cookie is to control the size of the Cookie as much as possible and not to cram in some useless information.

two。 Use domain name independent Cookie (Use Cookie-free Domains for Components) for Web components

This topic has been mentioned in previous discussions on Web image server. The Web Component here refers to static files, such as pictures, CSS, etc., Yahoo! All the static files are on yimg.com, and when the client requests static files, it reduces the impact of repeated transfers of Cookie on the primary domain name (yahoo.com).

From this When the Cookie Crumbles, we can see that the Cookie of MySpace and eBay is not small, so they must be more concerned about user behavior. EBay recently constructed Personalization Platform to jump out of the limitations of Cookie.

Web page production poluoluo article introduction: Web front-end performance optimization is a big topic, is a topic worthy of continuous tracking by operators, is a technology mercilessly ignored by many websites.

The fourth part of the Web front-end optimization best practices is for CSS.

At present, there are a total of 6 practical rules. See also the Mozilla developer Center article: Writing Efficient CSS

1. Put CSS at the top of the code page (Put Stylesheets at the Top)

I think the official explanation is somewhat vague. This one is actually related to the user's expectation of access. CSS is placed on top, and browsers can parse and render HTML pages from top to bottom. No one likes to wait, and browsers have taken that into account.

two。 Avoid CSS expressions (Avoid CSS Expressions)

Personally, what I think can be done through CSS expressions can also be done by other means with less risk.

3. Stripping JavaScript and CSS (Make JavaScript and CSS External) from the page

After stripping, it can be targeted to carry out separate processing strategies, such as compression or caching strategy.

4. Streamlined JavaScript and CSS (Minify JavaScript and CSS)

It would be better without JavaScript and CSS. But that's impossible, SO. Try to be small. An abbreviation in which grammar can be abbreviated.

5. Use instead of @ importChoose over @ import

In IE, the @ import instruction is equivalent to writing the link tag at the bottom of the HTML. And this is contrary to the first one.

6. Avoid using Filter (Avoid Filters)

Web page production poluoluo article introduction: Web front-end performance optimization is a big topic, is a topic worthy of continuous tracking by operators, is a technology mercilessly ignored by many websites.

JavaScript article on Web front-end optimization best practices

There are six rules in this section, and several are repeated in CSS. Front-end optimization best practices, the most important thing is "practice", to understand this thing is very easy, the key is to "practice", to "implement", to "feedback", to get benefits.

1. Put the script at the bottom of the HTML code page (Put Scripts at the Bottom)

When a script is downloaded, the browser can't do anything else (serial). So, throw it to the last side to deal with. For some functional scripts, it may be a bit of a dilemma to implement. However, for domestic websites, there are many who use Google Analytics services for website data analysis. At this point, the absolutely feasible suggestion is to put it at the bottom of the page.

2. Make JavaScript and CSS External

See the description of CSS

3. Streamlined JavaScript and CSS (Minify JavaScript and CSS)

See the description of CSS

4. Remove duplicate scripts (Remove Duplicate Scripts)

For some historical sites or forum sites, this is quite common. There are too many changes before and after taking over the maintainer, and everyone has his own set. This will bring some potential trouble.

5. Reduce DOM access (Minimize DOM Access)

There are three guidelines:

Cache already accessed elements (Cache references to accessed elements)

Update nodes "offline" and add them to the tree (Update nodes "offline" and then add them to the tree)

Avoid using JavaScript to output page layout-it should be a matter of CSS (Avoid fixing layout with JavaScript)

6. Develop Smart Event Handlers

In addition to the English explanation, there is also a reminder of the problem of JavaScript memory leaks.

Another article entitled "how to optimize the performance of JavaScript scripts" is recommended. For guidelines on Ajax optimization, see improving the performance of Ajax applications and avoiding Web service vulnerabilities.

Postscript 1): after finishing almost, I found that there is already an article "Yahoo!" The 34 golden rules for the best experience of website performance are translated. It seems that I have done some repetitive work.

Postscript 2): both CSS and JavaScript have optimization rules. But there seems to be a lack of optimization practice for Flash.

Web page production poluoluo article introduction: Web front-end performance optimization is a big topic, is a topic worthy of continuous tracking by operators, is a technology mercilessly ignored by many websites.

Web front-end optimization best practices part VI picture-oriented (Image)

There are currently four rules in this section. At the recent Velocity 2008 technical conference, Yahoo! Stoyan Stefanov's Image Optimization: How Many of These 7 Mistakes Are You Making is also of great reference value. Let's talk about it together.

1. Optimize Picture (Optimize Images)

Use pictures in GIF, JPG or PNG format? Use PNG images as much as possible, with more features and smaller sizes (compared to GIF).

For PNG images, consider using Pngcrush or similar tools for optimization. Common tools are shown in the following table:

Pngcrush http://pmt.sourceforge.net/pngcrush/

Pngrewrite http://www.pobox.com/~jason1/pngrewrite/

OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (refer: tutorial)

PNGOut http://advsys.net/ken/utils.htm

See also: Five Tips For the Effective Use of PNG Images

Optimization tools for JPEG images:

Jpegtran (http://jpegclub.org/)

It must be emphasized that students of picture design, please consider designing Web-oriented pictures. Don't easily design big things beyond the acceptable size. This should be a habit, not a superb skill. Just remember it.

two。 Use CSS Sprites techniques to optimize pictures (Optimize CSS Sprites)

As mentioned before, to put it simply, it is "using CSS background-related elements to absolutely locate the background image" to change multiple HTTP calls into one call. For more references: CSS Sprites: Image Slicing's Kiss of Death

Add: I have seen some people abuse this technique. It is a good idea to knead multiple background images into one to reduce HTTP calls. But it is important to keep in mind that this big picture is not too heavy. I have seen a background picture of more than 100 K. One picture drags the whole site very slowly. A better example can refer to this diagram of Yahoo's relationship.

Update: a potential side effect of using CSS Sprites is that the client consumes more memory (see).

3. Do not use zoom pictures (Don't Scale Images in HTML) in HTML

More often, it may be due to laziness and do not produce the right size of the picture, if it is a batch processing of pictures, an ImageMagic command (convert) may be able to do. It must be mentioned that there are too many pages that are ugly to the picture stretching, save these pages!

4. With smaller and cacheable favicon.ico (Make favicon.ico Small and Cacheable)

Smaller, cacheable, neither of these may be a problem. The problem is that too many sites don't have favicon.ico at all. Sometimes, it is almost enough to judge whether the Blog of an independent domain name is professional or not.

-- EOF--

Add: visual designers should try their best to control the size of the picture, which is recommended below 200K. This is not nonsense, refer to the page.

Web page production poluoluo article introduction: Web front-end performance optimization is a big topic, is a topic worthy of continuous tracking by operators, is a technology mercilessly ignored by many websites.

The last part of the Web front-end optimization best practices is for mobile applications, but it's really just for iPhone, and there are only two rules.

1. A single data object is less than 25K (Keep Components under 25K)

This seems to be just for iPhone research. It is recommended that you keep a single Web data object below 25K. Why 25K? Apple official information indicates that the maximum support for Web objects that can be cached in memory is 10m, but after testing, it is found that it is only about 25K.

Due to the excellent performance of iPhone in the market, Web personnel have to consider how to optimize it. I believe this part of the content is also constantly changing.

2. Pack Components into a Multipart Document

Package the Web page components into a multi-part document. The goal is to reduce HTTP requests.

On how to optimize the performance of the Web front-end to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.