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

永动机

Reduce the Number of DOM Elements

tag: content

    A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference    if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example.

    A high number of DOM elements can be a symptom that there's something that should be improved with the markup    of the page without necessarily removing content.    Are you using nested tables for layout purposes?    Are you throwing in more <div>s only to fix layout issues?    Maybe there's a better and more semantically correct way to do your markup.

    A great help with layouts are the YUI CSS utilities:    grids.css can help you with the overall layout, fonts.css and reset.css    can help you strip away the browser's defaults formatting.    This is a chance to start fresh and think about your markup,    for example use <div>s only when it makes sense semantically, and not because it renders a new line.

    The number of DOM elements is easy to test, just type in Firebug's console:
document.getElementsByTagName('*').length

    And how many DOM elements are too many? Check other similar pages that have good markup.    For example the Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags).



Split Components Across Domains

tag: content

    Splitting components allows you to maximize parallel downloads. Make sure you're using    not more than 2-4 domains because of the DNS lookup penalty.    For example, you can host your HTML and dynamic content    on www.example.org    and split static components between static1.example.org and static2.example.org

    For more information check    "Maximizing Parallel Downloads in the Carpool Lane" by Tenni Theurer and Patty Chi.



Minimize the Number of iframes

tag: content

    Iframes allow an HTML document to be inserted in the parent document.    It's important to understand how iframes work so they can be used effectively.

<iframe> pros:

• Helps with slow third-party content like badges and ads
• Security sandbox
• Download scripts in parallel
  

<iframe> cons:

• Costly even if blank
• Blocks page onload
• Non-semantic
  

No 404s

tag: content

    HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found)    is totally unnecessary and will slow down the user experience without any benefit.

    Some sites have helpful 404s "Did you mean X?", which is great for the user    experience but also wastes server resources (like database, etc).    Particularly bad is when the link to an external JavaScript is wrong and the result is a 404.    First, this download will block parallel downloads. Next the browser may try to parse    the 404 response body as if it were JavaScript code, trying to find something usable in it.



Reduce Cookie Size

tag: cookie

    HTTP cookies are used for a variety of reasons such as authentication and personalization.    Information about cookies is exchanged in the HTTP headers between web servers and browsers.    It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.

    For more information check    "When the Cookie Crumbles" by Tenni Theurer and Patty Chi.    The take-home of this research:

• Eliminate unnecessary cookies
• Keep cookie sizes as low as possible to minimize the impact on the user response time
• Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected
• Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time
  

Use Cookie-free Domains for Components

tag: cookie

    When the browser makes a request for a static image and sends cookies together with the request,    the server doesn't have any use for those cookies. So they only create network traffic for no good    reason. You should make sure static components are requested with cookie-free requests. Create    a subdomain and host all your static components there.

    If your domain is www.example.org, you can host your static components    on static.example.org. However, if you've already set cookies on the top-level domain    example.org as opposed to www.example.org, then all the requests to    static.example.org will include those cookies. In this case, you can buy a whole new domain, host your static    components there, and keep this domain cookie-free. Yahoo! uses yimg.com, YouTube uses ytimg.com,    Amazon uses images-amazon.com and so on.

    Another benefit of hosting static components on a cookie-free domain is that some proxies might refuse to cache    the components that are requested with cookies.    On a related note, if you wonder if you should use example.org or  www.example.org for your home page, consider the cookie impact.    Omitting www leaves you no choice but to write cookies to *.example.org, so for performance reasons it's best to use the    www subdomain and    write the cookies to that subdomain.



Minimize DOM Access

tag: javascript

    Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, you should:

• Cache references to accessed elements
• Update nodes "offline" and then add them to the tree
• Avoid fixing layout with JavaScript
  

    For more information check the YUI theatre's    "High Performance Ajax Applications"    by Julien Lecomte.



Develop Smart Event Handlers

tag: javascript

    Sometimes pages feel less responsive because of too many event handlers attached to different    elements of the DOM tree which are then executed too often. That's why using event delegation is a good approach.    If you have 10 buttons inside a div, attach only one  event handler to the div wrapper, instead of    one handler for each button. Events bubble up so you'll be able to  catch the event and figure out which button it originated from.

    You also don't need to wait for the onload event in order to start  doing something with the DOM tree.    Often all you need is the element you want to access to be available in the tree. You don't have to wait for all images to be downloaded.    DOMContentLoaded is the event you might consider using instead of onload, but until it's available in all browsers, you    can use the YUI Event utility, which has an onAvailable method.

    For more information check the YUI theatre's    "High Performance Ajax Applications"    by Julien Lecomte.



Choose <link> over @import

tag: css

    One of the previous best practices states that CSS should be at the top in order to allow for    progressive rendering.

    In IE @import behaves the same as using <link> at the bottom of the page, so it's best not to use it.