∧_∧ 　　 　　　_（ ´・ω・）_ 　　/＼`'⊃(;;ﾟ;;) ＼ ＿＿＿　　 ／ ※ ＼_＿＿＿_|＼＿＿ヽ ＼※ ※　　　　　　|　 |_三三|_＜ はじまるよ！ 　 ＼　/　※ ※ ※!､_ |||＿＿|､ 　　　`─────||ヽ───i§ 　　　　　　　　　　　ヽi 　　　　 |`〜〜 JavaScript でも 3D くらい できるさ！ amachang 先生の 次回作にご期待ください 　　　∧∧ 　　（　 ･ω･） 　 ＿|　⊃／(＿＿_ ／　└-(＿＿＿_／ ￣￣￣￣￣￣￣ - 完 - ごめんなさい ごめんなさい＞＜ DOM パフォーマンス チューニング JavaScript の 誤解 JavaScript は 遅い JavaScript は そこそこ速い 論より証拠。 ベンチマーク マージソート 100 numbers × 3000 times JavaScript ActionScript code: http://svn.coderepos.org/share/docs/amachang/ Ruby, PHP, Python, Perl code: http://izumi.plan99.net/blog/index.php/ 2008/01/17/ruby-vs-php-performance/ PHP 5.2.6 (cli) (built: Jul 15 2008 12:18:21) [9.595s] Ruby 1.8.6 (2007-09-24 patchlevel 111) [5.239s] Perl v5.8.8 built for darwin-2level [5.000s] JavaScript (V8 version 0.2.5) [4.931s] Python 2.5.2 (r252:60911, Sep 3 2008, 10:08:55) [3.975s] ActionScript 3.0 (Flex SDK 3.2 & Flash Player 10.0.12.36) [1.329s] ASはえーw JavaScript も 悪くないでしょ? JavaScript は そこそこ速い では、何故 遅くなって しまうのか よく言われるのが 「DOM が遅い」 よく言われるのが 「ドットを減らせばいい」 でも、 それだけじゃない 1. 再描画のための計算が行われる タイミングを知ろう 2. HTML の属性変更の 影響範囲を考えよう 3. スタイル変更の 影響範囲を考えよう 1. 再描画のための 計算が行われる タイミングを知ろう 基本的には、 一つのイベントが 終わったあと elm.onclick = function() { elm.style.fontSize = '10px'; elm.style.width = '2em'; // JavaScript 実行後 // ここで計算が走る } 教訓 1 JavaScript 実行後の 再描画の計算は ベンチマークには出ない elm.onclick = function() { elm.style.fontSize = '10px'; var w = elm.offsetWidth; // ここで計算が走る elm.style.width = '2em'; // さらに、ここで計算が走る } elm.onclick = function() { elm.style.fontSize = '10px'; elm.style.width = '2em'; var w = elm.offsetWidth; // ここで計算が走る // 実行後は、計算が走らない } 教訓 2 値の取得、変更は それぞれ まとめて行う 2. HTML 属性変更 の影響範囲を 考えよう elm.onclick = function() { elm.className = 'hoge'; // 計算が走る要素は // いくつあるか？ } <div> <div>...</div> <div>...</div> <div class="hoge"> - この影響範囲は？ <div>...</div> <div>...</div> </div> <div>...</div> <div>...</div> </div> <div> <div>...</div> <div>...</div> <div class="hoge"> * <div>...</div> * ┬ 子孫セレクタの影響範囲 <div>...</div> * ┘ </div> <div>...</div> * ┬ 兄弟セレクタの影響範囲 <div>...</div> * ┘ </div> <div> <div>...</div> <div>...</div> <div> ─ ここに要素を追加 <div class="hoge"> * <div>...</div> * <div>...</div> * </div> </div> ─ ここで閉じる <div>...</div> <div>...</div> </div> 教訓 3 HTML の属性を 変更する要素は きちんと隔離しよう 3. スタイル変更の 影響範囲を 考えよう width プロパティ - 子要素の width - 子要素の margin - 子要素の padding - 子要素の border height プロパティ - 親要素の height - 子要素の height font-size プロパティ - 自要素の em 指定の値 - 子要素の font-size の値 などなど 様々な 変更が 連鎖する 教訓 4 すべての 包含ボックスと inherit 値と 相対値 (%, em, auto) を 意識する CSS の勉強 超重要☺ まとめ Flash は 軽くて いいですね＞＜ でも JavaScript も 頑張れば Flash 並みに 出来るよ！ 最後に I ♥ Web Standard!