自顾自地对 simpleTemplate.js 进行优化

simpleTemplate.js 的功能已经实现得差不多了，看能不能给它做一点优化。

测试框架

随手写一个记录运行前后时间的。

<script id="t_1" type="x-tmpl-simpleTemplate">
{@list}<p>{*}</p>{-list}
</script>
<script>
var template = simpleTemplate( document.getElementById( 't_1' ).innerHTML );

var startTime,
    endTime,
    text,
    loop,
    loopLength,
    times,
    totalCount;

totalCount = 0;

for ( times = 0; times < 10; times++ ) {
    startTime = new Date().getTime();

    // test
for ( loop = 0, loopLength = 10/*100/1000*/; loop < loopLength; loop++ ) {
    text = template.fill({
        // data
    }).render();
}

    // end test

    endTime = new Date().getTime();
    totalCount += ( endTime - startTime );
} // end tests for

console.log( totalCount / 10/*100/1000*/ );
</script>

缓存数组长度

说的是将以下代码：

1	for ( var i = 0; i < arr.length; i++ )

改成：

1	for ( var i = 0, length = arr.length; i < length; i++ )

从查阅网上的资料来看，这样改是有效的。这里

我用上面自己写的代码来测试。用一个随便生成的 1000 个元素的随机数数组来填充，然后渲染 100 次。以此作为一次测试，进行十次，再取平均数。

从测试来看，效果都不怎么样，没有多大提升的感觉。

字符串拼接

老生常谈了。在写代码的时候我觉得使用数组的 push 最后 join 会比较快，但是网上说现代浏览器下用 += 更快，真是神奇了，通常感觉 += 都会比较慢的。

于是我去试了试，结果让人惊讶。在 chrome/IE78910 下都有性能提高，尤其是 chrome。

IE6789 的测试我是用 IE10 里面的开发人员工具切换模式来测试的，文档模式都是用 “标准”。

看图。1000 个数组数据，渲染 100 次，测试 10 次取平均。

IE 下的字符串

之前为了绕开 IE8 以下的 split 函数 bug，我已经将代码重写了一次，利用了 lastIndex 属性。没想到这个 lastIndex 属性在 IE 下还是跟其他浏览器不一样，测试了一下似乎是在处理换行上有点问题，简直神烦。

于是我就将模板中所有的回车换行统统搞掉算了。

1	return new Template( templateStr.replace( /[\r\n]/gm, '' ) );