2
나는 연락처를 그리드의 문자로 그룹화 한 페이지가 있습니다. 내 큰 연락처 (1000-1500)에 대한 그리드로드가 참을 느리게 느린 (분). 하지만 브라우저가 거의 잠겨서 사람들이 추락했다고 생각합니다.중첩 템플릿 foreach 성능
크롬 프로파일 러에 따르면 저는 최근 최악의 적 .InnerHTML()에서 91 %의 시간을 보내고 있습니다.
연락 관찰 항목을 채울 때 불필요한 알림을 발송하지 않는다고 말할 수 있습니다.
이 jsFiddle에서 간단한 양식으로 페이지를 추출하려고했습니다.
http://jsfiddle.net/DCLaR/105/ (이 고정 라이언 Rahlf에 신용)
그것은 단순한 버전 확인 채워처럼 보이는, 그래서 믹스 다른 뭔가가 있어야합니다.
나는 혼란 스러울지라도 내 전체 페이지 HTML을 게시 할 예정입니다.
어쩌면 너무 복잡 거기에 때우는 수, 실행을 종료하지 않고, 실제 페이지 코드의 바이올린 시작일 : http://jsfiddle.net/DCLaR/108/는 어쩌면 누군가가 뭔가를 발견 할 수 있습니다 또는이 성능 문제를 일으키는 것으로 알려져있다.
비슷한 질문이지만 답변을 얻지 못했습니다. This
html로
<button id="btnSaveOrg" data-bind="click: $root.SaveAll">Save All</button><span data-bind="html: SaveStatus"></span>
<table class="orgTable">
<tr>
<td>
<ul id="orgList" data-bind="template: { name: 'orgChartTemplate', foreach: DepartmentHierarchy }" style="display:none"></ul>
<div id="orgChart2" class="orgChart"></div>
</td>
<td data-bind="with: SelectedDepartment">
<div class="departmentContainer">
<span class="departmentTitle" data-bind="text: DepartmentName" ></span>
<div class="buttonBar">
<a title="Edit Department" data-bind="click: $root.BeginEdit, visible: $root.InDisplayMode">
<img src="/Images/iconEdit.png" alt="Edit" />
</a>
<a title="Add Department" data-bind="click: $root.BeginAdd, visible: $root.InDisplayMode">
<img src="/Images/iconAdd.png" alt="Add" />
</a>
</div>
<div class="departmentInnerContainer">
<div id="departmentTabs" data-bind="kendoTabStrip: {}">
<ul>
<li class="k-state-active" data-bind="visible: IsRoot">All Company Contacts</li>
<li class="k-state-active" data-bind="visible: IsNotRoot">Department Contacts</li>
<li data-bind="visible: IsNotRoot">Associate Contacts</li>
</ul>
<div id="allContacts">
<div class="buttonBar">
Find: <input type="text" data-bind="value: $root.CurrentDepartmentContacts.SearchStringText" /><a data-bind=" click: $root.CurrentDepartmentContacts.Search"><img src="/Images/iconSearch.png" /></a>
</div>
<div data-bind="template: { name: 'ContactListTemplate', foreach: $root.CurrentDepartmentContacts }"></div>
</div>
<div id="currentContacts">
<div class="buttonBar">
Find: <input type="text" data-bind="value: $root.CurrentDepartmentContacts.SearchStringText" /><a data-bind=" click: $root.CurrentDepartmentContacts.Search"><img src="/Images/iconSearch.png" /></a>
</div>
<div data-bind="template: { name: 'ContactListTemplate', foreach: $root.CurrentDepartmentContacts }"></div>
</div>
<div id="assocContacts">
<div>
<input type="checkbox" data-bind="checked: $root.ShowAssociatedContacts" /> Show Contacts tied to departments<br />
<input data-bind="value: $root.ContactSearchText" /><a data-bind="click: $root.SearchAllContacts "><img src="/Images/iconSearch.png" /></a>
<br />
<button data-bind="click: $root.CheckAllContacts">Check All</button> <button data-bind="click: $root.UncheckAllContacts">Uncheck All</button>
</div>
<!-- ko if: $root.AllContactsSearchResult().length>0 -->
<div class="contactsContainerOrg" data-bind="foreach: $root.AllContactsSearchResult">
<div>
<input type="checkbox" data-bind="checked: IsChecked" /><span data-bind="html: ContactName"></span>
</div>
</div>
<!-- /ko -->
<!-- ko if: $root.AllContactsSearchResult().length==0 -->
<div class="contactsContainerOrg">
<div>
No Contacts Found
</div>
</div>
<!-- /ko -->
<button data-bind="click: $root.AssociateSelectedContacts, enable: $root.AssociatedContactsChecked">Associate Contacts</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<div id="divAddEditDepartment" style="display:none">
<span data-bind="template: { name: 'editDeptTemplate', foreach: EditingDepartment }"></span>
</div>
<script type="text/html" id="OldDept">
<div class="departmentContainer">
<button id="Button1" data-bind="click: $root.AddDepartment, visible: $root.InDisplayMode">Add Department</button>
<fieldset class="departmentFieldSet">
<legend>Selcted Department</legend>
<span data-bind="template: { name: 'viewDeptTemplate', foreach: SelectedDepartment }, visible: InDisplayMode"></span>
<span data-bind="template: { name: 'editDeptTemplate', foreach: SelectedDepartment }, visible: InEditMode"></span><br /><br />
<b>Contacts</b><br />
Search: <input type="text" data-bind="value: $root.ContactsVM.SearchString" /><br />
<div data-bind="template: { name: 'ContactListTemplate', foreach: $root.ContactsVM }"></div>
</fieldset>
</div>
</script>
<asp:HiddenField ID="hdnCustomerId" Value="7" runat="server"/>
<!-- Tempaltes -->
<script type="text/html" id="orgChartTemplate">
<li data-bind="attr: { DeptId: CustomerDepartmentId }">
<div class="innerNode" data-bind="css: { selectedNode: IsSelected }">
<img src="/Images/Contacts/CompanyOrg.png" /><span style="font-weight:bold;display:block" data-bind="html: DepartmentName"></span> <br /><br />
</div>
<ul data-bind="template: { name: 'orgChartTemplateChild', foreach: Children }"></ul>
</li>
</script>
<script type="text/html" id="orgChartTemplateChild">
<li data-bind="attr: { DeptId: CustomerDepartmentId }">
<div class="innerNode" data-bind="css: { selectedNode: IsSelected }">
<span style="font-weight:bold" data-bind="html: DepartmentName"></span> <br /><br />
<span data-bind="html: ContactCountDisplay"></span>
</div>
<ul data-bind="template: { name: 'orgChartTemplateChild', foreach: Children }"></ul>
</li>
</script>
<script type="text/html" id="viewDeptTemplate">
<div class="noWrap"> <label>Department Name:</label><div style="width: 12px; display: inline-block;" /><span data-bind="text: DepartmentName"></span></div> <br />
<span data-bind="visible: $root.IsNew">
<span class="noWrap"> <label>Parent Department:</label><span style="width: 5px; display: inline-block;"/><span data-bind="text: ParentDepartmentName"> </span></span>
</span>
<br /><br />
<button data-bind="click: $root.BeginEdit">Edit</button>
</script>
<%--Edit template markup--%>
<script type="text/html" id="editDeptTemplate" >
<div class="noWrap"> <label>Department Name:</label><div style="width: 12px; display: inline-block;" /><input type="text" data-bind="value: DepartmentName" required="required"> <span id="reqDepartmentError" style="color: red; display: none;">*</span></div><br />
<div class="noWrap"><label>Parent Department:</label><div style="width: 5px; display: inline-block;"/><select data-bind="options: $root.GetParentCustomerDepartmentOptions(), optionsText: 'DepartmentName', optionsValue: 'CustomerDepartmentId', value: ParentCustomerDepartmentId" ></select></div><br />
</script>
<script type="text/html" id="ContactListTemplate">
<div id="Div1" class="contactsContainerOrg" data-bind="foreach: ContactGroups">
<div class="contactGroupHeader" data-bind="text: GroupName, attr: { groupName: GroupName }"></div>
<div class="contactGroupContainer">
<div data-bind="template: { name: $root.GetContactTemplate, foreach: Contacts }">
</div>
</div>
</div>
<div data-bind="if: ShowGroupBy">
<span data-bind="foreach: AllLetterContactGroups">
<span class="groupList" data-bind="text: GroupName, click: $root.ScrollToGroup, style: { fontWeight: HasContacts() ? '900' : '300', fontSize: HasContacts() ? '12px' : '10px' }"></span>
</span>
</div>
</script>
<script type="text/html" id="ContactLine">
<div class="contactListItem" data-bind="text: ContactName, click: $root.CurrentDepartmentContacts.SelectContact, css: { contactListItemSelected: IsSelected() == true }"></div>
</script>
<script type="text/html" id="ContactDetails">
<div class="contactDetails">
<div>
<h2>
<span data-bind="text: ContactName" style="color: #054b73"></span>
</h2>
<label>Office Phone: </label>
<span data-bind="text: OfficePhone"></span>
<label>ext:</label>
<span data-bind="text: OfficePhoneExt"></span>
<br />
<label>Fax: </label>
<span data-bind="text: Fax"></span>
<br />
<label>Email: </label>
<span data-bind="text: Email"></span>
</div>
</div>
</script>
<script type="text/javascript">
var customerId = $("[id$=hdnCustomerId]").val();
var orgModel = new CustomerOrgVM(customerId, "orgList", "orgChart2", 'divAddEditDepartment');
function LoadCustomerOrgChart() {
orgModel.LoadDepartments();
ko.bindingHandlers.kendoTabStrip.animation = false;
ko.applyBindings(orgModel);
$w.Util.WaitAll(function() {
// Build the Hierarchy after all departments and contacts have been loaded
orgModel.BuildHierarchy();
orgModel.IsLoaded(true);
// Load Contacts Async after hierarchy is displayed
orgModel.LoadContacts();
});
}
</script>
자바 스크립트
따옴표가 좋으면 질문에서 바이올린을 업데이트 할 것입니다.나는 사용자 정의 바인딩 아이디어를 좋아하지만 약간의 질문을 공개하고 다른 누군가에게 다른 좋은 점이 있는지 확인합니다. –
흠, 그 예제에서 숫자를 가지고 놀고 나면 어딘가에 다른 문제가 숨어있는 것처럼 보입니다. 편지 당 100 개의 항목을 처리 할 수 있으며 여전히 1 초 안에로드됩니다. –
그 중 일부는 각 요소 템플릿에 대한 내부 바인딩의 복잡성에 달려 있습니다. 예를 들어, 1500 개의 요소에 커다란 ko.computed 또는 two를 수행하면 속도가 느려질 것입니다. 그리고 앞서 언급했듯이 긴 지연은 단지 렌더링이 아닐 수도 있습니다. 아마도 데이터를 검색하고 파싱하거나 매핑하는 것일 것입니다. –