テンプレートのパフォーマンスチューニングを行うには?
- 詳細
- カテゴリ: テンプレート
- 作成日:2014-12-24
機能と仕様
jQueryのセレクタ解釈処理は、テンプレート処理の中でもサーバー負荷の高い処理になります。
解決方法
jQueryオブジェクトの生成回数を削減します。また、負荷の高いセレクタの使用を避けます。
1. <gc-script>での変数利用
同一のjQueryオブジェクトが複数回参照されている場合、変数化します。
例:
【変数化を行う前のコード】
<gc-script>
var i;
for (i = 0; i < 10; i++) {
var $e = $(".mainContainer").eq(i);
:
}
</gc-script>
【変数化を行った後のコード】
<gc-script>
var i;
var $main = $(".mainContainer");
for (i = 0; i < 10; i++) {
var $e = $main.eq(i);
:
}
</gc-script>
2. セレクタでの@THISの利用
<gc-each>内で繰り返している要素自身をパーツから参照して使用する場合、パーツのセレクタとしてスコープ指定子@THISが利用できます。
例: 【変数化を行う前のコード】
<gc-each selector=".ranking span" dh="0" dt="0">
<gc-parts ...>
<gc-paramList>
<gc-param name="selector">.ranking span:eq(%GCIDX%)</gc-param>
</gc-paramList>
</gc-parts>
</gc-each>
【変数化を行った後のコード】
<gc-each selector=".ranking span" dh="0" dt="0">
<gc-parts ...>
<gc-paramList>
<gc-param name="selector">@THIS</gc-param>
</gc-paramList>
</gc-parts>
</gc-each>
3. :has疑似セレクタを使用しない
:has疑似セレクタはサーバー負荷の高い処理になりますので、:hasを使わないか、もしくは<gc-each>の外側で実行するなど、実行回数を制限します。