1. HTML5 Browser Wars Steven Adams July 27, 2011

2. B A First, what is a browser? C 1

3. Second, why do browsers matter? 2

4. What transportation mode do they resemble? 3

5. 4

6. 5

7. 6

8. 7

9. 8

10. How did we get here? 9

11. Tim Berners-Lee’s vision Source: http://info.cern.ch 1992 10

12. The Mosaic War 1992-1993 11

13. Browser War I 1995-2001 12

14. Browser War II 2006-201X 13

15. Browsers we are using Source: NetMarketShare, June, 2011 14

16. Browsers and tablets Source: NetMarketShare, May, 2011 15

17. Browsers and mobile phone Source: NetMarketShare, June, 2011 16

18. 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

19. So how does a browser work? 18

20. 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 http://taligarsiel.com/Projects/howbrowserswork1.htm, 19

21. 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 http://taligarsiel.com/Projects/howbrowserswork1.htm, Network JavaScript Engine JavaScript Engine Display Backend Display Backend 20

22. Test Results 21

23. Test Results Source: http://html5test.com/ 450 22

24. Total Score = 327 Source: http://html5test.com/ 23

25. Total Score = 327 Source: http://html5test.com/ 24

26. Total Score = 286 Source: http://html5test.com/ 25

27. Total Score = 286 Source: http://html5test.com/ 26

28. Total Score = 253 Source: http://html5test.com/ 27

29. Total Score = 141 Source: http://html5test.com/ 28

30. 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

31. 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 http://taligarsiel.com/Projects/howbrowserswork1.htm, 30

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

33. 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

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

35. 5 Predictions 34

36. Prediction #1: Chrome will win Browser War II 35

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

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

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

40. Prediction #5: Cloud-based Browsers are coming 39

41. 40

42. 41