DOM Performance (JSNext Bulgaria)

var title = “DOM Performance”;
Nov 23, 2014
Nov 23,
2014
Sofia
var info = {
name: “Hristo Chakarov”,
otherOptional: undefined
};

Nov 23,
2014
agenda();
• Why performance is so important
• Event delegation
• Stylesheet manipulation
• DOM creation
• DOM destruction
• Questions

Nov 23,
2014
Performance
Why so important?

Nov 23,
2014
Why performance matters?
Good performance improves User Experience
(UX)
• Slow performance is very obvious
• Users don’t enjoy waiting

Nov 23,
2014
DOM operations are heavy
• createElement is most expensive
• The more elements you need to operate
with, the worse performance you get
o Event handling
o Styling

Nov 23,
2014
Event Delegation
What is it & how it affects performance

Handling events on a single element
Nov 23,
2014
var cell = document.querySelector('td');
cell.addEventListener( 'click', function ( event ) {
// mark the cell in blue
this.style.background = 'blue';
});

Handling events on multiple elements
Nov 23,
2014
// imagine that we have 30’000 or more <td> elements…
var cells = document.querySelectorAll('td');
// create single event handler
var handler = function ( event ) {
// mark the cell in blue
this.style.background = 'blue';
};
for ( var i=0, l=cells.length; i<l; i += 1 ) {
// add listener to every single cell...
cells[i].addEventListener( 'click', handler );
}

Nov 23,
2014
Event delegation
Event delegation allows you to avoid adding
event listeners to specific nodes; instead,
the event listener is added to one parent.

Nov 23,
2014
Delegate event
// delegate click event to the table
var table = document.querySelector('table');
table.addEventListener( 'click', function ( event ) {
// `this` is the whole <table>, but `event.target` is
the cell that has been clicked
event.target.style.background = 'blue';
});

Nov 23,
2014
Delegate event
// delegate click event to the table
var table = document.querySelector('table');
table.addEventListener( 'click', function ( event ) {
// `this` is the whole <table>, but `event.target`
//is the element that has been clicked
// find out the <td> element
var cell = event.target;
while ( cell && cell.tagName != 'TD' && cell != this ) {
cell = cell.parentNode;
}
cell.style.background = 'blue';
});

Event delegation performance results
Nov 23,
2014
http://jsperf.com/delegate-event

Event delegation - pros & cons
• Drastically increases performance
• It’s alive! Elements about to be appended
later automagically delegate the event to
the parent
• Not suitable for some kinds of events
Nov 23,
2014
o mouseenter/mouseleave
o mouseover/mouseout

Nov 23,
2014
Styling
How can we style thousands of elements without reducing
the performance?

Nov 23,
2014
Styling elements
document.querySelector('tr').style.height = '75px';
// what if we have 100’000 rows?
[].slice.call(
document.querySelectorAll('tr')
).forEach( function ( tr ) {
tr.style.height = '75px';
});

Nov 23,
2014
Using a style sheet
document.head.appendChild(
document.createElement('style')
).innerHTML = 'tr { height: 75px }';

Nov 23,
2014
Stylesheet API
// get the styleSheet object
var sheet = document.querySelector('style').sheet;
// insert new CSS rule at the bottom of the stylesheet
sheet.insertRule( 'tr { height: 75px }',
sheet.cssRules.length );
// delete the top CSS rule
sheet.deleteRule( 0 );

Still supporting IE8? No problem!
https://github.com/ickata/utilities/blob/
master/JavaScript/Source/stylesheet-api.js
Nov 23,
2014

Nov 23,
2014
Styling performance results
http://jsperf.com/stylesheet-api

Nov 23,
2014
Stylesheet API - pros & cons
• Drastically increases performance
• It’s alive! Elements about to be appended
later automagically inherit styles
• Not cross-browser
o insertRule/addRule
o deleteRule/removeRule
o cssRules/rules
o innerHTML/styleSheet.cssText

Nov 23,
2014
DOM creation
Interactive SPA requires a lot of new DOM elements

createElement vs cloneNode vs innerHTML
• createElement is the slowest DOM
operation
• cloning a single node or a structure via
cloneNode is much faster
• old-school innerHTML is much faster as
well
Nov 23,
2014
o innerHTML is not approved by W3, but all
browsers support it

DOM creation performance results
Nov 23,
2014
http://jsperf.com/dom-creation-4

Can we get even better results?
Nov 23,
2014

Nov 23,
2014
DocumentFragment
DocumentFragment is a lightweight
container that can hold DOM nodes. Various
operations, such as inserting nodes as
children of another Node, may take
DocumentFragment objects as arguments;
this results in all the child nodes of the
DocumentFragment being moved to the child
list of this node.

Nov 23,
2014
Clone a DocumentFragment
If we append 10 elements to a
DocumentFragment, and then append to the
same fragment a clone of it, as a result the
fragment will contain 20 elements.
If we repeat the fragment clone/append
operations 2 more times - we will get a
fragment with a total of 80 elements!

Cloning fragments dramatically
reduces the # of operations!
Nov 23,
2014

Nov 23,
2014
Clone fragments algorithm
• Create desired number of elements using
DocumentFragment & cloneNode
• Use less operations as possible

Nov 23,
2014
• Reduce the total # of desired elements by
division of 2 until we get odd number or
the simple numbers 2 or 3
• Subtract 1 from odd numbers & continue
division by 2 unless result is 2 or 3. Store
the step index for later (when we will have
to add +1)

Nov 23,
2014
• Create 2 or 3 clones of the source element
• Multiply by 2 until we reach the desired
number of cloned elements
• Add +1 to the result on each stored step

Clone fragments algorithm example
1000 =
((((3 * 2 + 1) * 2 + 1) * 2 + 1) * 2 * 2 + 1) * 2 * 2 * 2
Nov 23,
2014

Nov 23,
2014
cloneMultiple
https://github.com/ickata/utilities/blob/
master/JavaScript/Source/element-clone-multiple.
js

Nov 23,
2014
cloneNode vs cloneMultiple

cloneNode vs cloneMultiple - Chrome
Nov 23,
2014

cloneNode vs cloneMultiple - Firefox
Nov 23,
2014

cloneNode vs cloneMultiple - IE8
Nov 23,
2014

Nov 23,
2014
cloneMultiple - summary
• Makes sense to use for large amount of
elements
• Reduces # of DOM operations to clone
elements
• The more elements we clone, the less # of
operations we have!
o to clone 1000 elements, we need only 33
operations!
o to clone 2000 - we need only 35!

Nov 23,
2014
DOM destruction

Nov 23,
2014
Destroying elements
// remove a single element
parentNode.removeChild( element );
// remove all descendants
parentNode.innerHTML = ""; // wow.. that’s heavy

Nov 23,
2014
Destroying elements
• innerHTML destroys all elements one by
one
• removeChild destroys the element with all
its descendants
• design your system in a way so when you
need to remove multiple elements you
remove their parent
o that’s a single operation!

Nov 23,
2014
Resources
• DocumentFragment
• Performance Tests
o Event Delegation
o Stylesheet Manipulation
o DOM Creation
• DOM Performance (BG)

Nov 23,
2014
Upcoming events
ISTA Conference 26-27 November
http://istabg.org/
Stay tuned for 2015:
Azure Bootcamp http://azure-camp.
eu/
UXify Bulgaria http://uxify.org/
SQLSaturday https://
www.sqlsaturday.com/
and more js.next();

Nov 23,
2014
Thanks to our Sponsors:
Diamond Sponsor:
Hosting partner:
Gold Sponsors:
Silver Sponsors:
Technological
Partners:
Bronze Sponsors:
Swag Sponsors:
Media Partners:

Nov 23,
2014
Thanks for listening!
• Hristo Chakarov
• Front-end architect
• SiteKreator
• JavaScript trainer
• IT Academy
• Photographer
• @github
• +HristoChakarov

DOM Performance (JSNext Bulgaria)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie DOM Performance (JSNext Bulgaria)

Ähnlich wie DOM Performance (JSNext Bulgaria) (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

DOM Performance (JSNext Bulgaria)