<<High Performance JavaScript>>读书笔记-3.DOM Scripting

HTML collections are array-like objects containing DOM node references. 

• document.getElementsByName()

• document.getElementsByClassName()

• document.getElementsByTagName()

• document.images

• document.links

• document.forms

• document.forms[0].elements

HTML collections 的值受当前页面的影响，使用的时候最好先存到数组中。

function toArray(coll) {
    for (var i = 0, a = [], len = coll.length;i < len; i++) {
        a[i] = coll[i];
    }
    return a;
}

 

A DOM tree

    A representation of the page structure

A render tree

    A representation of how the DOM nodes willbe displayed

 

Reflow is needed whenever layout and geometry change. This happens when:

• Visible DOM elements are added or removed

• Elements change position

• Elements change size (because of a change inmargin, padding, border thickness,width, height, etc.)

• Content is changed, e.g., text changes or animage is replaced with one of a differentsize

• Page renders initially

• Browser window is resized

 

Queuing and Flushing Render Tree Changes

• offsetTop, offsetLeft, offsetWidth, offsetHeight

• scrollTop, scrollLeft, scrollWidth, scrollHeight

• clientTop, clientLeft, clientWidth, clientHeight

• getComputedStyle() (currentStyle in IE)

 

Minimizing Repaints and Reflows

//bad,reflow three times

var el = document.getElementById('mydiv');

el.style.borderLeft = '1px';

el.style.borderRight = '2px';

el.style.padding = '5px';

 

//good,reflow one time

var el = document.getElementById('mydiv');

el.style.cssText = 'border-left: 1px; border-right: 2px; padding:5px;';

 

Batching DOM changes

1. Take the element off of the document flow.

2. Apply multiple changes.

3. Bring the element back to the document.

There are three basic ways to modify the DOM off the document:

• Hide the element, apply changes, and show it again.

var ul = document.getElementById('mylist');

ul.style.display = 'none';

appendDataToElement(ul, data);

ul.style.display = 'block';

• Use a document fragment to build a subtree outside of the live DOM and then copy it to the document.

var fragment = document.createDocumentFragment();

appendDataToElement(fragment, data);

document.getElementById('mylist').appendChild(fragment);

• Copy the original element into an off-document node, modify the copy, and then replace the original element once you're done.

var old = document.getElementById('mylist');

var clone = old.cloneNode(true);

appendDataToElement(clone, data);

old.parentNode.replaceChild(clone, old);

 

Caching Layout Information

 

Take Elements Out of the Flow for Animations

1. Use absolute positioning for the element you want to animate on the page, taking it out of the layout flow of the page.

2. Animate the element. When it expands, it will temporarily cover part of the page. This is a repaint, but only of a small part of the page instead of a reflow and repaint of a big page chunk.

3. When the animation is done, restore the positioning, thereby pushing down the rest of the document only once.

 

Event Delegation

 

Summary

• Minimize DOM access, and try to work as much as possible in JavaScript.

• Use local variables to store DOM references you’ll access repeatedly.

• Be careful when dealing with HTML collections because they represent the live,underlying document. Cache the collection length into a variable and use it when iterating, and make a copy of the collectioninto an array for heavy work oncollections.

• Use faster APIs when available, such as querySelectorAll() and firstElementChild.

• Be mindful of repaints and reflows; batchstyle changes, manipulate the DOM tree“offline,” and cache and minimize access to layout information.

• Position absolutely during animations, and use drag and drop proxies.

• Use event delegation to minimize the number of event handlers.