グリッド内の文字ごとに連絡先をグループ化するページがあります。私の連絡先の大規模なセット (1000-1500) では、グリッドの読み込みが耐えられないほど遅くなります (分)。しかし、ブラウザはほとんどロックされているため、クラッシュしたと思われます。
chrome プロファイラーによると、私は最近の最悪の敵である .InnerHTML() に 91% の時間を費やしています。
私が言えることから、連絡先のオブザーバブルを埋めるときに不要な通知を送信していません。
この jsFiddle でページを単純なフォームに絞り込もうとしました。
http://jsfiddle.net/DCLaR/105/ (これを修正した Ryan Rahlf の功績)
単純なバージョンは問題ないように見えるので、ミックスには何か他のものがあるに違いありません.
ちょっとごちゃごちゃしていますが、ページ全体の html を投稿します。
実際のページコードのフィドルで開始し、実行を終了しません。おそらく複雑すぎてそこに詰め込むことができません: http://jsfiddle.net/DCLaR/108/
誰かが何かを見つけたり、パフォーマンスの問題を引き起こすことが知られているかもしれません。
This questionを見ましたが、これは似ていますが、解決策が得られませんでした。
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>
Javascript