Best practice (del 2)

Innhold

Forstå "repaint" og "reflow"

Reflows are very expensive in terms of performance, and is one of the main causes of slow DOM scripts, especially on devices with low processing power, such as phones. In many cases, they are equivalent to laying out the entire page again.

Efficient Javascript (dev.opera.com)

Repaint/Redraw

Når et element endrer visibility/display og bakgrunnsfarge. Koster litt. Alle elementer blir søkt gjennom får å finne ut hvem som vises/ikke vises.

Reflow

Skjer når DOM'en blir manipulert, className for et element endres, ved window.resize, eller hvis css legges til som påvirker hele siden. Også når en må regne ut offsetWidth og lignende blir siden reflowet. Dette skjer i bakgrunnen, usynlig.

Elementer blir "lastet" på nytt, også barna av dette elementet, samt siblings til elementene. Så blir hele siden "tegnet" på nytt. Dette koster en del.

Posisjonerte elementer (absolute/fixed) kan modifiseres uten reflow. Dette fordi de er tatt ut av "document"-contexten. Derfor er det en fordel at animasjoner benytter seg av position:absolute, ellers ville det trigget en reflow.

Reflows er et fact of live, pga enhver endring i DOM'en fører til reflow. Men bør holdes til et minimum.

Hva kan vi gjøre?

Bad:

	$('header').css('background-color',"#CCCCCC");
	// Some more code
	$('section').css('background-color',"#DDDDDD");

Better:

	$('header, section').addClass('newstyle');

Når det gjelder visse typer native browser funksjoner, som getElementsByTagName og childNodes, bør disse først lagres, for så å utføre endringer på de.

Bad:

	var allPara = document.getElementsByTagName('p');
	for( var i = 0; i < allPara.length; i++ ) {
  		allPara[i].appendChild(document.createTextNode(i));
	}

Better:

	var allPara = document.getElementsByTagName('p');
	var collectTemp = [];
	for( var i = 0; i < allPara.length; i++ ) {
  		collectTemp[collectTemp.length] = allPara[i];
	}
	for( i = 0; i < collectTemp.length; i++ ) {
 		 collectTemp[i].appendChild(document.createTextNode(i));
	}
	collectTemp = null;