const N_COLS = 20; // use it to modify the number of columns
const N_ROWS = 20; // use it to modify the number of rows
const data = {
name: "Sample",
columns: generateColumns(N_COLS),
rows: generateRows(N_ROWS),
}
function generateColumns(n){
let columns = [];
for(let i = 0; i < n; i ++){
columns.push({ index: i, name : "Column " + i})
}
return columns;
}
function generateRows(n){
let rows = [];
for(let i = 0; i < n; i ++){
rows.push({ index: i, fields: generateFields(N_COLS)});
}
return rows;
}
function generateFields(n){
let fields = [];
for(let i = 0; i < n; i ++){
fields.push({index: i, text: "Field " + i});
}
return fields;
}
$(document).ready(function(){
console.time('Compile');
var tmpl = $.templates("#mainTemplate");
console.timeEnd('Compile');
console.time('Render');
tmpl.link("#container", data);
console.timeEnd('Render');
});<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
</head>
<body>
<script id="mainTemplate" type="text/x-jsrender">
<h1>{{:name}}</h1>
{{include tmpl="#contentTemplate"/}}
</script>
<script id="contentTemplate" type="text/x-jsrender">
<table>
<thead>
{{for columns}}
{{include tmpl="#columnTemplate"/}}
{{/for}}
</thead>
<tbody>
{{for rows}}
{{include tmpl="#rowTemplate"/}}
{{/for}}
</tbody>
</table>
</script>
<!-- In this example, using those templates with an include tag doesn't make sense, but that's because it's a simplified version of what I'm working with -->
<!-- In my scenario having those templates separated is a must have :( -->
<script id="columnTemplate" type="text/x-jsrender">
<th>{{:name}}</th>
</script>
<script id="rowTemplate" type="text/x-jsrender">
<tr>
{{for fields}}
{{include tmpl="#fieldTemplate"/}}
{{/for}}
</tr>
</script>
<script id="fieldTemplate" type="text/x-jsrender">
<td>
{{:text}}
</td>
</script>
<div id="container"></div>
</body>
</html>我在 Edge 和 IE 中遇到 JsViews 的性能问题。我有一个非常大的模板，其中包含许多包含标签和如此多的数据链接。在Chrome和Firefox中，性能还可以，渲染时间不到1秒，这很适合我的需求，但是在Edge和IE中，它需要将近5秒:(
此模板可以在给定页面中根据需要多次使用，因此此处的性能问题是增量的。
我尝试使用JsRender而不是JsViews，在没有数据链接的情况下调整我的模板和对象，因为我注意到，在我的场景中，使用它们对性能的影响如此之大，在Chrome和Firefox中，我在渲染和IE和Edge中达到了500毫秒。 2秒，这仍然满足我的需求。
我已经尝试简化我正在使用的模板，但我已经达到了底线。
我有很多想法来尝试解决这个问题，这就是我的问题来源：
有没有(或者在新的 JsViews/JsRender 版本中(在 Web worker 中编译模板的方法？我知道在Web工作者中我们不能使用JQuery，访问DOM，也不能使用带有自定义原型的对象，但谁知道呢。 即使编译时间相同，至少我能够编译 模板在 paralel。
是否有一些神奇的技巧可以提高IE和Edge中的JsViews/JsRender性能？(扔掉IE和Edge会很好，但不幸的是，这不是一个选择:(xD(
PS：恐怕我不能发布任何类型的代码，因为我正在谈论我正在工作的企业的项目。
IE和Edge比Chrome慢得多 - 尽管多少取决于代码和场景的细节。例如，在某些HTML表格渲染场景中，IE比Chrome慢得多。您可能会发现避免使用表格布局，而是将CSS用于等效的网格布局，您将获得很大的性能改进 - 并且在IE和Edge中可能会更加明显。
如果你在不同的浏览器中查看这个 http://borismoore.github.io/jsrender/test/perf-compare.html，你会发现IE可能会慢得多，不仅对于JsRender，而且对于其他组件或模板引擎也是如此。
除了避免HTML表(如果可能的话(，您还可以考虑替换：
{{for columns}}
{{include tmpl="#columnTemplate"/}}
{{/for}}
由
{{for columns tmpl="#columnTemplate"/}}
如果这可能的话。
此外，一个小的改进可能来自：
{{... tmpl=~columnTemplate/}}
并提供编译的模板作为帮助程序，如
var tmpls = {
columnTemplate: $.templates("#columnTemplate"),
...
};
tmpl.link("#container", data, tmpls);
另外，如果您根本没有使用 JsViews 数据链接(我注意到您所有的标签都是{{...}}的，而不是{^{...}}(，那么您可以执行 tmpl.render(...(，然后在 DOM 中一次性插入 HTML...