[英]Poor performance when displaying multiple elements
I work on a search page that allows filtering, searching and paginating through the list of results. 我在一个搜索页面上工作,该页面允许对结果列表进行过滤,搜索和分页。 Each time list of currently displayed items is changed, knockout takes a lot of time to render new values. 每次更改当前显示项目的列表时,敲除都会花费大量时间来呈现新值。 My knockout knowledge is limited but I can see in the DevTools that things are being handled very inefficiently: 我的淘汰赛知识有限,但是我可以在DevTools中看到事情的处理效率很低:
Do you have any suggestions for fixing these issues? 您是否有解决这些问题的建议?
I tried to extract the relevant code: 我试图提取相关代码:
$.get("/api/Search/GetSearchResults?page=" + bla)
.then(function (result) {
self.contentListViewModel.load(result.SearchHits);
//...
});
//----------------
var ContentListViewModel = function (options) {
self.searchHits = ko.observableArray([]);
//...
this.load = function (elements) {
for (var i = 0; i < elements.length; i++) {
elements[i] = new ContentElementViewModel(elements[i]);
//...
}
self.searchHits(elements);
}
}
//----------------
var ContentElementViewModel = function (dto, options) {
//just setting couple of observable variables and couple of methods
}
Relevant HTML: 相关HTML:
<ul data-bind="foreach: { data: searchHits, afterRender: afterRenderSearchHits }, as: 'hit', masonry: { enable: true, hits: searchHits }, css: { 'listify': !pinterestEnabled() }">
<li data-bind="template: { name: $data.template() }"></li>
</ul>
The answer is to avoid using 'template' binding. 答案是避免使用“模板”绑定。 It triggers multiple jQuery.parseHTML
calls that are expensive. 它会触发多个昂贵的jQuery.parseHTML
调用。
Slow code: 慢速代码:
<ul id='list1' data-bind="foreach: { data: people }">
<li data-bind="template: 'item'"></li>
</ul>
<script id='item'>
<h3 data-bind="text: name"></h3>
</script>
Fast code: 快速代码:
<ul id='list2' data-bind="foreach: { data: people }">
<li>
<h3 data-bind="text: name"></h3>
</li>
</ul>
This response does not answer how to keep DOM manipulation to minimum, I'll ask another, more specific question for that. 该响应没有回答如何将DOM操作保持在最低限度,为此,我将提出另一个更具体的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.