Dependingonwhichbrowseryouuse,youmayseedataimmediatelyorafteryou
stoprecording.SafariandFirefoxdisplaydatainrealtime,whileChrome,Opera,
andInternetExplorerrenderaperformancechartafteryoustoprecording.
Documentloads,functioncalls,DOMevents,stylerecalculations,andpaintactions
areallloggedineverybrowser,givingusanoverviewofperformancebottlenecks.
Whatwe’relookingfor,atleastasfarasCSSperformanceisconcerned,aretwo
relatedaspects:
■ largenumbersofstylerecalculationandpaintoperations
■ operationsthattakealongtime,asindicatedbylargerblocksinthetimeline
Toseewhatthislookslikeinpractice,we’llcomparetwobasicdocuments,Examples
AandB.Inbothcases,we’removingaseriesofdivelementsfromanx-positionof
zerotoanx-positionof1,000.BothexamplesuseCSStransitions.InExampleA,
however,we’regoingtoanimatetheleftproperty.InExampleB,we’regoingto
useatranslationtransformandanimatethetransformproperty.
Ourmarkupforbothisthesame(theresultcanbeseeninFigure3.16):
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Performance example</title>
<style type="text/css">
/* CSS will go here. */
</style>
</head>
<body>
<button type="button" id="move">Move</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>Debugging and Optimization 109