ヤフーユーザーインターフェイスブログ（YUIBlog）

スクリーンキャスト：TextMateのためのロスHarmesのYUIバンドル

エリックMiragliaによって17:27に2006年11月30日|での開発 、 YUIシアター | 14コメント

スクリーンキャスト読み続け：TextMateのためのロスHarmesのYUIバンドルを...

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

パフォーマンス研究、第1部：どのような80/20ルールによるHTTPリクエストの削減を教えてくれる

Tenni Theurerによって12:56に2006年11月28日|での開発 、 パフォーマンス | 128コメント

これにより、ユーザーはより高速なウェブサイトを好むことは周知の事実です。 私は、世界中のヤフー製品の性能を定量化と改善に焦点を当てた専門チームで働いています。 我々の仕事の一環として、我々は、Webページのパフォーマンスに関連する実験を行った。 我々は、他のフロントエンドエンジニアは、Web上のユーザーエクスペリエンスを加速する上で私達を結合するように我々の調査結果を共有しています。

20分の80パフォーマンスルール

ビルフレド·パレート、1900年代初頭の経済学者は、国家の富の80％が人口の20％に属していた有名な観測を行った。 これは一般に、任意の現象について述べてパレート原理（これも80から20ルールとも呼ばれる）と呼ばれるものに一般化された後、結果の80％は原因の20％から来ています。 我々は時間の80％はコードの20％だけに費やされているソフトウェア·エンジニアリングではこの現象を参照してください。 我々はアプリケーションを最適化するとき、私たちはコードのその20パーセントに焦点を当てることを知っています。 Webページを最適化する際にこれと同じ手法も適用されるべきである。 最もパフォーマンスの最適化今日は、HTML文書（のApache、C + +、データベースなど）を生成する部分で行われたが、これらの部品は、ユーザーの応答時間の約20％に貢献しています。 それは他の80％に貢献する部品を最適化することに焦点を当てる方が良いでしょう。

パケットスニファを使用して、我々は、他の80％で何が起こるかを発見する。 図1は、時間はキャッシュを空にしてhttp://www.yahoo.comロードに費やされている場所のグラフィカルなビューです。 各バーは、特定のコンポーネントを表しており、ブラウザによって開始された順序で表示されています。 最初のバーは単にHTML文書を取得するためにブラウザのために費やした時間です。 時間のわずか10％がHTMLページを要求するブラウザのためにここに費やされている注意してください、とapacheのHTMLを一緒にステッチすると、ブラウザに応答を返します。 当時の他の90％が画像やスクリプト、スタイルシートを含むページ内の他のコンポーネントをフェッチに費やされます。

表1は、HTML文書をダウンロードする時間の5％と38％の間で過ごす人気のあるWebサイトを表示しています。 当時の他の62パーセント〜95％は、HTTP要求は、そのHTML文書（すなわち、イメージ、スクリプト、およびスタイルシート）内のすべてのコンポーネントを取得するために作成に費やされます。 ページ内の多くのコンポーネントを持っていることの影響は、ブラウザがHTTPレスポンスのバージョンとユーザーのブラウザに応じて、ホスト名ごとに並列にのみ2つまたは4つのコンポーネントをダウンロードしているという事実によって悪化している。 我々の経験では、HTTP要求の数を減らすことで応答時間を短縮する上で最も大きな影響を持っており、頻繁に確認する最も簡単なパフォーマンスの向上であることを示しています。

すべてがとにかくブラウザのキャッシュに保存されませんか？

結論は同じです：HTTPリクエストの数を減らすことが応答時間を短縮する上で最も大きな影響を持っており、頻繁に確認する最も簡単なパフォーマンスの改善です。 次の記事では、キャッシュの影響、およびいくつかの驚くべき現実的な所見を見てみましょう。

免責事項：視覚豊かさを口述デザインの要請は、この要求の削減目標を比較考量する必要があります。 、JSファイルを集約するCSSスプライトなどを使用して - - あなたは視覚的な豊かさが必要な場合は、追加の手順が取られることができますが、視覚的な豊かさは、細身のHTTPリクエスト·パイプラインへのカウンタを実行する傾向があります。

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

ビデオ：ダグラスクロックフォード、 "JavaScriptを"高度な

中| 10：59で2006年11月27日には、Eric Miragliaによって午前の開発 、 YUIシアター | 34コメント

先月、私は、次のいずれかから採取したいくつかのビデオポストDouglas Crockfordのフロントエンドエンジニアリングに関するプレゼンテーションを（ ダグラス·クロックフォード、 "不都合なAPI：ドムの理論"ビデオ ）。 DOMへのダグラスの深いダイビングを楽しんだ人々は今、Yahoo!動画上で公開されて彼の "高度なJavaScript"のプレゼンテーションにも興味がある可能性があります。 このプレゼンテーション資料に - 彼はヤフーで教えてきました3回シリーズの第三 - ダグラスは、JavaScriptのプログラマはオーサリング、アプリケーションをに選ぶことができ、そこからコードパターンをよく見えます。 彼は（彼が主張する）は、JavaScriptの "穀物を"より実行することを寄生パターンのような多くのユニークなパターンを持つPseudoclassicalパターンのようなおなじみの構文を比較します。 Brendan Eichがこの夏にYahooで話したとき彼は "ラムダのプログラミングとJavaScriptのヨーダ"としてダグラスを記述し、見た後に "高度なJavaScriptを、"あなたはその感情がどこから来るのかの明確な意味を持つことができます。

それはダグラスのアイデアと視点が彼自身であることとビデオグラフィック職人の多くの欠陥が地雷であることを取り上げよう。

• YouTubeで見る
• 第1部：31分
• パート2：25分
• パート3：11分
• ダウンロードスライド（zip形式のPowerPointファイル）

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

傾斜ブラウザのサポート：Q4更新

中| 1時42分に2006年11月15日はネイトKoechleyによって午前の開発 | 17コメント

我々は更新は約3ヶ月毎のブラウザではグレードのサポートを受けている詳細をチャートによると傾斜ブラウザのサポートを 。 昨日のと一緒にYUIのアップデートリリースで 、ここで2006年第4四半期のための私達のブラウザのサポート更新です。

要約すると：グレードのサポートはFirefox 2.0に始まり、IE7のために繰り返しています。 グレードのサポートはIE 5.5とFirefox 1.0が廃止されました。 めったに使われないのGecko誘導体（例えば、NetscapeとMozillaアプリケーションスイート）は、Xグレードの代わりに、グレードのサポートを受ける。 Opera 9は、追加のプラットフォーム上のグレードの支援を受けています。

箇条書きの形で、ここでは、この更新プログラムのすべての変更点は次のとおりです。

1. グレードのサポート、IE 7、ウィン（XP）の繰り返し
2. グレードのサポートの終了、IE5.5、ウィン
3. グレードのサポートは、Firefox 2.xで、Win / Mac版の開始。
4. グレードのサポートは、Firefox 1.0.xでは、Win / Mac版の終了。
5. グレードのサポートは、Opera 9.xの、Win / Mac版の拡大
6. グレードをサポートし、Mozillaアプリスイート、Win / Mac版の終了
7. グレードのサポートは、Netscape、Win / Mac版の終了

あなたは常に参照する必要がありますけどヤフーデベロッパーネットワークでホストされている公式GBSチャートを 、私は後世のために、この四半期のグラフのスナップショットが含まれていました：

	勝つ98	ウィン2000	Win XPの	10.3.xのMacの	マック10.4
IE 7.0			グレード
IE 6.0	グレード	グレード	グレード
Firefox 2.0の*。	グレード	グレード	グレード	グレード	グレード
Firefox 1.5です。*	グレード	グレード	グレード	グレード	グレード
Opera 9の*。	グレード	グレード	グレード	グレード	グレード
サファリ2.0 *					グレード

次の四半期（2007Q1）に今後は、サポートされているブラウザのインクリメンタルリリースに反映されますが、大きな変化が予想されていません。

おかげで、
ネイト

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

YUIバージョン0.12.0：TabViewコントロール、改善されたAPIドキュメント、その他

エリックMiragliaによって18:35に2006年11月13日|で開発 | 23コメント

今日はYUIライブラリのバージョン0.12をリリースしました。 ここでのハイライトは以下のとおりです。

• TabViewコントロール ：YUIによって書かれたアニメーションとドムの著者マット·スウィーニー 、この動的なタブ·ソリューションは、最新のYUIの追加であり、プログレッシブ·エンハンスメントのために、高光沢の豊かさの両方の堅牢なサポートを提供しています。 のマットの名簿チェックアウトTabViewの例新しいコントロールに何ができるかのアイデアを、それらが実装しているか確認する例にソースを表示します。
• 改良されたドキュメント：YUI開発者アダム·ムーアは、（ イベント 、 ドラッグ＆ドロップ 、 スライダー 、 ツリービュー ）を生成するための新しいツールが作成されたAPIドキュメントを私たちは一体で統一され、架橋されたAPIドキュメントを生成することができ、 オートコンプリートパワード検索コントロール 。 新しいAPIドキュメントは、クラス構造の鮮明な画像を開発者に提供するプロパティと設定オプションについては、独立した分類を提供しています。 あなたに戻っないかもしれませんチートシートを再び...
• ...しかし、ケースにはまだチートシートと同様に：チートシートがバージョン0.12に更新とTabViewおよびネイトKoechleyのCSSのために新しいシートが含まれているリセット 、 フォントやグリッド基盤を。 次のことができますすべてのYUIチートシートをダウンロード YUIライブラリのWebサイトから。
• CSSグリッドといえば：Nateはしてい750px、950pxのために焼かれたインのサポート、およびフルビュー（ "液体"）のレイアウトとグリッドパッケージをrev'd。 グリッド0.12トリプルgzipping前3キロバイト下でサポートされているレイアウトは、まだ重みの数。 我々は構築したYUIのウェブサイトを今すぐリセット/フォント/グリッド基盤の上に、我々は、新しいフルビューポートのサポートの使用を活用しています。
• ライブラリ全体の改善：から、図書館で発見される拡張機能があり、イベントの新しいonContentReady大幅に改善へのメソッドCalendarコントロールは、以前のバージョンからアップグレードする場合は、複数月のカレンダーが表示されます（作成するための簡素化されたインタフェースとはカレンダー、 ステップ·バイ·ステップのアップグレードガイドをチェックアウト ）。 変更点の完全なリストについては、ディストリビューションに付属のリリースノートのドキュメントを参照してください。

我々は一週間後にこれらのトピックのいくつかの詳細については、フォローアップがあります。 今のところ、にあなたの方法を確認してください。 SourceForgeの最新YUIディストリビューションをダウンロードするには、ライブラリ全体の変更の完全なマニフェストの配布でリリースノートを参照してください。 いつものように、 ヤフーDeveloper NetworkのYUIのサイトでは、すべての最新のドキュメントを持っています。

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

JavaScriptを、我々はほとんどnewヤ

中| 9時21分に2006年11月13日には、ダグラスクロックフォードで私の開発 | 54コメント

JavaScriptは原型言語ですが、それは持ってnew 、それが古典的な言語のようにソートが見えるようにしようとした演算子を。 それは、いくつかの問題のプログラミングパターンにつながる、プログラマを混乱させる傾向があります。

あなたが使用する必要はありませんnew Object() JavaScriptで。 オブジェクトリテラルを使用して、 {}の代わりに。 同様に、使用しないでnew Array() 、配列リテラルを使用する[]の代わりに。 Javaの配列のようなJavaScriptの作業は何の配列、およびJavaのような構文を使用すると、あなたを混乱させるでしょう。

使用しないでnew Number 、 new String 、またはnew Boolean 。 これらのフォームは、不要なオブジェクトラッパーを生成します。 だけではなく、単純なリテラルを使用しています。

使用しないでnew Function関数の値を作成することができます。 代わりに関数式を使用しています。 たとえば、

 フレーム[0] =新しい関数をonfocusイベント（ "document.bgColor = 'antiquewhite'"） 

より良いとして書かれてい

 フレーム[0] onfocusイベント=関数（）{document.bgColor = 'antiquewhite';}; 

二番目の形式は、コンパイラが関数の本体より早く確認することができ、その中に何らかのエラーがすぐに検出されるように。 時々 new Functionどのように内側の関数の動作を理解していない人々によって使用されています。

  selObj.onchange =新しいFunction（ "dynamicOptionListObjects [" +
         dol.index + "]に変更（この）。"）; 

我々は文字列に関数本体を保持する場合、コンパイラはそれらを見ることはできません。 我々は文字列式として関数本体を保持する場合、我々は、それらを見ることはできません。 それは無知でプログラムしないことをお勧めします。 関数を返す関数を作ることによって、我々は、明示的に我々は、バインドする値を渡すことができます。 これは、私たちは、一連の初期化することができますselObjループで。

  selObj.onchange =関数（I）{
     return関数（）{
         dynamicOptionListObjects [i]の変化（この）;

     };
 }（dol.index）; 

それは配置することをお勧めことはありませんnewの正面にfunction 。 たとえば、 new function新しいオブジェクトを構築する上では利点を提供していません。

 このmyobj =新しい関数（）{
     this.type = 'コア';
 }; 

これは、オブジェクトリテラルを使用することをお勧めします。 それは小さく、速くなります。

 このmyobj = {
    タイプ： "コア"
 }; 

我々はプライベート変数や関数にバインドされているメソッドを含むオブジェクトを作っているなら、それはオフのままにするほうが良いでしょうnew接頭辞を。

  VARはfoo =新しい関数（）{
    関数processMessages（メッセージ）{
        アラート（ "メッセージ：" + message.content）;
     }
     this.init =関数（）{
         （ "/ mytopic"は、この、processMessages）購読する。
     }
 } 

使用してnew関数を呼び出すために、オブジェクトが価値に保持しているprototypeオブジェクト。 それはない相殺利点を持つメモリを浪費します。 我々は使用しない場合はnew 、私たちは無駄に保管しないでprototypeチェーン内のオブジェクトを。 だから代わりに私たちは使用して、ファクトリ関数を正しい方法で呼び出します()

  VARはfoo =関数（）{
    関数processMessages（メッセージ）{
        アラート（ "メッセージ：" + message.content）;
     }
    戻り値{
         INIT：関数（）{
             （ "/ mytopic"は、この、processMessages）購読する。
         }
     };
 }（）;

したがって、ルールは単純です：我々が使用すべき唯一の時間new演算子がpseudoclassicalコンストラクタ関数を呼び出すことです。 コンストラクタ関数を呼び出すときの使用new必須です。

までの時間があるnew 、しないまでの時間は。

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！