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
• 利用するJavaScriptフゔイル (Addonも含む) をJARフゔイルにして
再利用
ハードウェアアクセラレーション
ハードウェアアクセラレーション
• 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がサポートされている環境であっても、
ドライバのバージョン次第で無効になる
• “gfx.direct2d.force-enabled”強制的に有効にする
方法もあり(非推奨)
• about:supportで自分の環境で利用可能かどうか
を確認可能
Direct3D 10 (Direct2D) サポート
Direct3D 9のみサポート
ドライバのバージョンによって非サポート
On Mac OS X
DirectWrite
Original vs DirectWrite
DirectWrite サポート (Windows)
• Direct2Dが有効の場合は、DirectWriteも有効
• Direct2D有効であっても、DirectWriteを無効にす
ることも可能
• Direct2Dをサポートしない環境であっても、
OSのソフトウェゕエミューションモード経由
で利用可能
• gfx.font_rendering.directwrite.enabled
ハードウェアアクセラレーション (共通部分)
Composition
• 対応ハードウェゕが必要
• Direct3D 9 (Windows)
• OpenGL (MacOS X / Linux)
• layers.accelerate-all=falaseで無効にすることも
可能
• Canvas
• CANVASは独立したテクスチャ
• CSS Transition
• CSS Transtionが開始された時に、その要素は
composition対象
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
2010-11-18
ベンチマークなんて
つまらない
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サポート必須
• なければ、JaegerMonkeyは無効になる
• Chrome上ではオフ
• javascript.options.methodjit.chrome
• javascript.options.jitprofiling.chrome
• モバイル版は?
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
• WebGL shader validator
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.16GHz) + IE8
Milestone (OMAP3
550MHz) + Fx
Mobile 4
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