More Related Content
Similar to jQuery Performance Tips – jQueryにおける高速化 - (20)
More from Hayato Mizuno (10)
jQuery Performance Tips – jQueryにおける高速化 -
- 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
- 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]-->
- 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
- 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)
- 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
- 39. HTML
DOM
視覚部分を
表すツリー レンダーツリー 描画
CSSOM
CSS
- 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]
リフロー!レイアウトの計算を行う処理のこと
- 47. HTML
DOM リペイント!
JS レンダーツリー 再描画
CSSOM
CSS
- 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
- 63. Example 1
$('<p>test</p>').appendTo('body').hide();
生成時に色々と追加が
必要なケース
- 64. Example 1
$('<p>test</p>').hide().appendTo('body');
描画する前に行う
- 67. Example 2
$('<img src="200x100.jpg">').
appendTo('body');
imgを生成するケース
- 68. Example 2
$('<img src="200x100.jpg" width="200"
height="150">').
appendTo('body');
描画の領域を明示しておく
CSSで指定しても×
- 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
});
可能ならキャッシュして使い回す
- 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> に移す