HTML5 Browser Wars Steven Adams July 27, 2011. B A First, what is a browser? C 1

Embed Size (px)

Citation preview

  • Slide 1
  • HTML5 Browser Wars Steven Adams July 27, 2011
  • Slide 2
  • B A First, what is a browser? C 1
  • Slide 3
  • Second, why do browsers matter? 2
  • Slide 4
  • What transportation mode do they resemble? 3
  • Slide 5
  • 4
  • Slide 6
  • 5
  • Slide 7
  • 6
  • Slide 8
  • 7
  • Slide 9
  • 8
  • Slide 10
  • How did we get here? 9
  • Slide 11
  • Tim Berners-Lees vision Source: http://info.cern.ch 1992 10
  • Slide 12
  • The Mosaic War 1992-1993 11
  • Slide 13
  • Browser War I 1995-2001 12
  • Slide 14
  • Browser War II 2006-201X 13
  • Slide 15
  • Browsers we are using Source: NetMarketShare, June, 2011 14
  • Slide 16
  • Browsers and tablets Source: NetMarketShare, May, 2011 15
  • Slide 17
  • Browsers and mobile phone Source: NetMarketShare, June, 2011 16
  • Slide 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
  • Slide 19
  • So how does a browser work? 18
  • Slide 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
  • Slide 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
  • Slide 22
  • Test Results 21
  • Slide 23
  • Test Results Source: http://html5test.com/ 450 22
  • Slide 24
  • Total Score = 327 Source: http://html5test.com/ 23
  • Slide 25
  • Total Score = 327 Source: http://html5test.com/ 24
  • Slide 26
  • Total Score = 286 Source: http://html5test.com/ 25
  • Slide 27
  • Total Score = 286 Source: http://html5test.com/ 26
  • Slide 28
  • Total Score = 253 Source: http://html5test.com/ 27
  • Slide 29
  • Total Score = 141 Source: http://html5test.com/ 28
  • Slide 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
  • Slide 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
  • Slide 32
  • SunSpider Tests Scores in milliseconds, lower is better 31 March 2011
  • Slide 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 browsers layout engine. 32
  • Slide 34
  • The brands inside BrowserLayout EngineJavaScript Engine Internet Explorer 9TridentJScript Firefox 5GeckoTraceMonkey Chrome 12WebkitV8 Safari 5WebkitNitro Opera 11PrestoCarakan 33
  • Slide 35
  • 5 Predictions 34
  • Slide 36
  • Prediction #1: Chrome will win Browser War II 35
  • Slide 37
  • Prediction 2#: Multi-engine browsers will not take off 36
  • Slide 38
  • Prediction #3: Custom-built browsers will take off 37
  • Slide 39
  • Prediction #4: Web apps will have built in browsers 38
  • Slide 40
  • Prediction #5: Cloud-based Browsers are coming 39
  • Slide 41
  • 40
  • Slide 42
  • 41