更新
显然,jQuery模板可以被编译,它可以帮助模板的性能,if语句如图here所示.
但是如图here所示,预编译的jQuery模板对我的情况并不太多,因为我的模板不包含逻辑块.
对于那些建议使用另一个模板引擎的人来说,理想情况下,我只想使用jQuery模板,因为团队中的每个人都只知道jQuery.还有一个比较几个模板引擎的this测试用例.
嗨,
就在今天,我被告知使用jQuery模板有性能问题.
要比较,我已经使用jQuery模板和好的旧字符串append方法来添加行到表.结果可以看出here.使用jQuery模板比字符串追加方法慢了大约65％,哦！
我想知道可以做些什么来提高jQuery模板脚本的性能.
可以在提供的链接中查看完整的脚本.但基本思路如下：
模板：
<script type="x-jquery-tmpl" id="tmplRow">
<tr>
<td><input type="checkBox" value="${id}" /></td>
<td>${firstName} ${lastName}</td>
<td class="edit">
<a>Edit</a>
<input style="display:none;" type="hidden" value="Blah" />
<input class="cancel" type="button" value="cancel" />
</td>
<td class="select">
<a>Select</a>
<select style="display:none;">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<input class="cancel" type="button" value="cancel" />
</td>
<td>More string</td>
<td>More string</td>
<td>More string</td>
<td>More string</td>
<td>More string</td>
<td>More string</td>
</tr>
</script>
数据：
<script type="text/javascript">
var data = [];
for (var i = 0; i < 100; i++) {
var row = {
id: i,firstName: 'john',lastName: 'doe'
};
data.push(row);
}
</script>
HTML：
<table id="table"></table>
执行：
<script type="text/javascript">
$('#tmplRow').tmpl(data).appendTo('#table');
</script>
谢谢,
驰
解决方法
志陈,
跟这个有点迟到了.我发现首先编译模板,然后通过字符串Id(在下面的例子中,命名变量templateAlias)来引用它们的速度比通过对象路线快10倍.以下是您如何实现(基于您的代码示例)：
var templateAlias = 'tmplRow';
// compile the template
$.template(templateAlias,$("#tmplRow"));
<script type="text/javascript">
$.tmpl(templateAlias,data).appendTo('#table');
</script>
这将显着加快程序,因为模板将被编译,并且每次运行.appendTo()函数时都不会使用整个对象模型.使用$(‘#tmplRow’).tmpl(data).appendTo(‘#table’);意味着$(‘#tmplRow’)查询DOM,而$.tmpl(templateAlias,data).appendTo(‘#table’);只能根据对模板的引用添加到DOM中.有相当多的关于这个问题的阅读.
这是一个可能有帮助的链接：
http://boedesign.com/misc/presentation-jquery-tmpl/#13
希望这有帮助,祝你好运
