Javascript字符串模板慢与knockoutjs模板

我试图弄明白为什么在我下面的jsperf中，javascript字符串模板比等效的knockout.js模板慢得多。测试的目标是测量单个页面应用程序中的完整页面和部分页面更改链接

最初我只是想测试underline.js模板的速度，但现在我只是将原始硬编码字符串写入dom。似乎当速度测试是简单的dom元素时，它们会很快，但一旦我进入“真实世界”的情况，淘汰测试就会更快。有什么好处

准备代码HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>


<div id="jquery"></div>

<div id="knockout">
<div data-bind="foreach:Zones">
        <div data-bind="
            style:{ position: 'absolute', top: ZoneY, left: ZoneX, width: Width, height: Height },
            foreach:Layouts
            ">
            <!-- ko if: ShowText -->
                <div style="position: absolute;" data-bind="
                    text:Value, 
                    style:{  
                        top: YPosition, 
                        left: XPosition,
                        color: FontColor,
                        'font-family': FontFamilyName,
                        'font-size': FontSize,
                        'font-weight': FontWeight
                    }
                "></div>
            <!-- /ko -->

            <!-- ko if: ShowHtml -->
                <div style="position: absolute;" data-bind="
                    html:Value, 
                    style:{  
                        top: YPosition, 
                        left: XPosition,
                        color: FontColor,
                        'font-family': FontFamilyName,
                        'font-size': FontSize,
                        'font-weight': FontWeight
                    }
                    "></div>
            <!-- /ko -->

            <!-- ko if: ShowImage -->

                <!-- ko if: IsSWF -->
                    <embed data-bind="attr:{src:ImageURL}, style:{ width: Width, height : Height }">
                <!-- /ko -->

                <!-- ko ifnot: IsSWF -->
                    <img data-bind="attr:{src:ImageURL}, style:{ width: Width, height : Height }" />
                <!-- /ko -->

            <!-- /ko -->
        </div>
    </div>
</div>

测试1-jquery

var tmp = [d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15];
$('#jquery')[0].innerHTML = tmp.join();

测试2-淘汰

masterViewModel.Events.push.apply(masterViewModel.Events, events);

对于匿名模板（用于

if

、

ifnot

、

with

和

foreach

），在实际渲染时存储和克隆元素。这适用于除IE<9之外的所有浏览器

---

因此，淘汰测试能够在现有节点上执行

cloneNode

，而不是像jQuery测试那样从字符串中解析它们。

我实际上从等式中去掉了下划线，只是添加了纯文本，或者是已经运行的模板的等价物。我想我也尝试过缓存jquery选择器，但更新了一个测试以显示：。没有真正的改变。你有没有试着通过追踪淘汰源来了解它在内部做什么？还没有，但这是一个很好的建议。谢谢你的推特回答。现在更有意义了。

var tmp = [d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15];
$('#jquery')[0].innerHTML = tmp.join();

masterViewModel.Events.push.apply(masterViewModel.Events, events);