html5 browser wars
DESCRIPTION
HTML5 Browser Wars. Steven Adams July 27, 2011. First, what is a browser?. A. C. B. Second, why do browsers matter?. What transportation mode do they resemble?. How did we get here?. Tim Berners-Lee’s vision . 1992. Source: http :// info.cern.ch. The Mosaic War. 1 992-1993. - PowerPoint PPT PresentationTRANSCRIPT
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