Front-end performance optimization-notes

A) makefewer HTTP requests

As few HTTP requests as possible. Merge pictures, CSS, JS to improve the first access user wait time.

II) usea CDN

Using CDN, proximity cache ==> Intelligent Routing ==> load balancing ==>WSA full station dynamic acceleration

The full name of the CDN is the Content Delivery network, which is the contents distribution networks. The goal is to add a new layer of network architecture to the existing Internet, publish the content of the site to the "Edge" of the network closest to the user, so that users can get the content they need, solve the congestion on the Internet, and increase the responsiveness of users to the site. The problem of the slow response speed of the user visiting website caused by the small network bandwidth, the large number of users, and the uneven distribution of dot is comprehensively solved technically.

III)Avoid empty src or href

Avoid empty src and href
When the href attribute of the link tag is empty and the SRC attribute of the script tag is empty, the browser renders the URL of the current page as their attribute value, thus loading the contents of the page as their value.

IV)ADD an Expires headers

Specify expires for file headers
Make content cacheable. Avoids unnecessary HTTP requests in the next page access.

Sets the outdated HTTP header. Set expires header you can cache scripts, stylesheets, pictures, Flash, and so on in the browser's cache.
V)Compress components with Gzip

Compress content with gzip
Compressing any response of a text type, including XML and JSON, is worthwhile.

The gzip format for our page content is compressed, gzip format is a very popular compression technology, almost all browsers have the ability to unzip the gzip format, and it can compress the proportion is very large, the general compression rate of 85%, That is, the server side of the 100K page can be compressed to about 25K of data in gzip format to the client, the client receives the data in gzip format after automatic decompression to display the page.
Put CSS at the top puts CSS external links at the front of the page. In fact, we generally abide by this principle, if the CSS external links as part of the logic of the page below the head, I personally think this is a mistake in itself.

VI)Put CSS at top

Put CSS on the top
VII)Put JS at bottom

Put JS on the bottom
Prevents JS loading from blocking subsequent resources.

Try to load the JavaScript script at the bottom of the page. At the beginning to think that JavaScript script as far as possible to load at the bottom of the page, refers to all of the JS script to be put to the bottom, later found, not exactly the case, here refers to the script refers to those in the loading process to execute the script, so the general approach or the page header to introduce a JS link, The bottom of the page executes the JS script. Why did you do it? Hehe, in fact very simple, in order to achieve the largest download parallel, the page load initially done, the best only download, html download, css download, js download, and so on to achieve page rendering, JS script run.
VIII)Avoid CSS Expressions

Avoid using CSS expressions

Avoid CSS expression in the CSS in fact run the expression and the page load run a lot of JS script is similar, perhaps more slow, and not compatible, although we can make a lot of page logic, but we can completely abandon it.

ix) MakeJS and CSS external

Put CSS and JS in an external file
The goal is to cache, but sometimes in order to reduce the request, it will be written directly to the page, depending on the PV and IP proportional trade-offs.
X.Reduce DNS Lookups

As few DNS lookups as possible.

Weigh the number of DNS lookups
Reducing host names can save response time. At the same time, however, it is important to note that reducing the host reduces the number of concurrent downloads in the page.
IE browser can only download two files from the same domain at the same time. When displaying multiple images on a single page, the speed at which IE users download pictures is affected. So Sina will engage n two level domain name to put the picture.

11)minify JS and CSS

Streamline CSS and JS

Compress the JavaScript code. Compression tool, Yuicompressor, Yahoo US developed Java compression Pack Yuicompressor.jar. Compression is quite perfect, not only the space between the code to remove the line, but also on the variable name, the Northern method of simplification, inadvertently realize the role of confusing script.
12)Avoid URL redirects

Avoid redirection.

Avoid jumps
Same domain: Pay attention to avoid backslash "/" jump;
Cross-domain: use alias or mod_rewirte to establish a CNAME (a DNS record that holds the relationship between domain names and domain names)

13)Remove duplicate JS and CSS

Scripts to remove duplicate scripts.

Delete duplicate JS and CSS
Repeated invocation of the script, in addition to adding additional HTTP requests, multiple operations can also waste time. In IE and Firefox, regardless of whether the script is cacheable, there is a problem with repeating the JavaScript.

14)Configure entity etags

This seems to be a server-side configuration problem.

Configure Etags
It is used to determine whether the elements in the browser cache are consistent with the original server. More resilient than Last-modified date, such as a file that has been modified 10 times in 1 seconds, the ETag can synthesize the inode (the number of index nodes (inode) of the file), MTime (modification time) and size to make a precise judgment, Avoid UNIX records mtime can only be accurate to the second problem. The server cluster is used, preferably after two parameters. Use Etags to reduce Web application bandwidth and load.

15) MakeAJAX cacheable

(AJAX cache).

Caching-Able Ajax
"Async" does not mean "instant": Ajax does not guarantee that users will not spend time waiting for asynchronous JavaScript and XML responses.

16) Use theGET for AJEX requests

Use get to complete AJAX requests
When using XMLHttpRequest, the Post method in the browser is a "two-step Walk" process: First send the file header before sending the data. Therefore, it makes more sense to get data using get.

17) Reduce The number ofDOM elements

Reduce the number of DOM elements
Is there a more appropriate label that can be used? Life is more than div+css

18)Avoid HTTP 404 (not Found) error

Avoid 404
Some sites change the 404 error response page to "Are you looking for * * * *", which improves the user experience but also wastes server resources (such as databases, etc.). The worst case scenario is a link to an external JavaScript that has a problem and returns 404 code. First, this load destroys parallel loading, and second, the browser will try to find something useful in the returned 404 response content as JavaScript code to execute.

19)Reduce Cookie Size

Reduce the size of cookies

20) Usecookie-free domains

Using a domain without cookies
Compared to the chip CSS, Yahoo! 's static files are on the yimg.com, when the client requests the static file, reduces the repeated transmission of the Cookie to the primary domain name (yahoo.com).

21)Avoid alphaimageloader filter

Do not use filters
Png24 in IE6 translucent kind of things, don't mess, calm cut into png8+jpg

22) Do not scaleimages in HTML

Do not scale a picture in HTML

Two or three) makefavicon small and cacheable

Reduce Favicon.ico and cache

Front-end performance optimization-notes