改善jQuery模板的性能

更新

显然,jQuery模板可以被编译,它可以帮助模板的性能,if语句如图here所示.

但是如图here所示,预编译的jQuery模板对我的情况并不太多,因为我的模板不包含逻辑块.

对于那些建议使用另一个模板引擎的人来说,理想情况下,我只想使用jQuery模板,因为团队中的每个人都只知道jQuery.还有一个比较几个模板引擎的@L_696_5@测试用例.

嗨,

就在今天,我被告知使用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>

谢谢,

驰

var templateAlias = 'tmplRow';
// compile the template
$.template(templateAlias,$("#tmplRow"));

<script type="text/javascript">
    $.tmpl(templateAlias,data).appendTo('#table');
</script>