HTML5 Browser Wars
description
Transcript of HTML5 Browser Wars
![Page 1: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/1.jpg)
HTML5 Browser Wars
Steven AdamsJuly 27, 2011
![Page 2: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/2.jpg)
2
BA
First, what is a browser?
C
![Page 3: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/3.jpg)
3
Second, why do browsers matter?
![Page 4: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/4.jpg)
4
What transportation mode do they resemble?
![Page 5: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/5.jpg)
5
![Page 6: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/6.jpg)
6
![Page 7: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/7.jpg)
7
![Page 8: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/8.jpg)
8
![Page 9: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/9.jpg)
9
![Page 10: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/10.jpg)
10
How did we get here?
![Page 11: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/11.jpg)
11
Tim Berners-Lee’s vision
Source: http://info.cern.ch
1992
![Page 12: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/12.jpg)
12
The Mosaic War
1992-1993
![Page 13: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/13.jpg)
13
Browser War I
1995-2001
![Page 14: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/14.jpg)
14
Browser War II
2006-201X
![Page 15: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/15.jpg)
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
![Page 16: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/16.jpg)
16
Browsers and tablets
Other8.0%
Safari92.0%
Source: NetMarketShare, May, 2011
![Page 17: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/17.jpg)
17
Browsers and mobile phone
Other44.5%
Opera21.8%
Safari16.7%
Chrome17.0%
Source: NetMarketShare, June, 2011
![Page 18: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/18.jpg)
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
![Page 19: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/19.jpg)
19
So how does a browser work?
![Page 20: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/20.jpg)
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,
![Page 21: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/21.jpg)
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
![Page 22: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/22.jpg)
22
Test Results
![Page 23: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/23.jpg)
23
Test Results
Source: http://html5test.com/
Chrome 12 Firefox 5 Opera 11 Safari 5 Internet Explorer 9
327286 286
253
141
450
![Page 24: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/24.jpg)
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/
![Page 25: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/25.jpg)
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/
![Page 26: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/26.jpg)
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/
![Page 27: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/27.jpg)
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/
![Page 28: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/28.jpg)
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/
![Page 29: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/29.jpg)
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/
![Page 30: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/30.jpg)
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
![Page 31: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/31.jpg)
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,
![Page 32: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/32.jpg)
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
![Page 33: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/33.jpg)
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.
![Page 34: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/34.jpg)
34
The “brands” insideBrowser Layout Engine JavaScript EngineInternet Explorer 9 Trident JScriptFirefox 5 Gecko TraceMonkeyChrome 12 Webkit V8Safari 5 Webkit NitroOpera 11 Presto Carakan
![Page 35: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/35.jpg)
35
5 Predictions
![Page 36: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/36.jpg)
36
Prediction #1: Chrome will win Browser War II
![Page 37: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/37.jpg)
37
Prediction 2#: Multi-engine browsers will not take off
![Page 38: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/38.jpg)
38
Prediction #3: Custom-built browsers will take off
![Page 39: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/39.jpg)
39
Prediction #4: Web apps will have built in browsers
![Page 40: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/40.jpg)
40
Prediction #5: Cloud-based Browsers are coming
![Page 41: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/41.jpg)
41
![Page 42: HTML5 Browser Wars](https://reader036.fdocuments.net/reader036/viewer/2022081513/5681685f550346895ddea619/html5/thumbnails/42.jpg)
42