リッチなWebアプリケーションに対するニーズの増加に伴い、JavaScriptで十分なパフォーマンスを担保することが難しくなってきています。とりわけ、スマートフォンのような非力なデバイスでは一層シビアなチューニングが求められるでしょう。本セッションでは、もっともポピュラーなJavaScriptライブラリである「jQuery」を中心とした、いくつかのパフォーマンス解決のためのヒントについてご紹介させていただきます。 http://frontrend.github.com/events/04/#pocotan001

1. jQuery Performance Tips
Frontrend Vol.4 powered by CyberAgent

2. @pocotan001
Hayato Mizuno

3. マシンの仕事を
速くするには、少なくしろ
- 速く動くコードの書き方 -
photo by Andrew Morrell Photography

4. 最適化されたコード？
$(document.getElementById('target').
getElementsByTagName('p'))...
パフォーマンス◎ 可読性△

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 IE 9]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0.js"></script>
<!--[endif]-->

12. http://gruntjs.com/

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. リフロー 2？
$('p').css('margin', '5px')
$('p').css('margin', '5px')

51. 1 位置変更がないため

52. リフロー 4？
$('p').css('margin', '5px')
.css('padding', '5px')
.css('top', '5px')
.css('left', '5px');

53. 1 可能な限り収束される

54. 収束が難しいケース
$('p').css('margin', '5px')
.css('padding', '5px')
.css('top', $target.height())
.css('left', '5px');

55. 2 ...あれ？

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. Google Chrome Canary

87. jQuery Animations < CSS3
http://dev.opera.com/articles/view/css3-vs-jquery-animations/

88. requestAnimationFrame
https://github.com/gnarf37/jquery-requestAnimationFrame

89. throttle / debounce
http://ktkne.st/elab/post/2012/strcount-throttle-debounce.html

90. その他
- スタイルの変更は出来るだけ末端要素で行う
- アニメーションは固定配置にする
- テーブルレイアウトをしない

91. 戒めのお言葉

92. 小さな効率は忘れよう。
時間の97%について語ろう。
早まった最適化は諸悪の根源だ。
Tony Hoare?
photo by glingl

93. Thank you
photo by Furryscaly