HTML5 Browser Wars

HTML5 Browser Wars

Steven AdamsJuly 27, 2011

2

BA

First, what is a browser?

C

3

Second, why do browsers matter?

4

What transportation mode do they resemble?

5

6

7

8

9

10

How did we get here?

11

Tim Berners-Lee’s vision

Source: http://info.cern.ch

1992

12

The Mosaic War

1992-1993

13

Browser War I

1995-2001

14

Browser War II

2006-201X

15

Browsers we are using

Other1.1%

Opera3.0%

Sa-fari7.5%Chrome13.1%

Firefox21.7%

In-ternet Ex-plorer53.7%

Source: NetMarketShare, June, 2011

16

Browsers and tablets

Other8.0%

Safari92.0%

Source: NetMarketShare, May, 2011

17

Browsers and mobile phone

Other44.5%

Opera21.8%

Safari16.7%

Chrome17.0%

Source: NetMarketShare, June, 2011

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 & ExtensionsDeveloper Tools

19

So how does a browser work?

20

Browser as ecosystem

User Interface

JavaScriptEngine

Display Backend

Data PersistenceBrowser

Engine

LayoutEngine

OtherEnginesNetwork

Adapted from Tali Garsiel, How browsers work http://taligarsiel.com/Projects/howbrowserswork1.htm,

21

How a layout engine works

Parse HTML

DOM Content

Tree

Render Tree

ParseCSS

StylingTree

Paint

Adapted from Tali Garsiel, How browsers work http://taligarsiel.com/Projects/howbrowserswork1.htm,

Network JavaScriptEngine

Display Backend

22

Test Results

23

Test Results

Source: http://html5test.com/

Chrome 12 Firefox 5 Opera 11 Safari 5 Internet Explorer 9

327286 286

253

141

450

24

Total Score = 327

100% 100%

68%

100%

82%

60%

94%100%

0%

75%

50%

100%92%

100%

50%

100% 100%

0% 0%

100%

Source: http://html5test.com/

25

Total Score = 327

100% 100%

68%

100%

82%

60%

94%100%

0%

75%

50%

100%92%

100%

50%

100% 100%

0% 0%

100%

Source: http://html5test.com/

26

Total Score = 286

100% 100%

68%

100%

54% 52%

94%100%

0%

100%

0%

100%92%

20%

50%

100%

67%

0% 0%

100%

Source: http://html5test.com/

27

Total Score = 286

9%

100%

68%

100%

79%

92%

44%

100%

0%

75%

0%

100%

0%

60%50%

75%

100%

0% 0%

100%

Source: http://html5test.com/

28

Total Score = 253

9%

100%

68%

100%

50%

39%

94%100%

0%

95%

50%

100%

0%

100%

0%

75%

100%

0% 0%

100%

Source: http://html5test.com/

29

Total Score = 141

9%

100%

68%

100%

64%

7%

47%

0% 0%5%

0%

100%

0%

20%

0%

50%

0% 0% 0%

100%

Source: http://html5test.com/

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

31

How a JavaScript engine works

InterpretCode

Parse Script

Run-timeObjects

LayoutEngine

Adapted from Tali Garsiel, How browsers work http://taligarsiel.com/Projects/howbrowserswork1.htm,

32

SunSpider Tests

Scores in milliseconds, lower is better

Chrome 11 Firefox 5 Opera 10 Safari 5 Internet Explorer 9

534581 558

658

437

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.

34

The “brands” insideBrowser Layout Engine JavaScript EngineInternet Explorer 9 Trident JScriptFirefox 5 Gecko TraceMonkeyChrome 12 Webkit V8Safari 5 Webkit NitroOpera 11 Presto Carakan

35

5 Predictions

36

Prediction #1: Chrome will win Browser War II

37

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

38

Prediction #3: Custom-built browsers will take off

39

Prediction #4: Web apps will have built in browsers

40

Prediction #5: Cloud-based Browsers are coming

41

42