制作优质页面必读 --- (三)

永动机

Avoid CSS Expressions

tag: css

CSS expressions are a powerful (and dangerous) way to set CSS  properties dynamically. They were supported in Internet Explorer  starting with version 5, but were deprecated starting with IE8. As an example, the background color could be set to alternate every hour using CSS expressions:

      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
As shown here, the expression method accepts a JavaScript expression. The CSS property is set to the result of evaluating the JavaScript expression. The expression method is ignored by other browsers, so it is useful for setting  properties in Internet Explorer needed to create a consistent experience across browsers.

The problem with expressions is that they are evaluated more  frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and  even when the user moves the mouse over the page. Adding a counter to  the CSS expression allows us to keep track of when and how often a CSS  expression is evaluated. Moving the mouse around the page can easily  generate more than 10,000 evaluations.

One way to reduce the number of times your CSS expression is  evaluated is to use one-time expressions, where the first time the  expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression. If the style property must be set  dynamically throughout the life of the page, using event handlers  instead of CSS expressions is an alternative approach. If you must use  CSS expressions, remember that they may be evaluated thousands of times  and could affect the performance of your page.

top | discuss this rule

Make JavaScript and CSS External

tag: javascript, css

Many of these performance rules deal with how external components are managed. However, before these considerations arise you should ask a  more basic question: Should JavaScript and CSS be contained in external  files, or inlined in the page itself?

Using external files in the real world generally produces faster  pages because the JavaScript and CSS files are cached by the browser.  JavaScript and CSS that are inlined in HTML documents get downloaded  every time the HTML document is requested. This reduces the number of  HTTP requests that are needed, but increases the size of the HTML  document. On the other hand, if the JavaScript and CSS are in external  files cached by the browser, the size of the HTML document is reduced  without increasing the number of HTTP requests.

The key factor, then, is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents  requested. This factor, although difficult to quantify, can be gauged  using various metrics. If users on your site have multiple page views  per session and many of your pages re-use the same scripts and  stylesheets, there is a greater potential benefit from cached external  files.

Many web sites fall in the middle of these metrics. For these sites,  the best solution generally is to deploy the JavaScript and CSS as  external files. The only exception where inlining is preferable is with  home pages, such as Yahoo!'s front page and My Yahoo!. Home pages that have few (perhaps only one) page view per session may  find that inlining JavaScript and CSS results in faster end-user  response times.

For front pages that are typically the first of many page views,  there are techniques that leverage the reduction of HTTP requests that  inlining provides, as well as the caching benefits achieved through  using external files. One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after  the page has finished loading. Subsequent pages would reference the  external files that should already be in the browser's cache.

top | discuss this rule

Reduce DNS Lookups

tag: content

The Domain Name System (DNS) maps hostnames to IP addresses, just as  phonebooks map people's names to their phone numbers. When you type  www.yahoo.com into your browser, a DNS resolver contacted by the browser returns that server's IP address. DNS has a cost. It typically takes  20-120 milliseconds for DNS to lookup the IP address for a given  hostname. The browser can't download anything from this hostname until  the DNS lookup is completed.

DNS lookups are cached for better performance. This caching can occur on a special caching server, maintained by the user's ISP or local area network, but there is also caching that occurs on the individual user's computer. The DNS information remains in the operating system's DNS  cache (the "DNS Client service" on Microsoft Windows). Most browsers  have their own caches, separate from the operating system's cache. As  long as the browser keeps a DNS record in its own cache, it doesn't  bother the operating system with a request for the record.

Internet Explorer caches DNS lookups for 30 minutes by default, as specified by the  DnsCacheTimeout registry setting. Firefox caches DNS lookups for 1 minute, controlled by the network.dnsCacheExpiration configuration setting. (Fasterfox changes this to 1 hour.)

When the client's DNS cache is empty (for both the browser and the  operating system), the number of DNS lookups is equal to the number of  unique hostnames in the web page. This includes the hostnames used in  the page's URL, images, script files, stylesheets, Flash objects, etc.  Reducing the number of unique hostnames reduces the number of DNS  lookups.

Reducing the number of unique hostnames has the potential to reduce  the amount of parallel downloading that takes place in the page.  Avoiding DNS lookups cuts response times, but reducing parallel  downloads may increase response times. My guideline is to split these  components across at least two but no more than four hostnames. This  results in a good compromise between reducing DNS lookups and allowing a high degree of parallel downloads.




Minify JavaScript and CSS

tag: javascript, css

Minification is the practice of removing unnecessary characters from  code to reduce its size thereby improving load times. When code is  minified all comments are removed, as well as unneeded white space  characters (space, newline, and tab). In the case of JavaScript, this  improves response time performance because the size of the downloaded  file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

Obfuscation is an alternative optimization that can be applied to  source code. It's more complex than minification and thus more likely to generate bugs as a result of the obfuscation step itself. In a survey  of ten top U.S. web sites, minification achieved a 21% size reduction  versus 25% for obfuscation. Although obfuscation has a higher size  reduction, minifying JavaScript is less risky.

In addition to minifying external scripts and styles, inlined <script> and <style> blocks can and should also be minified. Even if you gzip your scripts  and styles, minifying them will still reduce the size by 5% or more. As  the use and size of JavaScript and CSS increases, so will the savings  gained by minifying your code.