1. Firefox 4 & Mobile
Makoto Kato
Mozilla Japan

2. 今日はWeb Devの話は
そんなに触れません

3. WebDevは、
16:05からのトークセッション
とか
今の時間の隣のセッションで
やってます

4. Firefox 4 & Mobile
で45分なので、
的を絞って

5. Firefox 4
• スピード
• 起動時間の向上
• ハードウェゕゕクセラレーション
• JavaScript Engine
• User Experience

6. 起動時間

7. 起動時間の短縮?
• 起動時のボトルネックの調査
• Dirty ProfileでのTalosテスト
• メインスレッド上でのI/O処理の軽減
• 可能な限り非同期処理を!
• Omni JAR
• Startup Cache
• 利用するJavaScriptフゔイル (Addonも含む) をJARフゔイルにして
再利用

8. ハードウェアアクセラレーション

9. ハードウェアアクセラレーション
• Generic
• Direct 2D (Windows)
• Composition
• Direct 3D9+ (Windows)
• OpenGL (Mac OS X / (Linux))

10. ハードウェアアクセラレーション – その他
• WebGL
• OpenGLサポート必須
• Direct 3D 9でも(ANGLE経由)

11. WINDOWS版における
ハードウェアアクセラレーション

12. Direct2Dサポート (Windows)
• Direct2Dを利用するには、システムが
Direct3D 10をサポートする必要がある
• Windows XPでは動作しない
• ドライバのバージョンに確認が必要
• Direct2Dがサポートされている環境であっても、
ドライバのバージョン次第で無効になる
• “gfx.direct2d.force-enabled”強制的に有効にする
方法もあり(非推奨)
• about:supportで自分の環境で利用可能かどうか
を確認可能

13. Direct3D 10 (Direct2D) サポート

14. Direct3D 9のみサポート

15. ドライバのバージョンによって非サポート

16. On Mac OS X

17. DirectWrite

18. Original vs DirectWrite

19. DirectWrite サポート (Windows)
• Direct2Dが有効の場合は、DirectWriteも有効
• Direct2D有効であっても、DirectWriteを無効にす
ることも可能
• Direct2Dをサポートしない環境であっても、
OSのソフトウェゕエミューションモード経由
で利用可能
• gfx.font_rendering.directwrite.enabled

20. ハードウェアアクセラレーション (共通部分)

21. Composition
• 対応ハードウェゕが必要
• Direct3D 9 (Windows)
• OpenGL (MacOS X / Linux)
• layers.accelerate-all=falaseで無効にすることも
可能
• Canvas
• CANVASは独立したテクスチャ
• CSS Transition
• CSS Transtionが開始された時に、その要素は
composition対象

22. VIDEO
• 色空間変換 (YUV->RGB)
• すべてのフレームに対して行う処理なので、CPU
ですべてを行う場合非常に負荷がかかる
• GPUにおけるビデオ再生支援で使われるものの一
つ
• 逆離散コサイン変換
• フレーム間予測/動き補正
• など

23. JAVASCRIPT

24. javascript
• JavaScriptをより速く実行する
• TraceMonkey (3.5から)
• JaegerMonkey (4.0から)
• ES5 strict mode support
• GCの改良

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. ベンチマークなんて
つまらない

28. 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)

29. JaegerMonkey
• TraceMonkeyの弱点を補う
• 効率のいいパスを調べてJaegerMonkeyと
TraceMonkeyのどちらかを状況に応じて利用
• x86プロセッサ上では、SSE2サポート必須
• なければ、JaegerMonkeyは無効になる
• Chrome上ではオフ
• javascript.options.methodjit.chrome
• javascript.options.jitprofiling.chrome
• モバイル版は?

30. USER EXPERIENCE

31. UX
• Firefox 4でのUI/Theme
• Site Button
• ステータスバー
• ゕドオンバー
• Switch to Tab
• App Tab

32. Firefox 4 UI Design (Windows 7)

33. Firefox 4 UI Design

34. Firefox 4 UI Design (Windows XP)

35. Firefox 4 UI Design (Mac OS X)

36. Firefox 4 UI Design (Linux)

37. Site button
• Page Level Notification
へ
• SSL証明書
• パスワード保存 (従来は
Notification Bar)
• 表示が消えても、ツール
バーボタンをクリックす
ることで再度表示

38. ツールバーボタン

39. ステータスバー?

40. Link into Addressbar

41. Addon Bar

42. Switch To tab

43. App Tabs

44. Firefox Sync
• 従来ではゕドオンの形で
リリースされていた
Firefox Syncが本体と統
合
• 別マシン上でのFirefoxで
• 開いてるタブも同期

45. Panorama

46. Addons
• ゕドオンの新機能
• インストール時に再起動が不必要になるゕドオン
のサポート (JetPack)
• ゕドオンのプロセス分離 (JetPack)
• Addon Manager

47. Addon Manager

48. Video
• HTML5 VIDEOにおけるWebMコーデックのサ
ポート
• 色空間変換におけるハードウェゕゕクセラレー
ション
• Direct3D 9+
• OpenGL

49. Security
• Networking
• HTTP Strict Transport Security
• XSS
• Content Security Policy
• バリデーション
• OpenType sanitaize
• WebGL shader validator

50. Plugins – Mac OS X
• プロセス分離のサポート
• Windows版とLinux版では3.6からサポート
• Cocoaイベントモデルプラグイン
• X86_64版のFirefoxでの32ビットプラグイン
のサポート

51. 対応OS (デスクトップ版)
• Mac OS X
• Mac OS X 10.5以降
• 64ビット版
• PowerPC版はリリースされません
• Windows
• Windows 2000以降
• Linux
• GTK+ 2.10以降

52. FIREFOX MOBILE

55. Firefox Mobile
• デスクトップ版と同じレンダリングエンジン
• Mobile User Experience
• タッチスクリーンのためのUI
• Awesome screen
• デスクトップ版との違い
• プロセス分離

56. 同じレンダリングエンジン

57. 現在のモバイルブラウザのスピード例
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

58. MOBILE UX

59. モバイル版ブラウザの悪いUX
• ブラウザによっては、デ
スクトップ版のブラウザ
と同一のUIを利用してい
るものも
• 画面が小さすぎるため、
逆に気付きずらい

60. UXアイデア

61. Main UI

62. Search in Page

63. Awesome Screen idea

64. Awesome Screen

65. Awesome Screen

66. モバイル版におけるプロセス分離
• デスクトップ版とは異なり、Chromeプロセス
(ブラウザ本体)とContentプロセスの二つに分
かれる
• Chrome process
• Content process
• Contentプロセスがクラッシュしても、ブラウザ本
体はクラッシュしない
• レスポンス向上のため

67. クラッシュ例

68. 対応OS (モバイル版)
• Maemo 5 (Nokia N900)
• Android 2.0+
• ARMv7対応CPUのみ (エミュレータでは動作しな
い)

69. Any Question?