More Related Content
Firefox 3.1 In Depth (?)
- 1. Firefox 3.1 inDepth(?) ＠Firefox Developer Conference 2008 by Tomoya Asai (aka. dynamis)
- 2. 自己紹介 - 浅井智也 • Mozilla Japan テクニカルマーケティング担当 • Mozilla の製品、技術、思想のエバンジェリスト • コミュニティでは dynamis (でゅなみす) として活動 • Firefox 1 3, Thunderbird 1 2 の L10N をリード • 単独リードから あ さんや mar さんとの共同体制に • SUMO (Firefox サポートサイト) 日本語版リーダー • 実際の翻訳の大半は mar さんによるもの • MozillaZine.jp などのコミュニティ活性化サポート • 基本的にはサーバなどのバックエンドサポート
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. 本日のお料理 前菜: New Interface スープ:New Feature 魚料理: New Standard 肉料理: New Technology デザート: New Web
- 17. New Interface Photo byhiroohi http://flickr.com/photos/rainboweyes/2747484161/
- 18.
- 19. タブのプレビュー • Ctrl +Tab、タブ一覧ボタンでプレビュー表示と検索
- 20. タブブラウジング • ドラッグ＆ドロップでウィンドウ間のタブ移動 • Fx3まではページが再読み込みされていた • タブが１つでもデフォルトでタブバーを表示 • タブ１つだけの時はタブに閉じるボタンを表示しない • 最後のタブを閉じるとウィンドウが閉じる • タブバーに新しいタブを開くボタンを追加 • 再読み込みボタンの中クリックでタブを複製
- 21. セキュリティ関連 UI • SSL証明書エラーページを平易な説明に改善 • パスワード保存時の情報バーにドメイン名を表示 • ブロックされたプラグインについて情報バーで通知
- 22. セキュリティ関連 UI • SSL証明書エラーページを平易な説明に改善 • パスワード保存時の情報バーにドメイン名を表示 • ブロックされたプラグインについて情報バーで通知
- 23. セキュリティ関連 UI • SSL証明書エラーページを平易な説明に改善 • パスワード保存時の情報バーにドメイン名を表示 • ブロックされたプラグインについて情報バーで通知
- 24. セキュリティ関連 UI • SSL証明書エラーページを平易な説明に改善 • パスワード保存時の情報バーにドメイン名を表示 • ブロックされたプラグインについて情報バーで通知
- 25. その他の UI 変更 •インストーラの EULA を廃止して about:rights に変更 • オープンソースソフトで EULA は不要 • ロケーションバーが空の時には説明を表示 • ブックマークと履歴を検索: • 読み込み中アイコン(スロバー)をデフォルト非表示に • MacBook のマルチタッチジェスチャーをサポート • 履歴、ページ端への移動、ズーム、タブ切り替え
- 26. New Feature Photo byakira http://flickr.com/photos/arika/428018383/
- 27.
- 28. プライベートブラウジング • 表示ページの履歴、検索履歴、ダウンロード履歴、 Web フォーム履歴、Cookie、一時ファイル が一切保存されない(匿名ブラウジングではない) • モード切替時にタブの状態を保存、復元する • ロケーションバーは既存の履歴とブックマークが対象
- 29. 最近の履歴を消去 • 期間を指定して履歴を消去 • 1,2, 4時間、1日、すべての履歴から選択
- 30. 最近の履歴を消去 • 期間を指定して履歴を消去 • 1,2, 4時間、1日、すべての履歴から選択
- 31. スマートロケーションバー • 検索対象の絞り込みキーワード (記号)のサポート • ^ で履歴、* でブックマーク、+ でタグ付きページ @ でURL、# でタイトルとタグだけを検索対象に • 注: "^word" でなく "^ word" や "word ^" と入力
- 32. スマートロケーションバー • 検索対象の絞り込みキーワード (記号)のサポート • ^ で履歴、* でブックマーク、+ でタグ付きページ @ でURL、# でタイトルとタグだけを検索対象に • 注: "^word" でなく "^ word" や "word ^" と入力
- 33. スマートロケーションバー • 検索対象の絞り込みキーワード (記号)のサポート • ^ で履歴、* でブックマーク、+ でタグ付きページ @ でURL、# でタイトルとタグだけを検索対象に • 注: "^word" でなく "^ word" や "word ^" と入力
- 34. スマートロケーションバー • 検索文字列の途中を変更した時にも即時結果を表示 • Fx3では文字列末尾を変更したときだけ表示 • スマートキーワードの検索を候補のトップに表示 • キーワード "rfc" を設定したブックマークの例:
- 35. スマートロケーションバー • 検索文字列の途中を変更した時にも即時結果を表示 • Fx3では文字列末尾を変更したときだけ表示 • スマートキーワードの検索を候補のトップに表示 • キーワード "rfc" を設定したブックマークの例:
- 36.
- 37.
- 38. その他の新機能 • タグの自動補完 • 複数ブックマークの一括タグ付け •ソース表示のリンクブラウズモード • view-source でリンクを辿りながらソース表示 • DNS プリフェッチ
- 39. New Standard Photo byhiroohi http://flickr.com/photos/rainboweyes/2747484331/
- 40.
- 41.
- 42.
- 43.
- 44. Web Fonts • ダウンロードフォントのfont-face を定義して使う @font-face { font-family: "Decorated Roman Initials"; src: url(http://www.princexml.com/fonts/steffmann/ DecoratedRomanInitials.ttf) format("truetype"); } h1 { font: 2.3cm/0.84 "Decorated Roman Initials", fantasy; } • 必要な文字だけダウンロードさせることも可能 @font-face { font-family: Ampersand; src: url(ampersand.otf) format("opentype"); unicode-range:U+0026; }
- 45. Web Fonts • サポートしていなければフォールバックするだけ •フォント読み込み中の描画はブラウザによって異なる • Firefox 3.1 はダウンロード後に再描画 • Safari はダウンロードまでテキスト表示無し • フリーの Web Font も公開されている • http://opentype.info/demo/webfontdemo.html • フォントメーカーの皆さん、サイトライセンス如何？
- 46. CSS3 • CSS3 メディアクエリー •出力デバイスに応じたデザインが可能に • 画面の幅、高さ、縦横比、解像度、色深度 etc... • 特にネットブックやモバイルデバイス対応に • CSS3 セレクタ(擬似クラス)のサポート: • 任意または特定種類の an+b 番目の子要素 • :nth-child()、:nth-last-child()、 :nth-of-type()、:nth-last-of-type()、 • 最初、最後、単一の子要素 • :first-of-type、:last-of-type、:only-of-type
- 47. CSS3 • 楕円境界線 border-radius •影付き文字 text-shadow • 影付きボックス (draft) -moz-box-shadow • 画像境界線 (draft) -moz-border-image • 段組レイアウト (draft) -moz-column-* • オーバーフロー時に"…" text-overflow: ellipsis
- 48. more CSS • 改行以外の空白を1つにCSS2.1 white-space:pre-line • CSS2.1 generated content の position と float • 変形、回転 (Apple Spec) CSS Transform • WebFonts、Transform、 text-shadow のサポートで 自由なテキストデザインが ブラウザ上で実現可能に • 斜めのメニューやタイトル etc...
- 49. Canvas • HTML5 CanvasText API • fillText()、strokeText()、 measureText(), • Firefox 3 では独自 API • HTML5 Canvas Shadows API • ctx.shadowOffsetX、ctx.shadowOffsetY、 ctx.shadowBlur、ctx.shadowColor • HTML5 Canvas CreteImageData() • Canvas へのビデオ描画
- 50. <video> & <audio> •Ogg Vorbis/Theora をネイティブサポート • SVG filter、clip、CSS Transform などとも併用可
- 51. <video> & <audio> •Ogg Vorbis/Theora をネイティブサポート • SVG filter、clip、CSS Transform などとも併用可
- 52. その他の Web 標準 •Geolocation API • SVG による HTML の切り抜き、マスク、フィルタ • HTML5 ドラッグ＆ドロップ API • HTML5 オフラインキャッシュ • DOM 2 Traversal - NodeIterator • クロスサイト XMLHttpRequest (XHR) • Fx3 では仕様が未確定だったためスキップされた • <script defer="defer"> で JavaScript の遅延評価
- 53. New Technology Photo byhiroohi http://flickr.com/photos/rainboweyes/2747484483/
- 54.
- 55. カラーマネージメント • ICC カラープロファイルのCMS がデフォルトでオンに • PhotoShop などでの表示色と一致する • カラープロファイル情報のある画像でのみ色補正 • 画像と背景色 (CSS 指定のRGB値) がずれないように • プロファイル付画像だけなのは W3C の指針でもある • これは先行実装している Safari とも同じ動作 • Fx3 では性能(と描画)の問題でデフォルトオフ • 速度低下は 1% (全画像だと 4 5%、Fx3 では 20 30%) http://bholley.wordpress.com/2008/09/12/so-many-colors/
- 56. Photo by flod http://flickr.com/photos/flod/2850464994/ Firefox3.0 Firefox 3.1
- 57. JavaScript • コンテンツでのネイティブ JSON(rfc4627) サポート • JSON.parse()、JSON.stringify()、 *.prototype.toJSON() • XUL 内で使用する nsIJSON は Fx3 で実装済 • ワーカースレッド API • wk = new Worker("path/to/script.js"); で生成して wk.onmessage, wk.onerror, wk.postMessage を定義 • まだ API の仕様は標準化されていない • バックグラウンドからは直接 DOM を操作できない • 重たい計算処理やオンラインに戻るときの処理などに
- 58. TraceMonkey • Firefox 3.1の新 JavaScript エンジン • 目標は C や Java に匹敵する処理速度 • 少ないメモリで高速な処理を実現するのが特徴 • 新しいタイプの JIT コンパイラを搭載 • Tamarin (Tamarin-Tracing) の nanojit を移植 • UC の Andreas Gal らの研究成果を反映 • Tracing という手法を用いた JIT コンパイラ • Andreas Gal による Tracing の論文は 2006年∼ • TraceMonkey の開発は今年の 6月末∼
- 59.
- 60. JavaScript は何故遅い？ • JavaScript= 単純なスクリプトを処理する言語 • そもそも Java があるのに JS ができたのはそのため • 用途上そもそも高速化する必要性、需要がない • Web アプリケーションができたのはつい最近 • 開発者の数は C や Java に比べるまでもない • 比較的新しい言語 • Fortran: 1954∼、C: 1972∼、C++: 1982∼、 Java: 1990∼、JavaScript: 1995∼ • 誰もコンパイラの開発に力を入れていなかった
- 61. 言語の速度 • 一昔前に C++と Java のどちらが速いか議論された • 仮想マシンで動く Java は遅い！？ • 逐次解釈では C の 20 倍以上遅かった • 中間言語への事前コンパイルで高速化 • JIT によるネイティブコード生成で高速化 • 現在では処理内容次第では Java の方が高速 • パレートの法則 • 処理の大部分は一部のコードに集中する • ボトルネックとなる部分を高速化すればよい
- 62. JavaScript は何故遅い？ • 動的スクリプト言語 •演算前に型のチェックと変換が必要 • 配列が存在しない • Array は配列でなくハッシュオブジェクト(仕様) • array[3] は実際には array["3"] へのアクセス • すべてのプロパティアクセスでハッシュ計算が必要 • クラスが存在しない • プロトタイプベースのオブジェクト指向言語 • 変数のクラスによる事前最適化が不可能
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69. JavaScript の高速化 • 動的スクリプト言語 •ループ外で型チェックしてから固定型で演算 • 配列が存在しない • 配列として使われているなら配列として処理 • 同じプロパティへのアクセスはキャッシュ • クラスが存在しない • オブジェクトの定義を変更することはまれ • 同じ手順で定義したオブジェクトを同じクラスに • クラスチェックだけしてクラスに特化した処理 注: これは TraceMonkey の話じゃなくて一般論
- 70. Just In TimeCompiler • ボトルネックを高速なネイティブコードに変換 • 実行時に繰り返し処理される部分を検出 • 既存の JIT は関数(メソッド)呼び出し回数をカウント • 一定回数以上呼び出されたメソッドをコンパイル • 実行時情報を使った最適化が可能 • 事前コンパイル型の C++ などより高速化可能 • Java は HotSpot という JIT の導入で大幅高速化 • Action Script 3 も JIT によって高速化 • 但し AS3 の場合は静的型の導入が大きい
- 71. Tracing JIT 1. ソースコードをバイトコード(中間コード)に変換 2.インタープリタでバイトコードを実行しつつ監視 • 後方分岐発生時以外はペナルティ一切無し 3. 後方分岐のジャンプ先をループ始点候補として記録 • ループ処理は必ず後方分岐を伴う 4. 一定回数以上ループしたら実行バイトコードを記録 • 実際に処理するバイトコードだけを記録する 5. 記録された軌跡 (trace) をネイティブコードにコンパイル 6. ネイティブコードで高速処理
- 72. Tracing JIT var i,k=0; for(i=0; i < 1000; ++i) { ++k; } alert(k); iconst_0 istore_2 iconst_0 istore_1 A iload_1 sipush 1000 if_icmpge B iinc 2,1 iinc 1,1 goto A B getstatic System.out iload_2 invokevirtual alert(int) トレース 後方分岐
- 73. Tracing JIT • ループのバイトコードをトレース •全ての分岐結果を記録 • 同一条件で実行される限りネイティブコードで処理 • 記録した分岐結果と異なる場合は VM に処理を返す • switch 文なども分岐テーブルではなくトレース時に 実行された特定条件との比較だけを行う • ループ完了または特定条件発生時にトレース終了 • 例外発生時についてはトレース対象外 • ネイティブメソッド呼び出しも基本的に対象外
- 74. Tracing JIT • ネイティブコードは既存の手法より高速化可能 •実際処理される最小限のネイティブコードを生成 • 既存の JIT では関数中の非実行部分もコンパイル • ループ中の関数呼び出しもネイティブコードで最適化 • 関数単位のネイティブコード生成では不可能 • 型についても当然ループ開始時のチェックのみに • switch 文だったところも if 文として処理 • トレーズ時と同じ分岐かどうかをチェックするだけ • 同一条件ループでループのオーバーヘッドなし
- 75. Tracing the Web •まだまだ開発は始まったばかり • ようやく安定してきた段階で高速化の余地はまだまだ • 現在のトレース対象はネイティブ JS と一部の DOM • XPCOM のネイティブメソッド呼び出しがあると 一部対応しているものを除きトレース対象外に • 純粋な JS オブジェクトの処理は非常に高速に • 画像変換など重たい数値計算処理には効果大 • 他言語から生成したバイトコードも処理 • IronPython などの IronMonkey プロジェクトも･･･
- 76. Fx3 vs TraceMonkey Benchmarkby Brendan http://weblogs.mozillazine.org/roadmap/archives/2008/08/tracemonkey_javascript_lightsp.html 各種 JS ベンチマークの結果 (8月末)
- 77. Fx3 vs TraceMonkey Benchmarkby Brendan http://weblogs.mozillazine.org/roadmap/archives/2008/08/tracemonkey_javascript_lightsp.html 各種 JS ベンチマークの結果 (8月末)速度比較結果は あくまでも参考値 ベンチマークと 実行環境次第です
- 78. IE7 vs Fx3vs Fx3.1b2 0ms 10,000ms 20,000ms 30,000ms 40,000ms 1,272ms 3,800ms 30,829ms IE7 Firefox 3.1b2 Firefox 3.0 Apple SunSpider Benchmark - Vista on iMac IE7 の 24 倍 IE7 の ８ 倍
- 79. IE7 vs Fx3vs Fx3.1b2 0ms 10,000ms 20,000ms 30,000ms 40,000ms 1,272ms 3,800ms 30,829ms IE7 Firefox 3.1b2 Firefox 3.0 Apple SunSpider Benchmark - Vista on iMac IE7 の 24 倍 IE7 の ８ 倍 速度比較結果は あくまでも参考値 ベンチマークと 実行環境次第です
- 80. Fx3 vs Fx3.1b2 0ms 100ms 200ms 300ms 400ms 3daccess bitops flow crypto date math regexp string Firefox 3.0 Firefox 3.1b2 Apple SunSpider Benchmark - Vista on iMac
- 81. Fx3 vs Fx3.1b2 0ms 100ms 200ms 300ms 400ms 3daccess bitops flow crypto date math regexp string Firefox 3.0 Firefox 3.1b2 Apple SunSpider Benchmark - Vista on iMac 速度比較結果は あくまでも参考値 ベンチマークと 実行環境次第です
- 82. 補足: Tamarin との関係 •Tamarin は Adobe の Action Script エンジン • Tamarin と SpiderMonkey の統合は中止 • Tamarin は SpiderMonkey の高速化に追従できない • Tamarin には eval() など必要な機能が多数欠落 • バイトコードや DOM との結合が強い • TraceMonkey では Tamarin の JIT のみ移植 • Tamarin-Tracing というブランチの JIT を移植 • 将来的にはガベージコレクタなどの移植や統合も • 相互のコードや成果を反映し合いながら開発
- 83. New Web Photo byshiokuma http://flickr.com/photos/shiokuma/631332559/
- 84.
- 85.
- 86.
- 87.
- 88. Quality Assurance Photo bymasahiko http://www.flickr.com/photos/masahiko/986748017/
- 89.