high performance Ajax - PolyPeaceLight

High Performance Ajax Applications@ajaxian
備忘録
(途中までです・・・)

1)高性能のAjaxアプリケーション
2)Part 1 Developing for High Performance

3)高性能への計画と設計
・初日から性能のために計画しなさい
・デザイナとプロダクトマネージャと密接に働きなさい
・デザインの理論を理解しなさい
・デザインと性能のトレードオフを説明しなさい
・代替案を提案し，何ができるかを示しなさい
・挑戦的なデザインを実装するためにあなた自身を試しなさい
・もし必要ならデザインとインタラクションを単純化しなさい

4)高性能の技術：いくつかの基本的な規則
・少ないほうが良い
　−不要なことはするな
　−絶対に必要になるまでは何もするな
・規則を破りなさい
　−最後の手段として，妥協をし，最高のやりかたを破りなさい
・認識される性能を改善するための機能
　−ユーザはゆっくりと合理的に扱うことができる
　　・彼らが，ペンディングされている操作に対して適切な情報が与えられているならば
　　・ユーザインタフェイスが常に返答があるならば
　−最初にUIをアップデートし，それが機能するまでは，いつでも黙ってやりなさい
　　・ユーザインタフェイスの全てまたは部分に鍵をかける必要がある

5)性能測定
・ユーザの環境に似た状態を利用して性能のテストを行いなさい
・開発の間中あなたのコードを描きなさい
・自動的な性質／性能のテスト
・どのように機能が実現されてきたかの記録を残しなさい
・製品のプロファイルコードを残すことを意識しなさい

6)Part2

7)Yahoo!'s Exceptional Performance rules
1．HTTPリクエストを減らしなさい
2．コンテント伝送ネットワークを使いなさい
3．Expires Headerを追加しなさい
4．Gzip要素(JS含む！)
5．CSSをトップに持ってきなさい
6．スクリプトは最後にしなさい
7．CSS表現は避けなさい
8．JavascriptとCSSは外部にしなさい
9．DNS参照は減らしなさい
10．Javascriptは最小化しなさい
11．リダイレクトは避けなさい
12．重複表現を減らしなさい
13．ETagsを設定しなさい
14．Ajaxをキャッシュ可能にしなさい

http://developer.yahoo.com/performanceをみろ

8)Asset optimization
・CSSとJavascriptファイルを最小化しろ
　−YUI圧縮を利用しなさい「http://developer.yahoo.com/yui/compressor/」
　−いわゆる先進的な圧縮スキーマは避けなさい(packerとか)
・CSSとJavascriptファイルを結合しなさい
　−ビルド時に「http://www.julienlecomte.net/blog/2007/09/16/」
　−起動時に
・画像の最適化
　−PngCrush「http://pmt.sourceforge.net/pngcrush/」
　−PngOptimizer「http://psydk.org/PngOptimizer.php」
　−その他

9)Reduce unminified code size
・HTML，CSS，Javascriptコードのロードや解析はコスト大
・簡潔にし，短いコードを書きなさい
・Javascriptライブラリを利用しなさい
・大きなJavascriptファイルを小さなものに分割し，スクリプトの解析とコンパイルに膨大な時間がかからないようにしなさい
・コード(HTML，CSS，Javascript)は必要に応じてロードしろ
　−http://ajaxpatterns.org/On-Demand_Javascriptをみろ
　−YUIローダを使え
　−Dojoのパッケージシステム
　−JSANインポートシステム

10)Optimize initial rendering (1/4) Miscellaneous tips...
・サーバで最初にレンダリングされるものについて考えろ
　−追加されるページの分量に注意しろ
　−DOMが用意された後に，イベントハンドラは必要になる
・HTMLタグを解析速度に近づけろ
　−HTML解析のコストに加えて非明示的に近いタグは，？？？
　−http://msdn2.microsoft.com/en-us/library/ms533020.aspx
・apacheバッファのflushingが非常に早いことを知った上で
　−外部CSSファイルのダウンロードは最初にしなさい
　−しかしながらレンダリングのスピードに影響が出ないかもしれない．
　　ブラウザが表示前に入力をバッファリングしている
・本質的な資産だけをロードしろ／遅く，必要に応じて資産をロードしろ
　−YUIイメージローダを使え

11)Optimize initial rendering (2/4) Don't always wait for onload...
・ほとんどのDOM操作はオンロードイベントが起こる前に達成されている
・もしあなたのコードがページ内に挿入される場所に操作を行うならば，
　最初のコードは，タグで閉じられる前に適切な位置の
　＜script>ブロックの最初に書きなさい
・そうでないならば，YUIイベントのonDOMReadyメソッドに書きなさい

12)Optimize initial rendering (3/4) Post-load script loading
・よくデザインされたサイトとはJavascript無しでも十分機能的であるべき
・それゆえ，後でscriptをロードできる
・Style sheets，画像などのロードに有利です
・いずれかがあなたのサイトのロードを速くします
・タグの直前に下のようにして挿入するのが正しいです

 ＜script>
  window.onload = function(){
    var script = document.createElement("script");
    script.src = ...;
    document.body.appendChild(script);
  }

13)Optimize initial rendering (4/4) Conditional preloading
・資源(Javascript，CSS，画像など)のpreloadingは，
　ユーザ経験を潜在的によくします
・しかしながら，事前ロードが行われるときについてスマートでなければならない．
　そうでなければ，事前ロードはユーザ経験を落とすことになる．
・http://www.sitepoint.com/article/web-site-optimization-steps/3
・以下を試してください．http://search.yahoo.com/