HTML5 Browser Wars Steven Adams July 27, 2011

B A First, what is a browser? C 1

Second, why do browsers matter? 2

What transportation mode do they resemble? 3

4

5

6

7

8

How did we get here? 9

Tim Berners-Lee’s vision Source:

The Mosaic War

Browser War I

Browser War II X 13

Browsers we are using Source: NetMarketShare, June,

Browsers and tablets Source: NetMarketShare, May,

Browsers and mobile phone Source: NetMarketShare, June,

Key innovation drivers Adapted from Peter Wayner, Battle of the Web browsers, April 27, 2011 Web 2.0 HTML5 standards JavaScript engine speeds Video & Audio Privacy & Security New Features WebGL & WebCL Plug-ins & Extensions Developer Tools 17

So how does a browser work? 18

Browser as ecosystem User Interface User Interface JavaScript Engine JavaScript Engine Display Backend Display Backend Data Persistence Data Persistence Browser Engine Browser Engine Layout Engine Layout Engine Other Engines Other Engines Network Adapted from Tali Garsiel, How browsers work 19

How a layout engine works Parse HTML DOM Content Tree Render Tree Parse CSS Parse CSS Styling Tree Styling Tree Paint Adapted from Tali Garsiel, How browsers work Network JavaScript Engine JavaScript Engine Display Backend Display Backend 20

Test Results 21

Test Results Source:

Total Score = 327 Source: 23

Total Score = 327 Source: 24

Total Score = 286 Source: 25

Total Score = 286 Source: 26

Total Score = 253 Source: 27

Total Score = 141 Source: 28

HTML5 test results Takeaways The latest versions are increasing their support of HTML5 The scores do not indicate that Chrome, Firefox, Safari, and Opera are twice as good as Internet Explorer 29

How a JavaScript engine works Interpret Code Interpret Code Parse Script Run-time Objects Run-time Objects Layout Engine Layout Engine Adapted from Tali Garsiel, How browsers work 30

SunSpider Tests Scores in milliseconds, lower is better 31 March 2011

JavaScript test results takeaways Benchmarks include computationally heavy tasks which may not reflect real-world performance. JavaScript performance outside of a browser is drastically faster than inside of a browser. An improperly coded JavaScript performance test could be affected by a change to the browser’s layout engine. 32

The “brands” inside BrowserLayout EngineJavaScript Engine Internet Explorer 9TridentJScript Firefox 5GeckoTraceMonkey Chrome 12WebkitV8 Safari 5WebkitNitro Opera 11PrestoCarakan 33

5 Predictions 34

Prediction #1: Chrome will win Browser War II 35

Prediction 2#: Multi-engine browsers will not take off 36

Prediction #3: Custom-built browsers will take off 37

Prediction #4: Web apps will have built in browsers 38

Prediction #5: Cloud-based Browsers are coming 39

40

41