YUIを搭載した次世代のYSlowの

マルセルデュランから21:17時2011年7月18日|で開発 、 パフォーマンス | 4コメント

数週間前、Yahoo!が発表した携帯電話用YSlowをで速度2011モバイルの世界にYSlowのパフォーマンス分析のパワーをもたらす、。

モバイルのためのYSlowのような作品をブックマークレット 、それが可能な以外のブラウザ上で実行することのFirefox（アドオンなど）またはクロム（拡張子など） 。

YSlowのアーキテクチャは、部分的にクロスプラットフォームとYUIを動作するように再設計されたサンドボックス作る、クロスブラウザの抽象化と可能な限りシンプルなYQLアクセスに不可欠な要素でした。

サンドボックス

パフォーマンス分析でとページ自体をいじくることなく、干渉することなく、ページに埋め込まれるためには、YSlowのはYUIサンドボックスの力を活用することで、任意のページにJavaScriptとCSSを注入するブックマークレットです。

ブックマークレットのURL： 

ジャバスクリプト：（関数（Y、P、O）{
     P = y.body.appendChild（y.createElement（'iframeを'））;
     p.id ='YSlowは、ブックマークレット';
     p.style.cssText ='表示：なし';
     O = p.contentWindow.document。
     o.open（）。'（書き込み
         <HEAD>
         <体のonload ="
             YUI_config = {
                勝利：window.parent、
                 DOC：window.parent.document
             };
             VAR D =文書;
             d.getElementsByTagName（\'頭\'）[0]
                 。appendChildを（
                     d.createElement（\'スクリプト\'）
                 ）。SRC = \'http://d.yimg.com/jc/yslow-bookmarklet.js \'"
         >
     '）;
     o.close（）
 }（ドキュメント））

上記のコード：

  • 空のiframeを作成します。
  • ページの本文に追加します。
  • iframeは*非表示にします。
  • そのウィンドウハンドラを取得します。
  • そのコンテンツにiframeのボディを書き込みます。
  • このボディは空ですが、持ってonloadイベントを
  • onloadイベントは、YSlowのJSを注入する方法を定義します。
    • 設定YUI_config 、そのwinとdoc 、分析対象のページにポイントをwindowとdocumentそれぞれ
    • 動的に作成することで、YSlowのURLを注入するscriptインラインフレームの中に要素をhead

* iframeがすべてYSlowのプレゼンテーションの資産がロードされている時間が表示されます

これは、解析対象のページにiframeを配置します。 このiframeは、その中に常駐するサンドボックス環境とYSlowのように動作します。 iframeが動的にすることなく作成されるためsrc属性は存在しているので、それはその親（ページが解析される）にアクセスできるようになります同一生成元ポリシーの違反が起こっていない。

YUI_configオブジェクトは、それが設定しているため便利であるwinとdoc配線への呼び出し、iframeの親（解析対象のページ）に、このように、新しいYUIのインスタンスは、デフォルトでは親の文書にバインドされるY.allとY.one介してY.config.winまたはY.config.doc YUIのからuseコールバック。

YSlowののプレゼンテーションは、iframeのによって処理されwindowやdocumentだけでなく、親のページのスタイルと競合することなくこのiframe内に外部CSSをフェッチするようにYSlowはメインのスクリプトがマークアップをレンダリングできるように、参照。 YSlowは、後でパフォーマンス分析に必要なすべてのコンポーネント（画像、スクリプト、リンク、背景画像、フラッシュ、など）を取得するために、親ページをスキャンします。 これは、アクセスすることによって行われますY.config.winとY.config.doc彼らは親ページを参照しているため、。

クロスブラウザの抽象化

ブックマークレットなので、携帯用YSlowのは、任意のブラウザ上で動作することになっています* YUIは、その結果、ブラウザの違いを正規化することにより、クロスブラウザの問題を抽象化してクリーンな、読みやすいと保守性の高いコードベース。

YSlowのは完全にYUI 3に移植されていない-今のところ唯一のコントローラ層（今後のアプリケーションコンポーネントから） -まだ、すべてのDOM操作やイベント処理は、によって行われているnodeとeventモジュール。 将来のリリースでは、YUI 3に多くのYSlowの機能を移植する予定です。

*ではないすべてのブラウザは現在サポートされています

YQL

YSlowのページ上にあるコンポーネントに対してHTTPヘッダをチェックしてページを分析。 HTTPレスポンスヘッダーには、それらのコンポーネントは、レスポンスヘッダー情報を取得YSlowのために再度要求する必要があるので、ページでは利用できません。 これはXmlHttpRequestが（AJAX）を介してコンポーネントのURLのリストを要求することによって達成が、残念ながら原因である可能性が同一生成元ポリシーの制約のすべてのコンポーネントは非常にまずないページと同じドメインにある場合を除き、これは不可能です。

同一生成元ポリシーによる制限のための一般的な回避策は、外部サーバがコンポーネントのURLのリストを要求し、YSlowのに代わって彼らのHTTPレスポンスヘッダーを取得するプロキシとして機能するJSONPを使用しています。 YSlowのの人気と最近のモバイルパフォーマンス分析の努力により、我々はモバイルブックマークレット用YSlowのために非常に大量のトラフィックを期待している。 そのようなトラフィックをサポートするために、 YQLはを通じてYSlowので採択されたスケーラブルなソリューションであり、オープンデータのテーブルという名前data.headers予想されるコンテンツがあることを確認するためにユーザーエージェントを偽装している間のURLの特定のリストについては、レスポンスヘッダーとコンテンツを取得、取得。

YQLクエリーコンポーネントには、YSlowのコントローラのコードがはるかに簡単、容易に維持すること、フードの下でJSONPのリクエストを管理しながらYQLクエリーを管理するためのすべての作業を行います。

将来の機能強化：モバイルフレンドリーなインターフェースのための新しいYSlowの

現在、モバイルユーザーエクスペリエンスのためのYSlowのは、デスクトップエクスペリエンスと同じです。 パフォーマンス分析データの長いリストを扱うのは小規模なスマートフォンの画面上で最善の方法ではありません。 YUIも抽象化するので、クロスデバイスのジェスチャーを 、モバイル用YSlowのは、将来のリリースでは、ブランドの新しいモバイルフレンドリーなインターフェイスを取得します。

パフォーマンスツールのパフォーマンス

モバイル展開のためのYSlowのは、慎重に分析されているページのロード時間に与えるパフォーマンスの影響を考慮して行われました。 YSlowのに使用されるYUIの3つのモジュールはできるだけ速くYSlowをロードするために必要なモジュールのみを含むように精査された。 YUIのシードファイルとローダーが含まれていない必要なすべてのモジュールおよびサブモジュールは、以下の互いに結合されて以来、 ライアングローブのパフォーマンス禅 YSlowは、bookmarklet.js：：シングル小シングルの要求に一緒にすべてをロードすることを可能にした、ヒント、204キロバイト、66キロバイトを（ GZIP）は次のとおりです。

  • YUI：75KB、27キロバイト（GZIP）
  • YSlowは：129KB、39KB（GZIP）

YSlowの詳細について

の最新YSlowの発表で最新にしてください：

マルセルデュラン 著者について：マルセルデュランは、Yahoo!の卓越したパフォーマンスチームのためのフロントエンドリードです。 彼はさらに速くページを作るのWebパフォーマンスのベストプラクティスを適用し、調査Yahoo!のフロントページと検索のチームで、トラフィックの多いサイトでのWebパフォーマンスの最適化になっている。 彼は現在、YSlowは、他のパフォーマンスツールの開発、研究と伝道に専念しています。 彼の目標は、Webがさらに高速化がわからなくなったりもすることですと、"わずか数ミリ秒が傷つけることになります"などというものが存在しないと考えています。

会話して下さい： Bloglinesの | テクノラティ

共有し、拡張する： del.icio.usでブックマーク | Diggそれ！ | のreddit！

4コメント»

このコメント欄のRSSフィード トラックバックURI

  1. それは間違いなく今のモバイルスタイルシートを使用することができます

    コメントby ファン - 2011年7月19日＃

  2. 良いニュースマルセル。 良い仕事をしてください！

    エドゥアルドラングレンコメントby - 2011年7月21日＃

  3. [...] YUIを搭載した、次世代YSlowの[...]

    でpingbackのWebサイトを高速化するためのベストプラクティス«チャンダ - 2011年7月25日＃

  4. 私は開発者ではないんだけど、WANやインターネットをオベアプリケーションのパフォーマンスに興味を持っています。 私が初めてそれを試み、それは私にとって素​​晴らしい仕事。 に力を入れてくれてありがとう...

    コメントby クリフチャップマン - 2011年7月27日＃

コメントを残す

注：コメントは、初心者のためにモデレートされています。 スパムは削除。

XHTML：<a href="" title=""> <abbr title=""> <acronym title="">ある[<b> <blockquote cite=""> <cite>の<code> <del datetime=""> <EM> <I> <q cite=""> <strike>ある[<strong>

Yahoo!が主催

著作権© 2006-2011米国Yahoo! Inc。版権所有。 プライバシーポリシー - サービス利用規約

を搭載ワードプレスでヤフー ウェブホスティング 。