developing high performance websites and modern apps with javascript performance tools

23

Upload: garrett-tucker

Post on 31-Dec-2015

46 views

Category:

Documents


0 download

DESCRIPTION

Developing high performance websites and modern apps with JavaScript performance tools. Jonathan Carter Program Manager 3-316. Agenda. Why is performance important (or at l east interesting)? What are some high-priority performance scenarios? - PowerPoint PPT Presentation

TRANSCRIPT

Developing high performance websites and modern apps with JavaScript performance tools

Jonathan CarterProgram Manager3-316

Why is performance important (or atleast interesting)?

What are some high-priorityperformance scenarios?

How can you diagnose these scenarios using Visual Studio 2013 and IE11?

Agenda

Why is performance important?

App Fre

ezes

Crash

es

Slow

Res

pons

ivene

ss

Heavy

Bat

tery

Usa

ge0%

10%

20%

30%

40%

50%

60%

70%

80%

Reasons for bad reviews

(source: http://www.businessnewsdaily.com)

It isn’t just important for apps…

“People will visit a Web site less often if it is slower than a close competitor by more than 250 milliseconds”(source: http://www.nytimes.com)

(source: http://www.webperformancetoday.com)

Consumer expectations &expanding device ecosystemmake performance moreimportant than ever

Which are some (of many) high-priority performance scenarios?1. Page/app load time

“Decreasing page load time can drastically increase conversions”(source: http://blog.kissmetrics.com)

“The frustration of waiting for large pages to load can cost the enterprise valuable potential visitors.”(source: Gartner Inc.)

2. UI responsiveness/input lag

“Research in human-computer interaction points to around 100 ms as the maximum acceptable response time to simulate instantaneous behavior”(source: http://www.informit.com)

3. Fluid scrolling/panning/animations

“Low FPS does not give the illusion of motion effectively”(source: http://www.wikipedia.com)

4. Long-term stability

Resuming use of an app should feel like it has always been running

Running an app/site for days shouldn’t result in a degradation of usability

Fast, fluid and efficient

Networking Parsers

1

2 7

43 8 9

5 6

DOMTree

Formatting Layout Painting

1

2 7

43 8 9

5 6

Display Tree

Compositing

DOM API&

Capabilities

Chakra

DMANIP

Hit Testing

InputData&State

IE Pipeline

Questions to ask when investigating performance?

1. Can I eliminate work entirely?

2. Can I optimize existing work?

3. Can I defer work, or perform it in parallel?

Diagnosing page load/UI responsiveness

Memory Scenarios to Watch For

1. Memory bloat

2. Memory leaks

3. Object churn

JavaScript/DOM Object Graph

window

Global

document

<html>

<head> <body>

$

<div><section

>

location

Your Object

<p>

JavaScript/DOM Object Graph

window

Global

document

<html>

<head> <body>

$

<div><section

>

location

Your Object

<p>

JavaScript/DOM Object Graph

window

Global

document

<html>

<head> <body>

$

<div><section

>

location

Your Object

<p>GC Runs….

JavaScript/DOM Object Graph

window

Global

document

<html>

<head> <body>

$

<div><section

>

location

Your Object

<p>GC Frees Memory

JavaScript/DOM Object Graph

window

Global

document

<html>

<head> <body>

$

<div><section

>

location

<p>

Object Retained Size

window

Global

document

<html>

<head> <body>

$

<div><section

>

location

<p>

Retains all of its children

Object Retained Size

window

Global

document

<html>

<head> <body>

$

<div><section

>

location

<p>

Retains the <body> only

Diagnosing memory usage

Summary

• Performance is extremely important (and fun!)

• Visual Studio 2013 and IE11 provide tooling for diagnosing issues related to…• Page load/resource loading costs• UI responsiveness• Frame rate• Memory efficiency

• Please try out the tools and send us feedback!

Evaluate this session

Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!

© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.