![IE6-8対応用スニペット
<!--[if lt IE 9]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0.js"></script>
<!--[endif]-->](https://image.slidesharecdn.com/slide-130219192402-phpapp01/75/jQuery-Performance-Tips-jQuery-11-2048.jpg)
![Example 3
$('#target').find('p[title="test"]')
querySelectorAll](https://image.slidesharecdn.com/slide-130219192402-phpapp01/75/jQuery-Performance-Tips-jQuery-34-2048.jpg)
![Example 3
$('#target').find('p').filter('[title="test"]')
getElementsByTagName
+
.filter()](https://image.slidesharecdn.com/slide-130219192402-phpapp01/75/jQuery-Performance-Tips-jQuery-35-2048.jpg)
![DOMツリー
html
head body
title h1 p
[text node] [text node] [text node]](https://image.slidesharecdn.com/slide-130219192402-phpapp01/75/jQuery-Performance-Tips-jQuery-43-2048.jpg)
![レンダーツリー ツリーに挿入されない要素
root
display:none
head body
title h1 p
[text line] [text line] [text line]](https://image.slidesharecdn.com/slide-130219192402-phpapp01/75/jQuery-Performance-Tips-jQuery-44-2048.jpg)
![レンダーツリー ツリーに挿入されない要素
root
display:block
head body
title h1 p
[text line] [text line] [text line]
リフロー！レイアウトの計算を行う処理のこと](https://image.slidesharecdn.com/slide-130219192402-phpapp01/75/jQuery-Performance-Tips-jQuery-45-2048.jpg)
Uploaded byHayato Mizuno
jQuery Performance Tips – jQueryにおける高速化 -
リッチなWebアプリケーションに対するニーズの増加に伴い、JavaScriptで十分なパフォーマンスを担保することが難しくなってきています。とりわけ、スマートフォンのような非力なデバイスでは一層シビアなチューニングが求められるでしょう。本セッションでは、もっともポピュラーなJavaScriptライブラリである「jQuery」を中心とした、いくつかのパフォーマンス解決のためのヒントについてご紹介させていただきます。 http://frontrend.github.com/events/04/#pocotan001
jQuery Performance Tips – jQueryにおける高速化 -
- 1. jQuery Performance Tips Frontrend Vol.4 powered by CyberAgent
- 2. @pocotan001 HayatoMizuno
- 3. マシンの仕事を 速くするには、少なくしろ - 速く動くコードの書き方 - photo by Andrew Morrell Photography
- 4.
- 5. 最適化されたコード？ $('#target p')... パフォーマンス△ 可読性◎
- 6. 利用率の推移 jQuery 54.9% None 50.8% 49.1% 46.7% 42.8% 39.2% 2012/01 2012/05 2012/09 2013/01 http://w3techs.com/technologies/history_overview/javascript_library/all
- 7. アジェンダ - ファイルサイズを減らす - セレクタのチューニング -リフローの影響を考える
- 8.
- 9. 34kb 33kb 33kb 32kb 30kb 30kb 27kb 20kb 1.3.2 1.4.4 1.5.2 1.6.4 1.7.2 1.8.3 1.9.0 2.0.0b1
- 10. 1kbにつき1msのパース時間 （モバイルデバイス） 34kb 33kb 33kb 32kb 30kb 30kb 27kb 20kb 1.3.2 1.4.4 1.5.2 1.6.4 1.7.2 1.8.3 1.9.0 2.0.0b1
- 11. IE6-8対応用スニペット <!--[if lt IE9]> <script src="jquery-1.9.0.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <!--[endif]-->
- 12.
- 13. 34kb 33kb 33kb 32kb 30kb 30kb 27kb 20kb 23kb 20kb 1.3.2 1.4.4 1.5.2 1.6.4 1.7.2 1.8.3 1.9.0 2.0.0b1
- 14. jquery / README.md- GitHub
- 15. モジュール - ajax - css -effects - offset - dimensions
- 16. モジュール $ grunt custom:-ajax,-css - ajax - css - effects - offset - dimensions
- 17. モジュール $ grunt custom:-ajax,-css Running "custom:-ajax,- css" (custom) task Creating custom build... - ajax Running "build:dist/ - css jquery.js:*:-ajax:- css" (build) task Excluding css - effects (src/css.js) Excluding ajax (src/ajax.js) - offset Excluding ajax/script (src/ajax/script.js) Excluding ajax/jsonp - dimensions (src/ajax/jsonp.js) Excluding ajax/xhr (src/ajax/xhr.js)
- 18. 削除済み/削除予定のAPI $.uuid, $.attrFn, $.deletedIds, $.curCSS(),$.sub(), $.offset.bodyOffset(), $.fn.andSelf(), $.fn.data('events'), Deferred.isResolved(), Deferred.isRejected() ...いっぱい。
- 19. 削除済み/予定のAPI <script src="jquery-1.9.0.js"></script> <script src="jquery-migrate.js"></script> $.uuid,$.attrFn, $.deletedIds, $.curCSS(), <script> $.sub(),($.browser.msie) ... if $.offset.bodyOffset(), </script> $.fn.andSelf(), $.fn.data('events'), Deferred.isResolved(), Migrateプラグインが便利！ Deferred.isRejected() ...いっぱい。
- 20. 削除済み/予定のAPI $.uuid, $.attrFn, $.deletedIds,$.curCSS(), $.sub(), $.offset.bodyOffset(), jQuery.browser is deprecated $.fn.andSelf(), $.fn.data('events'), Deferred.isResolved(), Deferred.isRejected() ...いっぱい。
- 21. jquery-migrate / warnings.md- GitHub
- 22.
- 23. 速いセレクタランキング 1. $('#id') 2. $('tag') 3.$('.class') 速い 4. $(':first-child') 5. $(':first')
- 24. 速いセレクタランキング 1. getElementById 2. getElementsByTagName 3.getElementsByClassName 速い 4. querySelectorAll 5. jQuery Extensions
- 25. Example 1 $('#target p') querySelectorAll
- 26. Example 1 $('#target').find('p') getElementById + .find() + getElementsByTagName
- 27. Example 1 + 43% (Chrome 24) http://jsperf.com/jquery-child-selectors-ptan/2
- 28. Example 2 $('#target').find('p:first') querySelectorAll + getElementsByTagName + jQuery Extension
- 29. Example 2 $('#target').find('p:first-child') querySelectorAll
- 30. Example 2 $('#target').find('p').first() getElementsByTagName + .first()
- 31. Example 2 $('#target').find('p').eq(0) getElementsByTagName + .eq(0)
- 32. Example 2 $.fn.first = function() { return this.eq( 0 ); }; $.fn.first の中身
- 33. Example 2 + 87% (Chrome 24) http://jsperf.com/jquery-first-selectors-ptan/2
- 34. Example 3 $('#target').find('p[title="test"]') querySelectorAll
- 35. Example 3 $('#target').find('p').filter('[title="test"]') getElementsByTagName + .filter()
- 36. Example 3 - 44% (Chrome 24) http://jsperf.com/jquery-attribute-selectors-ptan/2
- 37. キャッシュの活用も忘れずに var $target =$('#target'), $p = $target.find('p'); $target.on('click', function(e) { $p.toggle(); });
- 38.
- 39. HTML DOM 視覚部分を 表すツリー レンダーツリー 描画 CSSOM CSS
- 40. CSS Reflow -jQuery.com
- 43. DOMツリー html head body title h1 p [text node] [text node] [text node]
- 44. レンダーツリー ツリーに挿入されない要素 root display:none head body title h1 p [text line] [text line] [text line]
- 45. レンダーツリー ツリーに挿入されない要素 root display:block head body title h1 p [text line] [text line] [text line] リフロー！レイアウトの計算を行う処理のこと
- 46. HTML DOM レンダーツリー 描画 CSSOM CSS
- 47. HTML DOM リペイント！ JS レンダーツリー 再描画 CSSOM CSS
- 48. HTML $('p').css('margin', '5px') DOM JS レンダーツリー 再描画 CSSOM + リフロー CSS
- 49. HTML $('p').css('color', 'red') DOM JS レンダーツリー 再描画 CSSOM CSS
- 50.
- 51.
- 52. リフロー 4？ $('p').css('margin', '5px') .css('padding', '5px') .css('top', '5px') .css('left', '5px');
- 53.
- 54. 収束が難しいケース $('p').css('margin', '5px') .css('padding', '5px') .css('top', $target.height()) .css('left', '5px');
- 55.
- 56. 最近のChrome賢すぎ... photo by pedrosimoes7
- 57. 2 Safariでやります (スミマセン...)
- 58. リフロー？リペイントのみ？ - display - visibility -opacity - border - border-radius
- 59. リフロー？リペイントのみ？ - display - visibility リペイントのみ - opacity リペイントのみ - border - border-radius リペイントのみ
- 60. リペイントのみでもモノによっては高コスト - color: rgba() - opacity - background: linear-gradient() - border-radius - text-shadow - ... etc See also
- 61. リフローが発生する可能性のあるトリガー - CSSの変更/取得 css(),addClass(), show(), animate() ... - DOM要素の操作 html(), text(), append(), focus() ... - 特定のプロパティの取得 offset(), position() ... - ユーザー操作 ウィンドウサイズの変更, スクロール, テキストの入力 ... See also
- 62.
- 63. Example 1 $('<p>test</p>').appendTo('body').hide(); 生成時に色々と追加が 必要なケース
- 64. Example 1 $('<p>test</p>').hide().appendTo('body'); 描画する前に行う
- 65. Example 1 Before
- 66. Example 1 After
- 67. Example 2 $('<img src="200x100.jpg">'). appendTo('body'); imgを生成するケース
- 68. Example 2 $('<img src="200x100.jpg" width="200" height="150">'). appendTo('body'); 描画の領域を明示しておく CSSで指定しても×
- 69. Example 2 Before
- 70. Example 2 After
- 71. Example 3 $('p').css('top', $target.offset().top) .css('left', $target.offset().left); 複数回に分けて実行されるcss()
- 72. Example 3 $('p').css({ top: $target.offset().top, left: $target.offset().left }); 1回のcss()にまとめる
- 73. Example 3 $('p').css({ top: $target.offset().top, left: $target.offset().left }); リフローが必要な取得系メソッド
- 74. Example 3 var offset = $target.offset(); $('p').css({ top: offset.top, left: offset.left }); 可能ならキャッシュして使い回す
- 75. Example 3 Before
- 76. Example 3 After
- 77. Example 4 <script src="jquery.js"></script> <script src="jquery-ui.js"></script> <script> $(function(){ $('#target').accordion(...); }); </script> </body> UI表示後にスタイルを変更するケース
- 78. Example 4 表示 JS 変更 読み込み, パース, 実行... この間は待ち時間
- 79. Example 4 <script src="jquery.js"></script> <script src="jquery-ui.js"></script> <script> $(function(){ $('#target').accordion(...); }); </script> </head> <head> に移す
- 80. Example 4 JS 表示&更新
- 81. Example 4 その他の代替案 - スタイル付けはCSSでやる -async属性で非同期にする (IE10∼) - 既存の非同期ローダーに乗っかる (RequireJSとか)
- 82.
- 83. ボトルネックになりそうなところ - 描画コストの高いCSSプロパティ - アニメーション -ループ処理 - scroll, resize などの発火回数の多いイベント - ... etc
- 84.
- 87. jQuery Animations <CSS3 http://dev.opera.com/articles/view/css3-vs-jquery-animations/
- 88.
- 89.
- 90. その他 - スタイルの変更は出来るだけ末端要素で行う - アニメーションは固定配置にする -テーブルレイアウトをしない
- 91.
- 92. 小さな効率は忘れよう。 時間の97%について語ろう。 早まった最適化は諸悪の根源だ。 Tony Hoare? photo by glingl
- 93. Thank you photo by Furryscaly