High-performance DOM scripting
-
Upload
stoyan-stefanov -
Category
Technology
-
view
4.466 -
download
0
Transcript of High-performance DOM scripting
// bad
var count = 0;
for (; count < 15000; count += 1) {
document.getElementById('here').innerHTML += 'a';
}
// DOM access = (1 get + 1 set) * 15000
// better
var count = 0, content = '';
for (; count < 15000; count += 1) {
content += 'a';
}
document.getElementById('here').innerHTML += content;
// DOM access: get + set
bodystyle.color = 'red';tmp = computed.backgroundColor;bodystyle.color = 'white';tmp = computed.backgroundImage;bodystyle.color = 'green';tmp = computed.backgroundAttachment;
bodystyle.color = 'red';bodystyle.color = 'white';bodystyle.color = 'green';tmp = computed.backgroundColor;tmp = computed.backgroundImage;tmp = computed.backgroundAttachment;
10 commandments
• Don’t touch the DOM• Cache DOM references in local vars• Use selectors API• Cache the length when looping collections• Update the DOM offline• Batch style changes• Don’t ask for layout info excessively• Minimize reflow areas• Use event delegation (see Y.delegate())• Don’t touch the DOM