Javascript JsRender/JsViews边缘和IE中的性能问题

const N_COLS=20；//使用它可以修改列数
常数N_行=20；//使用它可以修改行数
常数数据={
名称：“样本”，
列：generateColumns（N_COLS），
行：GeneratorOWS（N_行），
}
函数生成列（n）{
让列=[]；
for（设i=0；i

{{:name}
{{include tmpl=“#contentTemplate”/}
{{对于列}}
{{include tmpl=“#columnTemplate”/}
{{/for}}
{{对于行}}
{{include tmpl=“#行模板”/}
{{/for}}
{{:name}
{{对于字段}}
{{include tmpl=“#fieldTemplate”/}
{{/for}}
{{:text}
IE和Edge比Chrome慢得多，尽管多少取决于代码和场景的细节。例如，IE在某些HTML表格呈现场景中比Chrome慢得多。您可能会发现，避免使用表格布局，而是使用CSS进行等效的网格布局，您的性能会有很大的提高，而且在IE和Edge中可能会更显著

如果您在不同的浏览器中查看这一点，您将看到IE可能会慢得多，不仅对于JsRender，对于其他组件或模板引擎也是如此

除了避免HTML表（如果可能的话），您可以考虑替换：
{{for columns}}
  {{include tmpl="#columnTemplate"/}}
{{/for}}

借

如果你能做到的话

此外，一个小的改进可能来自：

{{... tmpl=~columnTemplate/}}

并提供编译后的模板作为助手，如中所示

var tmpls = {
    columnTemplate: $.templates("#columnTemplate"),
    ...
};

tmpl.link("#container", data, tmpls);

另外，如果您根本没有使用JsViews数据链接（我注意到您所有的标记都是
{…}
，而不是
{^{…}}
），那么您可以执行tmpl.render（…），然后一次性将HTML插入DOM中
 你有没有做过任何关于速度缓慢发生在哪里的分析？模板编译应该只在初始页面加载时发生，所以若每次调用都触发新的模板编译或子模板编译，那个就是一个错误。任何模板只能编译一次。分析是否表明问题包括重新编译？否则，预编译将不会有多大帮助。…@Borismore模板肯定只编译一次。我注意到我在web工作者的问题中犯了一个错误，我想说“在web工作者上渲染”不编译^^的JsRender不需要jQuery（请参阅）。它也不需要DOM来渲染。（它呈现为HTML标记字符串）。但是JSView（和数据链接）确实需要jQuery和DOM。要了解性能问题，您可能需要显示编码样式的示例，或者创建一个示例/jsfiddle来说明性能问题，即使您没有显示项目中的特定代码。@borismore我在Web Worker中使用JsRender还有一个问题，我使用自定义原型，我想不出一个方法来发送我的对象到它。我知道这不是一个JsRender问题，所以随它去吧，我会找到一种解决方法：p。不过，我会尽快用JSFIDLE更新我的问题，让您了解我的场景，可能我的模板或对象可以重新定义以提高性能，谢谢您的时间：）@borismore我用一个简单的JSFIDLE更新了我的问题，试图展示我正在使用的内容。如果你在chrome上运行它，你会注意到编译和渲染平均需要50毫秒，但在edge上几乎需要200毫秒（至少在我的电脑上）。在我的真实场景中，这种差异更大，因为模板和对象更复杂。谢谢你的建议，我认为我唯一可以尝试的是，正如你所说的，摆脱表格，使用自定义CSS解决方案，因为在我的真实场景中，我已经提供了编译后的模板作为帮助，并使用一行for/include。我还避免使用数据链接，因为在Edge中，性能所涉及的内容非常痛苦（没有注意到我在JSFIDLE示例中使用的是tmpl.link，很抱歉^^”）。无论如何，谢谢你抽出时间：）
var tmpls = {
    columnTemplate: $.templates("#columnTemplate"),
    ...
};

tmpl.link("#container", data, tmpls);