Firefox 4 & Mobile
Makoto Kato
Mozilla Japan
今日はWeb Devの話は
そんなに触れません
WebDevは、
16:05からのトークセッション
とか
今の時間の隣のセッションで
やってます
Firefox 4 & Mobile
で45分なので、
的を絞って
Firefox 4
• スピード
• 起動時間の向上
• ハードウェゕゕクセラレーション
• JavaScript Engine
• User Experience
起動時間
起動時間の短縮?
• 起動時のボトルネックの調査
• Dirty ProfileでのTalosテスト
• メインスレッド上でのI/O処理の軽減
• 可能な限り非同期処理を!
• Omni JAR
• Startup Cache
• 利用するJa...
ハードウェアアクセラレーション
ハードウェアアクセラレーション
• Generic
• Direct 2D (Windows)
• Composition
• Direct 3D9+ (Windows)
• OpenGL (Mac OS X / (Linux))
ハードウェアアクセラレーション – その他
• WebGL
• OpenGLサポート必須
• Direct 3D 9でも(ANGLE経由)
WINDOWS版における
ハードウェアアクセラレーション
Direct2Dサポート (Windows)
• Direct2Dを利用するには、システムが
Direct3D 10をサポートする必要がある
• Windows XPでは動作しない
• ドライバのバージョンに確認が必要
• Direct2Dがサ...
Direct3D 10 (Direct2D) サポート
Direct3D 9のみサポート
ドライバのバージョンによって非サポート
On Mac OS X
DirectWrite
Original vs DirectWrite
DirectWrite サポート (Windows)
• Direct2Dが有効の場合は、DirectWriteも有効
• Direct2D有効であっても、DirectWriteを無効にす
ることも可能
• Direct2Dをサポートしない環境...
ハードウェアアクセラレーション (共通部分)
Composition
• 対応ハードウェゕが必要
• Direct3D 9 (Windows)
• OpenGL (MacOS X / Linux)
• layers.accelerate-all=falaseで無効にすることも
可能
• C...
VIDEO
• 色空間変換 (YUV->RGB)
• すべてのフレームに対して行う処理なので、CPU
ですべてを行う場合非常に負荷がかかる
• GPUにおけるビデオ再生支援で使われるものの一
つ
• 逆離散コサイン変換
• フレーム間予測/動き...
JAVASCRIPT
javascript
• JavaScriptをより速く実行する
• TraceMonkey (3.5から)
• JaegerMonkey (4.0から)
• ES5 strict mode support
• GCの改良
Kraken (on Core i7 920)
17257.1
6593 6427.5
0
5000
10000
15000
20000
Firefox 3.6.12 Firefox 4.0 Beta 7 Firefox Latest TM
2...
ベンチマークなんて
つまらない
JSNES (fps)
8
59 59
0
10
20
30
40
50
60
70
Firefox 3.6.12 Firefox 4.0 Beta 7
(JM)
Firefox 4.0 Beta 7
(TM+JM)
JaegerMonkey
• TraceMonkeyの弱点を補う
• 効率のいいパスを調べてJaegerMonkeyと
TraceMonkeyのどちらかを状況に応じて利用
• x86プロセッサ上では、SSE2サポート必須
• なければ、Jaeg...
USER EXPERIENCE
UX
• Firefox 4でのUI/Theme
• Site Button
• ステータスバー
• ゕドオンバー
• Switch to Tab
• App Tab
Firefox 4 UI Design (Windows 7)
Firefox 4 UI Design
Firefox 4 UI Design (Windows XP)
Firefox 4 UI Design (Mac OS X)
Firefox 4 UI Design (Linux)
Site button
• Page Level Notification
へ
• SSL証明書
• パスワード保存 (従来は
Notification Bar)
• 表示が消えても、ツール
バーボタンをクリックす
ることで再度表示
ツールバーボタン
ステータスバー?
Link into Addressbar
Addon Bar
Switch To tab
App Tabs
Firefox Sync
• 従来ではゕドオンの形で
リリースされていた
Firefox Syncが本体と統
合
• 別マシン上でのFirefoxで
• 開いてるタブも同期
Panorama
Addons
• ゕドオンの新機能
• インストール時に再起動が不必要になるゕドオン
のサポート (JetPack)
• ゕドオンのプロセス分離 (JetPack)
• Addon Manager
Addon Manager
Video
• HTML5 VIDEOにおけるWebMコーデックのサ
ポート
• 色空間変換におけるハードウェゕゕクセラレー
ション
• Direct3D 9+
• OpenGL
Security
• Networking
• HTTP Strict Transport Security
• XSS
• Content Security Policy
• バリデーション
• OpenType sanitaize
• We...
Plugins – Mac OS X
• プロセス分離のサポート
• Windows版とLinux版では3.6からサポート
• Cocoaイベントモデルプラグイン
• X86_64版のFirefoxでの32ビットプラグイン
のサポート
対応OS (デスクトップ版)
• Mac OS X
• Mac OS X 10.5以降
• 64ビット版
• PowerPC版はリリースされません
• Windows
• Windows 2000以降
• Linux
• GTK+ 2.10以降
FIREFOX MOBILE
Firefox Mobile
• デスクトップ版と同じレンダリングエンジン
• Mobile User Experience
• タッチスクリーンのためのUI
• Awesome screen
• デスクトップ版との違い
• プロセス分離
同じレンダリングエンジン
現在のモバイルブラウザのスピード例
23176.4
16280.9
12201.5
0
5000
10000
15000
20000
25000
Milestone (OMAP3
550MHz) +
Android 2.1
PC (Atom
2...
MOBILE UX
モバイル版ブラウザの悪いUX
• ブラウザによっては、デ
スクトップ版のブラウザ
と同一のUIを利用してい
るものも
• 画面が小さすぎるため、
逆に気付きずらい
UXアイデア
Main UI
Search in Page
Awesome Screen idea
Awesome Screen
Awesome Screen
モバイル版におけるプロセス分離
• デスクトップ版とは異なり、Chromeプロセス
(ブラウザ本体)とContentプロセスの二つに分
かれる
• Chrome process
• Content process
• Contentプロセスがク...
クラッシュ例
対応OS (モバイル版)
• Maemo 5 (Nokia N900)
• Android 2.0+
• ARMv7対応CPUのみ (エミュレータでは動作しな
い)
Any Question?
Firefox 4 and Mobile
Firefox 4 and Mobile
Firefox 4 and Mobile
Upcoming SlideShare
Loading in...5
×

Firefox 4 and Mobile

2,619

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,619
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Firefox 4 and Mobile

  1. 1. Firefox 4 & Mobile Makoto Kato Mozilla Japan
  2. 2. 今日はWeb Devの話は そんなに触れません
  3. 3. WebDevは、 16:05からのトークセッション とか 今の時間の隣のセッションで やってます
  4. 4. Firefox 4 & Mobile で45分なので、 的を絞って
  5. 5. Firefox 4 • スピード • 起動時間の向上 • ハードウェゕゕクセラレーション • JavaScript Engine • User Experience
  6. 6. 起動時間
  7. 7. 起動時間の短縮? • 起動時のボトルネックの調査 • Dirty ProfileでのTalosテスト • メインスレッド上でのI/O処理の軽減 • 可能な限り非同期処理を! • Omni JAR • Startup Cache • 利用するJavaScriptフゔイル (Addonも含む) をJARフゔイルにして 再利用
  8. 8. ハードウェアアクセラレーション
  9. 9. ハードウェアアクセラレーション • Generic • Direct 2D (Windows) • Composition • Direct 3D9+ (Windows) • OpenGL (Mac OS X / (Linux))
  10. 10. ハードウェアアクセラレーション – その他 • WebGL • OpenGLサポート必須 • Direct 3D 9でも(ANGLE経由)
  11. 11. WINDOWS版における ハードウェアアクセラレーション
  12. 12. Direct2Dサポート (Windows) • Direct2Dを利用するには、システムが Direct3D 10をサポートする必要がある • Windows XPでは動作しない • ドライバのバージョンに確認が必要 • Direct2Dがサポートされている環境であっても、 ドライバのバージョン次第で無効になる • “gfx.direct2d.force-enabled”強制的に有効にする 方法もあり(非推奨) • about:supportで自分の環境で利用可能かどうか を確認可能
  13. 13. Direct3D 10 (Direct2D) サポート
  14. 14. Direct3D 9のみサポート
  15. 15. ドライバのバージョンによって非サポート
  16. 16. On Mac OS X
  17. 17. DirectWrite
  18. 18. Original vs DirectWrite
  19. 19. DirectWrite サポート (Windows) • Direct2Dが有効の場合は、DirectWriteも有効 • Direct2D有効であっても、DirectWriteを無効にす ることも可能 • Direct2Dをサポートしない環境であっても、 OSのソフトウェゕエミューションモード経由 で利用可能 • gfx.font_rendering.directwrite.enabled
  20. 20. ハードウェアアクセラレーション (共通部分)
  21. 21. Composition • 対応ハードウェゕが必要 • Direct3D 9 (Windows) • OpenGL (MacOS X / Linux) • layers.accelerate-all=falaseで無効にすることも 可能 • Canvas • CANVASは独立したテクスチャ • CSS Transition • CSS Transtionが開始された時に、その要素は composition対象
  22. 22. VIDEO • 色空間変換 (YUV->RGB) • すべてのフレームに対して行う処理なので、CPU ですべてを行う場合非常に負荷がかかる • GPUにおけるビデオ再生支援で使われるものの一 つ • 逆離散コサイン変換 • フレーム間予測/動き補正 • など
  23. 23. JAVASCRIPT
  24. 24. javascript • JavaScriptをより速く実行する • TraceMonkey (3.5から) • JaegerMonkey (4.0から) • ES5 strict mode support • GCの改良
  25. 25. Kraken (on Core i7 920) 17257.1 6593 6427.5 0 5000 10000 15000 20000 Firefox 3.6.12 Firefox 4.0 Beta 7 Firefox Latest TM 2010-11-18
  26. 26. ベンチマークなんて つまらない
  27. 27. JSNES (fps) 8 59 59 0 10 20 30 40 50 60 70 Firefox 3.6.12 Firefox 4.0 Beta 7 (JM) Firefox 4.0 Beta 7 (TM+JM)
  28. 28. JaegerMonkey • TraceMonkeyの弱点を補う • 効率のいいパスを調べてJaegerMonkeyと TraceMonkeyのどちらかを状況に応じて利用 • x86プロセッサ上では、SSE2サポート必須 • なければ、JaegerMonkeyは無効になる • Chrome上ではオフ • javascript.options.methodjit.chrome • javascript.options.jitprofiling.chrome • モバイル版は?
  29. 29. USER EXPERIENCE
  30. 30. UX • Firefox 4でのUI/Theme • Site Button • ステータスバー • ゕドオンバー • Switch to Tab • App Tab
  31. 31. Firefox 4 UI Design (Windows 7)
  32. 32. Firefox 4 UI Design
  33. 33. Firefox 4 UI Design (Windows XP)
  34. 34. Firefox 4 UI Design (Mac OS X)
  35. 35. Firefox 4 UI Design (Linux)
  36. 36. Site button • Page Level Notification へ • SSL証明書 • パスワード保存 (従来は Notification Bar) • 表示が消えても、ツール バーボタンをクリックす ることで再度表示
  37. 37. ツールバーボタン
  38. 38. ステータスバー?
  39. 39. Link into Addressbar
  40. 40. Addon Bar
  41. 41. Switch To tab
  42. 42. App Tabs
  43. 43. Firefox Sync • 従来ではゕドオンの形で リリースされていた Firefox Syncが本体と統 合 • 別マシン上でのFirefoxで • 開いてるタブも同期
  44. 44. Panorama
  45. 45. Addons • ゕドオンの新機能 • インストール時に再起動が不必要になるゕドオン のサポート (JetPack) • ゕドオンのプロセス分離 (JetPack) • Addon Manager
  46. 46. Addon Manager
  47. 47. Video • HTML5 VIDEOにおけるWebMコーデックのサ ポート • 色空間変換におけるハードウェゕゕクセラレー ション • Direct3D 9+ • OpenGL
  48. 48. Security • Networking • HTTP Strict Transport Security • XSS • Content Security Policy • バリデーション • OpenType sanitaize • WebGL shader validator
  49. 49. Plugins – Mac OS X • プロセス分離のサポート • Windows版とLinux版では3.6からサポート • Cocoaイベントモデルプラグイン • X86_64版のFirefoxでの32ビットプラグイン のサポート
  50. 50. 対応OS (デスクトップ版) • Mac OS X • Mac OS X 10.5以降 • 64ビット版 • PowerPC版はリリースされません • Windows • Windows 2000以降 • Linux • GTK+ 2.10以降
  51. 51. FIREFOX MOBILE
  52. 52. Firefox Mobile • デスクトップ版と同じレンダリングエンジン • Mobile User Experience • タッチスクリーンのためのUI • Awesome screen • デスクトップ版との違い • プロセス分離
  53. 53. 同じレンダリングエンジン
  54. 54. 現在のモバイルブラウザのスピード例 23176.4 16280.9 12201.5 0 5000 10000 15000 20000 25000 Milestone (OMAP3 550MHz) + Android 2.1 PC (Atom 2.16GHz) + IE8 Milestone (OMAP3 550MHz) + Fx Mobile 4
  55. 55. MOBILE UX
  56. 56. モバイル版ブラウザの悪いUX • ブラウザによっては、デ スクトップ版のブラウザ と同一のUIを利用してい るものも • 画面が小さすぎるため、 逆に気付きずらい
  57. 57. UXアイデア
  58. 58. Main UI
  59. 59. Search in Page
  60. 60. Awesome Screen idea
  61. 61. Awesome Screen
  62. 62. Awesome Screen
  63. 63. モバイル版におけるプロセス分離 • デスクトップ版とは異なり、Chromeプロセス (ブラウザ本体)とContentプロセスの二つに分 かれる • Chrome process • Content process • Contentプロセスがクラッシュしても、ブラウザ本 体はクラッシュしない • レスポンス向上のため
  64. 64. クラッシュ例
  65. 65. 対応OS (モバイル版) • Maemo 5 (Nokia N900) • Android 2.0+ • ARMv7対応CPUのみ (エミュレータでは動作しな い)
  66. 66. Any Question?

×