pfeldman@

Feb2015

Thisdocdemonstrateshow,whenandinwhichorderperformancetoolsfromtheDevTools
suiteshouldbeapplied.Itwillsuggestwheretostart,whattodoandwhentoreachoutforhelp
and/orinvolvelowerleveltools(tracing,netinternals,etc.).Iamusingsfgate.comasan
exampleforthepageloadperformanceprofiling.

Theendgoalistodevelopandpublishtheunifiedapproachtoperformanceanalysisthatwe
recommendtotheframeworkvendorsandtothewebdevelopers.

Thisishowuseractionsareoutlined

Thisishowimportantfindingsareoutlined

Step0.Identifytargetscenario

Wefocuson
pageload
,
scrolling
and
inputlatency
asthemainprofilingscenarios.

Youcaneitheremulatemobileusingdevicemodeoruseremotedebuggingforanalysing
performance.Ifthepageisslowonthedesktop,itisgoingtobeslowonmobile.Youcanstart
withthedesktopitwillshortenthefeedbackloopshouldanymodificationsberequired.Make
sureyouprofileagainstthemobiledeviceafterwardsthatistheonlywayofgettingthetrue
performanceviewonyourpage.

Explorethepagebeforestartingprofiling,narrowdownslow/problematicareasandscenarios.
Youwillonlybeabletoprofilethepagefor~30secondsanddeeptracethepageforahandful
ofsecondsatatime.

PAGELOAD

Step1.NetworkvsTimeline

Forthepageload,wellhavetousetwodistincttools:NetworkandTimeline.AlthoughTimeline
isthetoolofchoiceforanyperformanceanalysis,thenetworkaspectofthepageloadscenario
isimportantenoughtohaveadedicatedtoolforexploringitthatyoushouldstartwith.

Goto
Network
tab

OptionallydisablethecacheusingthecheckboxandreloadthepageusingR.

Oncepageisloaded,hitthebuttontostoprecording

Youshouldseethenetworkwaterfalllikebelow.Thesearetheresourcesthatwerefetched
fromtheserverduringtheinitialpageload.

Toomanyresourcesareloaded
Thereisaseriesof1x1pixelloads(ads)thatrequirednewconnectionstobesetup
1.3sloadsoftext/plainwithnogzipcontentencoding

Networkisawholeworldthatneedstobeexploredandoptimizedfor.Iamnotfocusingonitin
thisdocfornow,goingfurther.

Step2.Performanceissues?StartwiththeTimeline

AlwaysstartwiththeDevToolsTimelineasthefirsttooltoapplywhileinvestigating
performance.Itwillprovideyouwiththehighlevelinformationonthepageperformanceandwill
giveagoodclueonwhetherothertoolsneedtobeappliedlater.

Goto
Timeline
tab
PressRtoreloadthepage
Turnoffframemodeinoverview

Thetoolwillstartprofiling,reloadthepage,stopprofilingandpresenttheresults.Thisiswhat
youllsee:

Letsexploretheoverview:
[01.4]heavyrendering
[1.43.3]heavyJSexecution
[4.46.4]heavyrendering
...

Withasinglerefreshwenowknowthatfor5.4sthepagewasrunningJavaScript,whilefor
4.5sitwasrendering.

Explorethetrace:selectrangesonthetop,usetouchgesturesinthemainarea,useWASD
controlswillnavigatethetrace.Selectrecordstoseetheirdetails.UseShift+dragforthe
measuretool.

SincewearelookingatmassiveJSexecution,socanswitchtoamorespecializedtool,the
JavaScriptsamplingprofiler.WewillcomebacktoTimelinelaterfortherenderingcosts.

Step3.Timelineispaintedwithyellow?SwitchtoJavaScriptsamplingprofiler

SamplingprofilerallowsfocusingexclusivelyontheJavaScriptexecution.Wewillstillseehow
JavaScriptcallsintothebindings,buttheJSnativetraceabilitywillbelimited.Wearereadyto
sacrificeitinthisverycaseduetosomuchofJSexecution.

Goto
Profiles
tab
Select
CollectJavaScriptCPU
profile
Hit
Start
andreload
Hit
Stop
oncepagehasloaded.

Quicklylookatthe
Heavy
viewtospotoutliers

Thisoneprovidesuswiththefollowinginsight:

(program)

standsforthenonJSinitiatedtime.Parsing,scheduledjobs.Wellexplore
itwhenwearebackwithTimeline
appendChild,insertBefore

takes~300ms.Expandingthisnodeblames
pubads_impl_56.js
easyXDM.min.js
sfgateitself
offsetHeight,offsetWidth,scrollHeight,clientWidth

forcedlayoutcosts.
Theycomefromallovertheplace.Wellneedtolookatthelayoutthrashingon
Timeline.
getcookie

alotofcodepathsarereadingcookies,mostarefrom
pubads_impl_56.js
otherads
Longtailofheavymethodsthatare<50ms

Thisisadeathbyathousandcuts.Insteadoflookingfortheexpensivemethods,well
havetoexploreeverysecondandmakesureonlynecessaryworkisdone.
Adsareresponsibleforalargeportionofthelatency
Thereissomelayoutthrashing

Switchto
Chart
modeinJSprofiler.

Charthasthesamecontrolsastimeline:WASD,touchforzoomanddrag,shift+touchtoscroll.
Wecanseeour~15secondsofexecutionherewithintermittentJSpresence.Startexploring
ranges:selectthemintheoverview,focusonthewideones.Everythingabove50mstotaltime
duringloadingisworthexploring.Makesureeverythingtheremakessenseandisrequired.

Forexample,onlythesetwoareblockingmainthreadfor150ms

Settinguptheadslotandfillingittakes150mseach.

Intheoneabove,
appendChild
within
Xf
isresponsiblefor60msofexecution.Itislikelytobe
buildinglargeattachedDOMhierarchies.

ThereisanumberofblockingJSchunkstaking
50

600ms!!!
each
Adsareresponsibleforalargeportionofthelatency

THEANALYSISBELOWISFORTHEDESKTOPSITE

Step4.BacktoTimeline

OnceJSsamplesmakesense,switchtothecombinedTimelinew/JSProfilerviewtolookfor
howJavaScriptexecutionandrenderingareaffectingeachother.

Switchto
Timeline
tab,enable
JSProfiler
checkbox.
Reloadthepage,waitfortracetobeshown
FandsearchforonGoogleAdsthatwasheavyinsamplingmode,hitEnteruntil
theitemisselected

SothereisnothingnativeundertheappendChild,itseemslikeBlinkisdoingsomethingfor18
ms.Eitherthat,oritisbeingcalledtoomanytimesandconsecutivesamplesmatch.

DOMsappendChildcantake20ms(orweareinatightloopappending^^)

Thenthereisaseriesofcallsliketheonebelow.Thesearethepagelogicandtheytake
hundredsofmillisecondstobuildUIs.Theonlyrecommendationwecangivehereisthatthe
fastestcodeistheabsentcode.Trytodoaslittleaspossible.

ThisoneseemstobuildagridusingjQuery?whichisrepeatedlyreachingoutforthe
getComputedStyleandotherbindings.

Andafterall,event.fixisnotfastenough.

Idontbelievethat,wemustbemissingsomenativebinding.IamstartingtheTimelinew/JS
Profilingagain,butno,thisispureJSexecution,nonativeinstrumentedcallsunderneath:

Butthetimelinegivesmeadditionaldetails:
ItallhappensuponDOMNodeInsertedmutationeventlistener
Thisisnotasingleinvocationofevent.fix,thisisnumerousreplaceChildcalls
AtthispointIgointoSettingsandenableHighResolutionSampling

CreatingflashplayermakesturnsintoreplaceChildchurntaking1500ms

WhileintheTimelinew/JSProfilermode,Iamnoticingacoupleofexpensiverendering
operationsandzoomin.Inoticeaheavylayoutwitharedtrianglemarker,Iselectit.

Thislayouttook26ms,itrelayoutedentireDOM,touched1984nodes.Iscrolldetailsfurther
andIgetthestacks.IcanclearlyseethatjQuerysextend.csscausesthrashingwithinitself.

elem.height()viajQuery.extend.csscausesthrashing^^