我试图弄清楚为什么在下面的 jsperf 中，javascript 字符串模板比等效的 knockout.js 模板慢得多。测试的目标是测量单页应用程序中的完整页面和部分页面更改链接。
http://jsperf.com/knockoutvjquery/6
最初我打算只测试 underscore.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>
为所有测试定义设置
var d1 = '<div style="position: absolute; top: 0px; left: 0px; width: 1360px; height: 768px; "></div>'
var d2 = '<div style="position: absolute; top: 0px; left: 0px; width: 1360px; height: 280px; "><embed src="http://ronincastx.ronincast.com/CMS/Media/54638DC3-DC3C-4EAC-8698-334EB681B6B8_Widener-Expo-1.2-1360x280.swf" style="width: 1360px; height: 275px; "></div>'
var d3 = '<div style="position: absolute; top: 275px; left: 0px; width: 1360px; height: 493px; "><img src="http://ronincastx.ronincast.com/CMS/Media/94A94FC5-AB43-4218-B5CA-15C6F37D3152_WidenerU-Expo-1.2-BKGD.png" style="width: 1360px; height: 493px; "></div>'
var d4 = '<div style="position: absolute; top: 650px; left: 0px; width: 118px; height: 118px; "><embed src="http://ronincastx.ronincast.com/CMS/Media/0C484985-6038-47B8-8A1D-BF7FB33B6B56_Be Well-Footer-140x140.swf" style="width: 140px; height: 140px; "></div>'
var d5 = '<div style="position: absolute; top: 650px; left: 160px; width: 130px; height: 118px; "><img src="http://ronincastx.ronincast.com/CMS/Media/a91e8733-d27f-4f86-81e3-df4f93efad67_01Just4U-Icons-LowerFat.png" style="width: 130px; height: 118px; "> </div>'
var d6 = '<div style="position: absolute; top: 650px; left: 310px; width: 130px; height: 118px; "></div>'
var d7 = '<div style="position: absolute; top: 650px; left: 460px; width: 130px; height: 118px; "></div>'
var d8 = '<div style="position: absolute; top: 650px; left: 610px; width: 130px; height: 118px; "></div>'
var d9 = '<div style="position: absolute; top: 650px; left: 760px; width: 130px; height: 118px; "></div>'
var d10 = '<div style="position: absolute; top: 370px; left: 0px; width: 680px; height: 126px; "> <div style="position: absolute; top: 79px; left: 84px; color: rgb(0, 0, 0); font-size: 24px; font-weight: bold; " > Create your customized omelet with your choice of: ham, turkey, spinach, green peppers, onions, and mushrooms</div><div style="position: absolute; top: 0px; left: 84px; color: rgb(0, 0, 0); font-size: 50px; font-weight: bold; " >Customized Omelet</div></div>'
var d11 = '<div style="position: absolute; top: 501px; left: 0px; width: 680px; height: 126px; "> <img src="http://ronincastx.ronincast.com/CMS/Media/2509594F-404F-4818-BB26-30C91ADB57B9_transparent-image.png" style="width: 25px; height: 25px; "></div>'
var d12 = '<div style="position: absolute; top: 370px; left: 680px; width: 680px; height: 126px; "><img src="http://ronincastx.ronincast.com/CMS/Media/2509594F-404F-4818-BB26-30C91ADB57B9_transparent-image.png" style="width: 25px; height: 25px; "> </div>'
var d13 = '<div style="position: absolute; top: 501px; left: 680px; width: 680px; height: 126px; "><img src="http://ronincastx.ronincast.com/CMS/Media/2509594F-404F-4818-BB26-30C91ADB57B9_transparent-image.png" style="width: 25px; height: 25px; "></div>'
var d14 = '<div style="position: absolute; top: 290px; left: 0px; width: 680px; height: 77px; "><div style="position: absolute; top: 0px; left: 84px; color: rgb(0, 0, 0); font-size: 72px; font-weight: bold; "></div></div>'
var d15 = '<div style="position: absolute; top: 290px; left: 680px; width: 680px; height: 77px; "><div style="position: absolute; top: 0px; left: 84px; color: rgb(0, 0, 0); font-size: 72px; font-weight: bold; "></div></div>'
var displayViewModel = function () {
var self = this;
this.init = function () {
};
this.Events = ko.observableArray();
this.Zones = ko.computed({
read: function () {
if(self.Events().length == 0) {
return [];
}
return self.Events()[0].Presentations[0].Zones;
},
deferEvaluation: true
});
};
var events = [
{
"Id": 38312,
"Presentations": [
{
"Zones": [
{
"ZoneX": "0px",
"ZoneY": "0px",
"Layouts": [],
"Height": "768px",
"Width": "1360px"
},
{
"ZoneX": "0px",
"ZoneY": "0px",
"Layouts": [
{
"XPosition": "0px",
"YPosition": "0px",
"Width": "1360px",
"Height": "275px",
"Value": "54638dc3-dc3c-4eac-8698-334eb681b6b8",
"ValueType": 12,
"FontSize": "20px",
"FontFamilyName": "Verlag Black",
"FontWeight": "Normal",
"FontColor": "#000000",
"FileName": "54638DC3-DC3C-4EAC-8698-334EB681B6B8_Widener-Expo-1.2-1360x280.swf",
"ShowText": false,
"ShowImage": true,
"ShowHtml": false,
"IsSWF": true,
"ImageURL": "http://ronincastx.ronincast.com/CMS/Media/54638DC3-DC3C-4EAC-8698-334EB681B6B8_Widener-Expo-1.2-1360x280.swf"
}
],
"Height": "280px",
"Width": "1360px"
},
{
"ZoneX": "0px",
"ZoneY": "275px",
"Layouts": [
{
"XPosition": "0px",
"YPosition": "0px",
"Width": "1360px",
"Height": "493px",
"Value": "94a94fc5-ab43-4218-b5ca-15c6f37d3152",
"ValueType": 12,
"FontSize": "20px",
"FontFamilyName": "Verlag Black",
"FontWeight": "Normal",
"FontColor": "#000000",
"FileName": "94A94FC5-AB43-4218-B5CA-15C6F37D3152_WidenerU-Expo-1.2-BKGD.png",
"ShowText": false,
"ShowImage": true,
"ShowHtml": false,
"IsSWF": false,
"ImageURL": "http://ronincastx.ronincast.com/CMS/Media/94A94FC5-AB43-4218-B5CA-15C6F37D3152_WidenerU-Expo-1.2-BKGD.png"
}
],
"Height": "493px",
"Width": "1360px"
},
{
"ZoneX": "0px",
"ZoneY": "650px",
"Layouts": [
{
"XPosition": "0px",
"YPosition": "0px",
"Width": "140px",
"Height": "140px",
"Value": "0c484985-6038-47b8-8a1d-bf7fb33b6b56",
"ValueType": 12,
"FontSize": "20px",
"FontFamilyName": "Verlag Black",
"FontWeight": "Normal",
"FontColor": "#000000",
"FileName": "0C484985-6038-47B8-8A1D-BF7FB33B6B56_Be Well-Footer-140x140.swf",
"ShowText": false,
"ShowImage": true,
"ShowHtml": false,
"IsSWF": true,
"ImageURL": "http://ronincastx.ronincast.com/CMS/Media/0C484985-6038-47B8-8A1D-BF7FB33B6B56_Be Well-Footer-140x140.swf"
}
],
"Height": "118px",
"Width": "118px"
},
{
"ZoneX": "160px",
"ZoneY": "650px",
"Layouts": [
{
"XPosition": "0px",
"YPosition": "0px",
"Width": "130px",
"Height": "118px",
"Value": "a91e8733-d27f-4f86-81e3-df4f93efad67",
"ValueType": 12,
"FontSize": "20px",
"FontFamilyName": "Verlag Black",
"FontWeight": "Normal",
"FontColor": "#000000",
"FileName": "a91e8733-d27f-4f86-81e3-df4f93efad67_01Just4U-Icons-LowerFat.png",
"ShowText": false,
"ShowImage": true,
"ShowHtml": false,
"IsSWF": false,
"ImageURL": "http://ronincastx.ronincast.com/CMS/Media/a91e8733-d27f-4f86-81e3-df4f93efad67_01Just4U-Icons-LowerFat.png"
}
],
"Height": "118px",
"Width": "130px",
},
{
"ZoneX": "310px",
"ZoneY": "650px",
"Layouts": [],
"Height": "118px",
"Width": "130px",
},
{
"ZoneX": "460px",
"ZoneY": "650px",
"Layouts": [],
"Height": "118px",
"Width": "130px"
},
{
"ZoneX": "610px",
"ZoneY": "650px",
"Layouts": [],
"Height": "118px",
"Width": "130px"
},
{
"ZoneX": "760px",
"ZoneY": "650px",
"Layouts": [],
"Height": "118px",
"Width": "130px"
},
{
"ZoneX": "0px",
"ZoneY": "370px",
"Layouts": [
{
"XPosition": "84px",
"YPosition": "79px",
"Width": "595px",
"Height": "40px",
"Value": "Create your customized omelet with your choice of: ham, turkey, spinach, green peppers, onions, and mushrooms",
"ValueType": 3,
"FontSize": "24px",
"FontFamilyName": "",
"FontWeight": "bold",
"FontColor": "#000000",
"ShowText": true,
"ShowImage": false,
"ShowHtml": false,
"IsSWF": false,
"ImageURL": ""
},
{
"XPosition": "84px",
"YPosition": "0px",
"Width": "595px",
"Height": "52px",
"Value": "Customized Omelet",
"ValueType": 1,
"FontSize": "50px",
"FontFamilyName": "",
"FontWeight": "bold",
"FontColor": "#000000",
"ShowText": true,
"ShowImage": false,
"ShowHtml": false,
"IsSWF": false,
"ImageURL": ""
}
],
"Height": "126px",
"Width": "680px",
},
{
"ZoneX": "0px",
"ZoneY": "501px",
"Layouts": [
{
"XPosition": "53px",
"YPosition": "11px",
"Width": "25px",
"Height": "25px",
"Value": "2509594f-404f-4818-bb26-30c91adb57b9",
"ValueType": 12,
"FontSize": "20px",
"FontFamilyName": "Verlag Black",
"FontWeight": "Normal",
"FontColor": "#000000",
"FileName": "2509594F-404F-4818-BB26-30C91ADB57B9_transparent-image.png",
"ShowText": false,
"ShowImage": true,
"ShowHtml": false,
"IsSWF": false,
"ImageURL": "http://ronincastx.ronincast.com/CMS/Media/2509594F-404F-4818-BB26-30C91ADB57B9_transparent-image.png"
}
],
"Height": "126px",
"Width": "680px",
},
{
"ZoneX": "680px",
"ZoneY": "370px",
"Layouts": [
{
"XPosition": "53px",
"YPosition": "11px",
"Width": "25px",
"Height": "25px",
"Value": "2509594f-404f-4818-bb26-30c91adb57b9",
"ValueType": 12,
"FontSize": "20px",
"FontFamilyName": "Verlag Black",
"FontWeight": "Normal",
"FontColor": "#000000",
"FileName": "2509594F-404F-4818-BB26-30C91ADB57B9_transparent-image.png",
"ShowText": false,
"ShowImage": true,
"ShowHtml": false,
"IsSWF": false,
"ImageURL": "http://ronincastx.ronincast.com/CMS/Media/2509594F-404F-4818-BB26-30C91ADB57B9_transparent-image.png"
}
],
"Height": "126px",
"Width": "680px",
},
{
"ZoneX": "680px",
"ZoneY": "501px",
"Layouts": [
{
"XPosition": "53px",
"YPosition": "11px",
"Width": "25px",
"Height": "25px",
"Value": "2509594f-404f-4818-bb26-30c91adb57b9",
"ValueType": 12,
"FontSize": "20px",
"FontFamilyName": "Verlag Black",
"FontWeight": "Normal",
"FontColor": "#000000",
"FileName": "2509594F-404F-4818-BB26-30C91ADB57B9_transparent-image.png",
"ShowText": false,
"ShowImage": true,
"ShowHtml": false,
"IsSWF": false,
"ImageURL": "http://ronincastx.ronincast.com/CMS/Media/2509594F-404F-4818-BB26-30C91ADB57B9_transparent-image.png"
}
],
"Height": "126px",
"Width": "680px"
},
{
"ZoneX": "0px",
"ZoneY": "290px",
"Layouts": [
{
"XPosition": "84px",
"YPosition": "0px",
"Width": "596px",
"Height": "77px",
"Value": "",
"ValueType": 1,
"FontSize": "72px",
"FontFamilyName": "",
"FontWeight": "bold",
"FontColor": "#000000",
"ShowText": true,
"ShowImage": false,
"ShowHtml": false,
"IsSWF": false,
"ImageURL": ""
}
],
"Height": "77px",
"Width": "680px"
},
{
"ZoneX": "680px",
"ZoneY": "290px",
"Layouts": [
{
"XPosition": "84px",
"YPosition": "0px",
"Width": "596px",
"Height": "77px",
"Value": "",
"ValueType": 1,
"FontSize": "72px",
"FontFamilyName": "",
"FontWeight": "bold",
"FontColor": "#000000",
"ShowText": true,
"ShowImage": false,
"ShowHtml": false,
"IsSWF": false,
"ImageURL": ""
}
],
"Height": "77px",
"Width": "680px"
}
]
}
]
}
];
var masterViewModel = new displayViewModel();
var knockoutElement = $('#knockout')[0];
ko.applyBindings(masterViewModel, $('#knockout')[0]);
为所有测试定义拆解
$('#jquery').empty()
masterViewModel.Events([]);
ko.cleanNode(knockoutElement);
测试 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);