Discuss the method of front-end optimization from the code aspect

< DOCTYPE HTML PUBLIC-WCDTD XHTML transitionalen httpwwwworgtrxhtmldtdxhtml-transitionaldtd> approach to front-end optimization from a code aspect:
1. Reduce the number of HTTP requests
Pictures, Css,script,flash, and so on. These will increase the number of HTTP requests, reducing the number of these elements to reduce response time.
CSS Sprites technology can reduce the number of requests for pictures, the scattered small pictures put together, the use of background-position to change the position of the background image, if the HTML elements in advance to define the width and height, in fact, like a mask, moving the background will see different scenes.
Inline images embed the image content code directly into the HTML code using Data:url scheme, which increases the size of the HTML code by embedding the embedded image in the CSS (CSS is cached). This will better reduce the number of HTTP requests and not increase the volume of HTML.
Many users enter your site in the case of empty caches, so the first speed will be important.
The first rule is the most important one.

2. Put the style sheet to the top
We found that putting CSS on the head of the document would allow the page to load faster. Because this allows the page to load gradually.
The problem with putting the style sheet close to the bottom is that it prevents the gradual display of the page elements. This also results in "flash of unstyled content", which is displayed in the form of no styles before the stylesheet is loaded, and when the style is loaded, the page is redrawn and the content flashes to change the style representation.

3. Put the script at the bottom
One reason to place the script at the bottom of the page is to make the pages render gradually, and the other is to achieve better parallel downloads.
For scripts, the following contents of the script are blocked from being loaded incrementally, because the following is not downloaded until the script is downloaded, and the second script causes the problem to prevent parallel downloads. "http/1.1 Specification" suggested that the browser to a domain name, the same time download no more than 2 (by: The actual monitoring found that there are generally more than 2), I have let ie parallel download 100 images. When the script is being downloaded, the browser will not start downloading anything.

4. Avoid CSS expressions
CSS expressions is a powerful (and dangerous) way to dynamically change the properties of CSS. They have been supported since IE5, for example, using CSS expression to rotate the background color one hour at a time. But ignored by non-IE browsers.
Background-color:expression_r (New Date ()). GetHours ()%2? "#B8D4FF": "#F08A00 &Prime;);
The problem with expressions is definitely beyond our imagination, and even when we move the mouse, it will cause the redraw of the page!
Here is an example page
One way to reduce the number of CSS expressions calculations is to use a disposable expressions. When expression evaluates to a definite value for the first time, let the style be equal to the value and no longer change. If the properties of the style must be changed dynamically, use the time handle!

5. Let script and style epitaxy
Should JavaScript and CSS be called externally or inline?
External calls to files are faster because they can be cached, and they cannot be cached if they are embedded in the page! If users want to see a lot of pages on your site, if they are using the same external script and style, then once they are cached, they will no longer need to download, which can bring you a lot of potential benefits.

6. Reduce Script Volume
There are two more popular tools to reduce the size of the script &ndash; Jsmin and Yui Compressor. (Press: This compression and gzip compression is not the same, Gzip is the transfer compression, this is code compression).
We are above the method, the reader should be appropriate to choose or cooperate with the use, our choice method principle is should at the lowest cost to complete the client's function.

HTML code optimization

1. Using Relative URLs
For the various URLs in the page, such as links, the href of the outer chain CSS, the src of the outer-chain JavaScript, the image src, the iframe src, etc., you can use a relative URL if you can determine that they are under the same domain name as the current page. This saves the length of at least one domain name for each URL.

2. Remove HTTP or HTTPS
Absolute URLs start with a protocol header such as HTTP or HTTPS, and if you can determine that the protocol for the URL is consistent with the protocol for the current page URL, or that the URL is available under a variety of protocols, consider removing the protocol header. While this is somewhat non-mainstream, it turns out to be feasible and has a theoretical basis (see Http://www.ietf.org/rfc/rfc2396.txt section 5.2). The Nexus one page has some resource URLs that remove the protocol headers, although not for resource-saving purposes, but at least prove that it is possible to remove the protocol header.
For CSS, if the deletion protocol header under IE7, IE8 will cause the CSS to download two times, this is a problem to be aware of.

3. Delete comments
As with CSS, JavaScript, you can also optimize by removing comments from the HTML. However, this is a bit more complicated for HTML because annotations that have special effects in HTML cannot be deleted.
(a). IE Conditional comment

Discuss the method of front-end optimization from the code aspect