JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – Knockout.js非常缓慢地预告大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用模板创建一个简单的标记.就像是:
<div class="list" data-bind="template: {name: 'myTemplate',data: someData}"></div>

<script id="myTemplate">
  <div class="item" data-bind="text: someText"></div>
</script>

它工作得非常好,但是如果我需要使用这个模板渲染很多div,它将变得非常慢.创建每个div后的Knockout将其添加到文档中.但是,如果我做这样的事情:

el = document.createElement("div");
applyBindings(mymodel,el);

(div.list).innerHTML = el.innerHTML

它工作得更快但不方便.

也许Knockout有一些内置的功能来创建一组元素,然后将该组添加到文档中?

解决方法

听起来KO正在使用您添加的每个DIV操作DOm. DOM遍历很昂贵,会降低页面的渲染速度.在KO Github: https://github.com/SteveSanderson/knockout/issues/248下有一个未解决的问题

在我看来,Knockout目前还没有完成处理大型foreach数据集的任务. Chrome上的性能不错(因为Chrome非常棒),但在Internet Explorer上却非常糟糕(在旧的IE上更糟糕):http://jsfiddle.net/StarcounterJack/FgSCw/

尝试手动方法而不是使用Knockout:首先在内存中创建DIV并将它们一次性插入DOm.这是你在document.createElement()的第二个例子中所做的.使用jQuery,你可以这样做:

var newDiv = $("<div>my new div</div>");
var newDiv2 = $("<div>my new div2</div>");
newDiv.append(newDiv2);
$('body').append(newDiv); //only this last step traverses the DOM

对于模板,我更喜欢使用Mustache.js,使用John Resig的< head>< script type =“text / templates”>加载模板. template inclusion trick并通过我自己的JavaScript手动处理渲染.您可以更好地控制元素的呈现方式,并在遇到类似现在的性能问题时尝试不同的方法.

大佬总结

以上是大佬教程为你收集整理的javascript – Knockout.js非常缓慢地预告全部内容,希望文章能够帮你解决javascript – Knockout.js非常缓慢地预告所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。