CSS Master

becausetheyforcethebrowsertorecalculatetheheight,width,andpositionof

otherelementsinthedocument.

Repaintsaresimilartoreflowsinthattheyforcethebrowsertore-renderpartof

thedocument.Changingthecolorofabuttonwhenina:hoverstateisoneexample

ofarepaint.They’reabitlesstroublesomethanreflowsbecausetheydonotaffect

thedimensionsorpositionofnodes;however,repaintsshouldstillbekepttoa

minimum.

ReflowsandrepaintsaremostoftentriggeredbyDOMoperations;forexample,

addingtoorremovingelements.Buttheycanalsobecausedbychangestoproperties

thataffectthedimensions,visibility,orpositionofanelement.Thisistruewhether

thechangeiscausedbyJavaScriptoraCSS-basedanimation.

Page Loads

Pageloadswillalwaystriggerreflowandrepaintsasthebrowserparsestheinitial

HTML,CSS,andJavaScript.

It’sdifficulttocompletelybanishrepaintsandreflowsfromaproject.Wecan,

however,identifythemandreducetheirimpactusingtimelinetools.

Timeline Tools

Timelinetoolsareabitbefuddlingatfirst.Theymeasuretheperformanceofyour

frontend,capturinghowmuchtimeittakesforvarioustaskstocomplete.Byrecord-

ingactivitywhileinteractingwithourpages,wecanspotwhatlinesofourCSS

maybecausingperformancebottlenecks.

Tousethetimeline,clickthetimelinetabinthedevelopertoolsinterface.InChrome,

Opera,andFirefox,it’sappropriatelynamedTimeline.Safarimakesitplural,soit’s

Timelines.InternetExplorer 11 usesthemoredescriptiveUI Responsiveness.^2

Inanybrowser,presstheRecordbuttontostarttherecordingprocess.Interactwith

theproblematicportionsofthepageand,whenyou’redone,clicktheappropriate

buttontostoprecording.

(^2) InFirefox,youmayhavetoenablethetimelinefeatureintheWebInspector.Youcanfindthissetting
underToolbox Options.
108 CSS Master