녹아웃에서 Foreach 및 템플릿 바인딩 성능

foreach 및 템플릿 바인딩의 성능 문제를 조사했습니다. 우리의 단일 페이지 응용 프로그램에서는 foreach/templates를 중첩했습니다. 아래는 jsperf URL입니다.이 정보는 foreach가없는 일반 배열과 foreach가있는 일반 배열에 대한 정보를 제공합니다. "확장 된 루프 마크 업"이라는 제목의 테스트가 "중첩 된 foreach"바인딩보다 낫습니다. 중첩 및 확장에 대한 상응하는 "foreach via template"테스트는 템플릿을 통해 foreach가없는 것보다 훨씬 많은 시간이 소요된다는 사실을 관찰했습니다.녹아웃에서 Foreach 및 템플릿 바인딩 성능

jsperf의 URL : http://jsperf.com/knockout-nested-foreach-vs-expanded-markup/2

녹아웃 3.1.0

성능 문제를 성능에 도움을 주셔서 감사겠습니까뿐만 아니라 녹아웃 3.2 버전이 존재합니다.

중첩 된 foreach 및/또는 템플릿 바인딩을 사용하여로드 시간을 줄이는 방법을 알고 싶습니다.

출처

2014-11-04 Rups

은 귀하의 질문에 무엇입니까? –

@HansRoerdinkholder - 게시물에 질문을 추가했습니다. – Rups

큰 데이터 테이블을로드 할 때 종종 중첩 된 foreach/template 바인딩은 너무 느립니다. 이 경우 저수준 JavaScript를 사용하여 DOM을 렌더링하는 사용자 정의 바인딩을 만듭니다. 큰 HTML 문자열을 만들어 분리 된 노드에 추가 한 다음 DOM에 삽입합니다. 바인딩 자체를 더 빠르게 만드는 방법을 모르겠습니다. –

한스 (Hans)가 설명 한 내용과 마찬가지로 클라이언트 측에서 가장 많은 성과를 얻으려는 경우가 있습니다. 컬렉션과 직접 작업하는 사용자 정의 바인딩, HTML을 문자열로 작성한 후 element.innerHTML과 같은 것을 사용하여 삽입하는 맞춤 바인딩. 아래

간단한 example :

ko.bindingHandlers.innerHtml = { 
 
    init: function (element, valueAccessor) { 
 
    var lst = ko.unwrap(valueAccessor()); 
 

 
    if (lst) { 
 
     var html = ''; 
 

 
     for (var i = 0; i < lst.length; i++) { 
 
     html += '<li>' + lst[i] + '</li>'; 
 
     } 
 

 
     if (html) 
 
     element.innerHTML = html; 
 
    } 
 
    } 
 
}; 
 
    
 
var vm = function(){ 
 
    var self = this; 
 
    self.lst = ko.observableArray(); 
 

 
    for (var i = 0; i < 100; i++) { 
 
    var ary = []; 
 
    for (var j = 0; j < 1000; j++) 
 
    { 
 
     ary.push(j) 
 
    } 
 

 
    self.lst.push({ num: i, numAry: ary}); 
 
    } 
 

 
}; 
 

 
ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<ul data-bind="foreach: $data.lst"> 
 
    <li> 
 
    <span data-bind="text: num"></span> 
 
    <ul data-bind="innerHtml: numAry"></ul> 
 
    </li> 
 
</ul>

출처

2016-09-18 20:09:52 pimbrouwers

녹아웃에서 Foreach 및 템플릿 바인딩 성능

답변

관련 문제