Todd toddreifsteck

Size: px

Start display at page:

Download "Todd toddreifsteck"

Elfreda Cameron
5 years ago
Views:

1 Todd Reifsteck Program Manager: Memory, Power and Performance Co-Chair of W3C Web Performance Working toddreifsteck

2 Building a faster browser Behind the scenes improvements in Microsoft Edge

3 How does a browser work?

4 DMANIP Hit Testing Input DOM Tree 1 Display Tree 1 Networking Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript Chakra

5 DMANIP Hit Testing Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript Chakra

6 Networking Link Headers: Preconnect Cache-Control: Immutable Improved Cache Retrieval Networking off UI Thread

7 Cache-Control: public,max-age= Link: < rel=preconnect; crossorigin Last-Modified: Mon, 01 Jan :00:00 GMT

8 Access-Control-Allow-Credentials: true Cache-Control: public,max-age= ,immutable Last-Modified: Mon, 01 Jan :00:00 GMT

9 In my testing a typical feed may initially be comprised of 150 different resources. Pressing refresh in Firefox 49 generates just 25 network requests.

10 Improved Cache Retrieval

11 Networking off UI Thread fetch sendbeacon XMLHttpRequest <audio> / <video> src tag

14 DMANIP Hit Testing Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript Chakra

15 Parsers HTML parser not blocked by <link rel= stylesheet > JavaScript Parser defaults to deferred parsing

16 /* Improve downloads when network latency is high */ <head> <link rel="stylesheet" href="edge.b8487cd.css"> <link rel="stylesheet" href="home.41382eb.css"> <link rel="stylesheet" href="home.41382eb.css"> <script src="really-important-js.js"></script> <head> <body> <img "really-important-hero-image.jpg"></img> </body>

17 <head> <script src='massive-library.js'></script> <script src='even-bigger-library.js'></script> <script src='omg-it-is-huge.js'></script> </head> <body> <script> console.log(requiresalmostnojavascript()); </script> </body>

20 DMANIP Hit Testing Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript Chakra

21 DOM: Document Object Model Passive Event Listeners DOM tree rewrite

22 DMANIP Hit Testing Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript Chakra

23 Full Screen Networking Form Fill Layout Mutation Observer Find on Page CSS OM Audio / Video

27 /* JavaScript code */ parent.appendchild(child); element.nextsibling(); /* C version of these calls */ TreeWriter::AppendChild(parent, child); TreeReader::GetNextSibling(element);

28 Speedometer Larger numbers are better 1.83x faster over the past year 2.78x faster than our initial release

29 /* Passive Event Listeners */ <body> <script> addeventlistener( 'wheel, () => {}, { passive: true } ) </script>

30 DMANIP Hit Testing Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript Chakra

31 DMANIP Hit Testing Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript Chakra

32 Formatting / Layout Faster Layout from id attribute changes Faster Layout from some class changes

33 DOM Tree of Collection of of styles Matching Algorithm

34 Box Tree CSS Box CSS Box CSS Box

35 Want to learn more? Greg Whitworth gave a GREAT talk at CSS Day

36 /* addition of new class */ thecontainer.classlist.add('nonexistent-class') height = thecontainer.offsetheight;

39 <style>.bg-blue { background-color: royalblue; } </style> /* set class with noninherited property */ thecontainer.classlist.add('bg-blue ) height = thecontainer.offsetheight;

42 DMANIP Hit Testing Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript Chakra

43 Painting / Compositing Independent Rendering Video w/o controls Advanced SVG Canvas

44 DMANIP Hit Testing Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript Chakra Painting Compositing

49 MotionMark (bigger scores are better) +43% EdgeHTML 15 EdgeHTML 16

50 Event Loop Prioritized input queue for Event Loop

51 DMANIP Hit Testing Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Painting Compositing Event Loop DOM API & Capabilities JavaScript Chakra

53 Componentization Componentized Browser UI

56 DMANIP Hit Testing Input DOM Tree Display Tree 1 1 Networking Parsers Formatting Layout Painting Compositing DOM API & Capabilities JavaScript Chakra

57 You can help! We want to hear about your biggest performance issues in this Fall s upcoming update. Open bugs at //issues.microsoftedge.com us at perfclub@microsoft.com

58 Thank you! toddreifsteck

COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3

COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3 MODULE 1: OVERVIEW OF HTML AND CSS This module provides an overview of HTML and CSS, and describes how to use Visual Studio 2012