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

自顾自地对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>

##缓存数组长度

说的是将以下代码：

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

改成：

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下还是跟其他浏览器不一样，测试了一下似乎是在处理换行上有点问题，简直神烦。

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

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