SlideShare a Scribd company logo
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
ベンチマークなんて
つまらない
Firefox 4 and Mobile
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 4 and Mobile
Firefox 4 and 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?

More Related Content

PDF
20141018 osc tokyo_fall_firefox osってなぁに?
PDF
Firefox 4 with SVG
PDF
Firefox Mobile
PDF
FirefoxとMozillaでのSVGの取り組み
PDF
Firefoxos
PDF
Firefox mobile for android internals
PPTX
NVDA 日本語チームの活動報告
PDF
ストアアプリ →universal Windows Apps =WP8.1アプリ
20141018 osc tokyo_fall_firefox osってなぁに?
Firefox 4 with SVG
Firefox Mobile
FirefoxとMozillaでのSVGの取り組み
Firefoxos
Firefox mobile for android internals
NVDA 日本語チームの活動報告
ストアアプリ →universal Windows Apps =WP8.1アプリ

What's hot (11)

PDF
20150118 firefoxos-handson-helloworld
PDF
ZabbixとVulsをDocker上で連携
PPTX
OneDrive Files On-Demand
PPTX
Wndows 10 Fall Creators Update Insider Previewから見たアップデート内容
PDF
Windows 8 を勧める8つの理由
PDF
Firefox for mobile
PDF
OSC 2010 Tokyo/Fall MSセッション
PDF
The current problems and future of the desktop Linux printing
PDF
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
PDF
テクてく Lotus 技術者夜会 03/16 Lotus Notes/Domino Upgrade Pack とは
PPTX
IBM Notes/Domino 9.0.1 アプリケーション開発新機能
20150118 firefoxos-handson-helloworld
ZabbixとVulsをDocker上で連携
OneDrive Files On-Demand
Wndows 10 Fall Creators Update Insider Previewから見たアップデート内容
Windows 8 を勧める8つの理由
Firefox for mobile
OSC 2010 Tokyo/Fall MSセッション
The current problems and future of the desktop Linux printing
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
テクてく Lotus 技術者夜会 03/16 Lotus Notes/Domino Upgrade Pack とは
IBM Notes/Domino 9.0.1 アプリケーション開発新機能
Ad

Similar to Firefox 4 and Mobile (20)

PDF
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
PDF
Firefox と Mozilla のテクノロジー
PDF
Firefox で快適 WordPress 生活
PDF
Firefox FAQ
PDF
Secret of Firefox
PDF
Firefox OSのアーキテクチャと構成技術
PDF
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
PPTX
最新UE4タイトルでのローカライズ事例 (UE4 Localization Deep Dive)
PDF
Firefox OS アプリ開発
PDF
20140531 firefox os
PPTX
mocloud カスタムDockerイメージ ハンズオン
PDF
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
PDF
Openness, Innovation and Opptunity
PDF
パワーユーザー必携の海外の拡張機能20選+α
PDF
Firefoxセミナー
PPTX
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
PPTX
.NET vNext
PDF
Firefoxの開発プロセス
PPTX
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
PDF
Fx OS n2_aoitan_firefox osことはじめ
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Firefox と Mozilla のテクノロジー
Firefox で快適 WordPress 生活
Firefox FAQ
Secret of Firefox
Firefox OSのアーキテクチャと構成技術
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
最新UE4タイトルでのローカライズ事例 (UE4 Localization Deep Dive)
Firefox OS アプリ開発
20140531 firefox os
mocloud カスタムDockerイメージ ハンズオン
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Openness, Innovation and Opptunity
パワーユーザー必携の海外の拡張機能20選+α
Firefoxセミナー
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
.NET vNext
Firefoxの開発プロセス
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
Fx OS n2_aoitan_firefox osことはじめ
Ad

More from Makoto Kato (15)

PDF
Active scripting
PDF
e10sとアプリ間通信
PDF
PDF
PDF
Mozillaのビルドインフラ
PDF
Mobile Web
PDF
Mobile addon
PDF
keep it real
PDF
Think.next
PDF
"Open"
PDF
ブラウザの歴史
PDF
Raindrop
PDF
CSS3の最新事情
PDF
Thunderbird 3のご紹介と企業に求められるカスタマイズ
PDF
js-ctypes - ネイティブコードを呼び出す新しいカタチ
Active scripting
e10sとアプリ間通信
Mozillaのビルドインフラ
Mobile Web
Mobile addon
keep it real
Think.next
"Open"
ブラウザの歴史
Raindrop
CSS3の最新事情
Thunderbird 3のご紹介と企業に求められるカスタマイズ
js-ctypes - ネイティブコードを呼び出す新しいカタチ

Firefox 4 and Mobile