边缘和IE中的JsRender/JsViews性能问题
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>
我在边缘和IE中遇到了JsViews的性能问题。我有一个非常大的模板，其中包含了很多标签，还有很多数据链接。在Chrome和Firefox中，性能是可以的，渲染时间不到1秒，这对我的需要是很好的，但是在Edge和IE中，它几乎需要5秒:(
这个模板可以在给定的页面中使用我们想要的次数，因此性能问题在这里是增量的。
我尝试使用JsRender而不是JsViews，在没有数据链接的情况下调整我的模板和对象，因为我注意到，在我的场景中，使用它们对性能有很大的影响，在Chrome和火狐中，我在渲染和IE和Edge中实现了500 my。2秒，这仍然是我的需要。
我已经试过简化我正在使用的模板，但我已经达到了底线。
我有很多想法来解决这个问题，以下是我的问题来源：
- 是否有一种在web工作者中编译模板的方法(或者在新的JsViews/JsRender版本中)？我知道，在一个网络工作者中，我们不能使用JQuery，不能访问DOM，也不能使用带有自定义原型的对象，但是谁知道呢。即使编译时间相同，至少我也可以用paralel编译模板。
- 在IE和Edge中是否有一些改进JsViews/JsRender性能的魔术提示？(扔掉IE和Edge会很好，但不幸的是，这不是一个选项:( xD)
PS:恐怕我不能发布任何代码，因为我说的是我工作的企业的一个项目。
回答 1
Stack Overflow用户
发布于 2018-06-19 00:47:53
IE和Edge的速度比Chrome慢得多--尽管这在多大程度上将取决于代码和场景的细节。例如，在某些HTML表呈现场景中，IE比Chrome慢得多。您可能会发现，避免表布局，而是使用CSS作为等效的网格布局，您得到了一个很大的额外改进-它可能在IE和边缘更明显.
如果您在不同的浏览器中查看这个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 .
https://stackoverflow.com/questions/50878632
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号