© 2016 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
Developer Tools #WWDC16
Session 420
Optimizing Web Content in Your App
Jon Davis Web Technologies EvangelistBrian Burg Safari and WebKit Engineer
Sampling ProfilerProfiling JavaScript
Where is the time being spent?Samples the stack every millisecond
Sampling ProfilerProfiling JavaScript
Where is the time being spent?Samples the stack every millisecondRuns with all four tiers of the JIT compiler
Sampling ProfilerProfiling JavaScript
Where is the time being spent?Samples the stack every millisecondRuns with all four tiers of the JIT compilerBreakpoints and debugger statements are ignored
Events viewProfiling JavaScript
•Events view is helpful, but there is another view that we've added for you…
SummaryProfiling JavaScript
Profiling so fast it's accurateFind slow handlers with the Events viewSee time costs pile up in the Call Trees view
SummaryProfiling JavaScript
Profiling so fast it's accurateFind slow handlers with the Events viewSee time costs pile up in the Call Trees viewBottom Up view shows the best places to start optimizing
console.takeHeapSnapshot("Before login");
// Do some work ...
console.takeHeapSnapshot("After login");
NEW
console.takeHeapSnapshot("Before login");
// Do some work ...
console.takeHeapSnapshot("After login");
NEW
console.takeHeapSnapshot()Analyzing Memory
Snapshots can impact performanceUse in pairs around code doing work
console.takeHeapSnapshot()Analyzing Memory
Snapshots can impact performanceUse in pairs around code doing workDon't leave in console.takeHeapSnapshot()
Memory and JavaScript Allocations timelinesAnalyzing Memory
Quickly see memory spikes to investigate
Memory and JavaScript Allocations timelinesAnalyzing Memory
Quickly see memory spikes to investigateTake heap snapshots to explore what keeps objects alive
Memory and JavaScript Allocations timelinesAnalyzing Memory
Quickly see memory spikes to investigateTake heap snapshots to explore what keeps objects aliveDon't leave in console.takeHeapSnapshot()
Memory and JavaScript Allocations timelinesAnalyzing Memory
Quickly see memory spikes to investigateTake heap snapshots to explore what keeps objects aliveDon't leave in console.takeHeapSnapshot()Snapshots can have a performance impact
Next Steps
Consider upgrading to WKWebViewConnect Web Inspector to your appSave time and deliver great performance
Next Steps
Consider upgrading to WKWebViewConnect Web Inspector to your appSave time and deliver great performanceStay updated on feature development
JavaScript Call Trees
Quick Open
Visual Styles Sidebar
Memory Timeline
JavaScript Heap Objects
Sampling Profiler
Compare Heap Snapshots
Tail Call Stacks
Pseudo Elements in DOM Tree
takeHeapSnapshot
NEW
Improved IndexedDB
<picture>CSP 2.0
International API
Shadow DOM
WOFF 2.0 100% ES6
WebDriver
CSS Variables Unprefixed CSS Filters
Proper Tail Calls
NEW
Related Sessions
Extending Your App with Safari App Extensions Nob Hill Wednesday 4:00PM
Web Inspector and Modern JavaScript WWDC 2014
Introducing the Modern WebKit API WWDC 2014
What's New in Web Development in WebKit and Safari WWDC 2014
Introducing Safari View Controller WWDC 2015
Using Safari to Deliver and Debug a Responsive Web Design WWDC 2015
Top Related