authorgravatar for pierre@jow.frPierre Guilleminot <pierre@jow.fr> 2020-04-12 23:13:57+02:00
committergravatar for pierre@jow.frPierre Guilleminot <pierre@jow.fr> 2020-04-12 23:13:57+02:00
logf76d59ef761746a3ea73aa9296dec146672d1dc2
tree93bfc7cba6d6323233e0dc5816a9c768b261a7c6
parent8e9e126d41cbca619a2a4658fb38d10120388e8f

improve search perf: batching dom list mutations

1 files changed, 65 insertions(+), 53 deletions(-)

lib/std/special/docs/main.js+65-53
......@@ -256,13 +256,15 @@
256256 if (fnObj.combined === undefined) fnObj.combined = allCompTimeFnCallsResult(calls);
257257 if (fnObj.combined != null) renderContainer(fnObj.combined);
258258
259 resizeDomList(domListFnExamples, calls.length, '<li></li>');
259 var domListFnExamplesFragment = createDomListFragment(calls.length, '<li></li>');
260260
261261 for (var callI = 0; callI < calls.length; callI += 1) {
262 var liDom = domListFnExamples.children[callI];
262 var liDom = domListFnExamplesFragment.children[callI];
263263 liDom.innerHTML = getCallHtml(fnDecl, calls[callI]);
264264 }
265265
266 domListFnExamples.innerHTML = "";
267 domListFnExamples.appendChild(domListFnExamplesFragment);
266268 domFnExamples.classList.remove("hidden");
267269 } else if (instantiations != null) {
268270 // TODO
......@@ -303,7 +305,7 @@
303305 return;
304306 }
305307
306 resizeDomList(domListParams, docCount, '<div></div>');
308 var domListParamsFragment = createDomListFragment(docCount, '<div></div>');
307309 var domIndex = 0;
308310
309311 for (var i = 0; i < fields.length; i += 1) {
......@@ -312,7 +314,7 @@
312314 if (fieldNode.docs == null) {
313315 continue;
314316 }
315 var divDom = domListParams.children[domIndex];
317 var divDom = domListParamsFragment.children[domIndex];
316318 domIndex += 1;
317319 var argTypeIndex = typeObj.args[i];
318320
......@@ -333,12 +335,15 @@
333335 }
334336 divDom.innerHTML = html;
335337 }
338
339 domListParams.innerHTML = "";
340 domListParams.appendChild(domListParamsFragment);
336341 domSectParams.classList.remove("hidden");
337342 }
338343
339344 function renderNav() {
340345 var len = curNav.pkgNames.length + curNav.declNames.length;
341 resizeDomList(domListNav, len, '<li><a href="#"></a></li>');
346 var domListNavFragment = createDomListFragment(len, '<li><a href="#"></a></li>');
342347 var list = [];
343348 var hrefPkgNames = [];
344349 var hrefDeclNames = [];
......@@ -358,7 +363,7 @@
358363 }
359364
360365 for (var i = 0; i < list.length; i += 1) {
361 var liDom = domListNav.children[i];
366 var liDom = domListNavFragment.children[i];
362367 var aDom = liDom.children[0];
363368 aDom.textContent = list[i].name;
364369 aDom.setAttribute('href', list[i].link);
......@@ -369,6 +374,8 @@
369374 }
370375 }
371376
377 domListNav.innerHTML = "";
378 domListNav.appendChild(domListNavFragment);
372379 domSectNav.classList.remove("hidden");
373380 }
374381
......@@ -401,9 +408,9 @@
401408 });
402409
403410 if (list.length !== 0) {
404 resizeDomList(domListPkgs, list.length, '<li><a href="#"></a></li>');
411 var domListPkgsFragment = createDomListFragment(list.length, '<li><a href="#"></a></li>');
405412 for (var i = 0; i < list.length; i += 1) {
406 var liDom = domListPkgs.children[i];
413 var liDom = domListPkgsFragment.children[i];
407414 var aDom = liDom.children[0];
408415 aDom.textContent = list[i].name;
409416 aDom.setAttribute('href', navLinkPkg(list[i].pkg));
......@@ -414,6 +421,8 @@
414421 }
415422 }
416423
424 domListPkgs.innerHTML = "";
425 domListPkgs.appendChild(domListPkgsFragment);
417426 domSectPkgs.classList.remove("hidden");
418427 }
419428 }
......@@ -454,29 +463,14 @@
454463 return navLink(curNav.pkgNames, declNamesCopy);
455464 }
456465
457 function resizeDomListDl(dlDom, desiredLen) {
458 // add the missing dom entries
459 var i, ev;
460 for (i = dlDom.childElementCount / 2; i < desiredLen; i += 1) {
461 dlDom.insertAdjacentHTML('beforeend', '<dt></dt><dd></dd>');
462 }
463 // remove extra dom entries
464 while (desiredLen < dlDom.childElementCount / 2) {
465 dlDom.removeChild(dlDom.lastChild);
466 dlDom.removeChild(dlDom.lastChild);
467 }
468 }
469
470 function resizeDomList(listDom, desiredLen, templateHtml) {
471 // add the missing dom entries
472 var i, ev;
473 for (i = listDom.childElementCount; i < desiredLen; i += 1) {
474 listDom.insertAdjacentHTML('beforeend', templateHtml);
475 }
476 // remove extra dom entries
477 while (desiredLen < listDom.childElementCount) {
478 listDom.removeChild(listDom.lastChild);
466 function createDomListFragment(desiredLen, templateHtml) {
467 var templateHtmlContent = "";
468 for (var i = 0; i < desiredLen; i++) {
469 templateHtmlContent += templateHtml;
479470 }
471 var domTemplate = document.createElement("template");
472 domTemplate.innerHTML = templateHtmlContent;
473 return domTemplate.content;
480474 }
481475
482476 function typeIndexName(typeIndex, wantHtml, wantLink, fnDecl, linkFnNameDecl) {
......@@ -831,10 +825,10 @@
831825 return operatorCompare(a.err.name.toLowerCase(), b.err.name.toLowerCase());
832826 });
833827
834 resizeDomListDl(domListFnErrors, errorList.length);
828 var domListFnErrorsFragment = createDomListFragment(errorList.length, "<dt></dt><dd></dd>");
835829 for (var i = 0; i < errorList.length; i += 1) {
836 var nameTdDom = domListFnErrors.children[i * 2 + 0];
837 var descTdDom = domListFnErrors.children[i * 2 + 1];
830 var nameTdDom = domListFnErrorsFragment.children[i * 2 + 0];
831 var descTdDom = domListFnErrorsFragment.children[i * 2 + 1];
838832 nameTdDom.textContent = errorList[i].err.name;
839833 var docs = errorList[i].docs;
840834 if (docs != null) {
......@@ -843,6 +837,8 @@
843837 descTdDom.textContent = "";
844838 }
845839 }
840 domListFnErrors.innerHTML = "";
841 domListFnErrors.appendChild(domListFnErrorsFragment);
846842 domTableFnErrors.classList.remove("hidden");
847843 }
848844 domSectFnErrors.classList.remove("hidden");
......@@ -1022,45 +1018,51 @@
10221018 }
10231019
10241020 if (typesList.length !== 0) {
1025 resizeDomList(domListTypes, typesList.length, '<li><a href="#"></a></li>');
1021 var domListTypesFragment = createDomListFragment(typesList.length, '<li><a href="#"></a></li>');
10261022 for (var i = 0; i < typesList.length; i += 1) {
1027 var liDom = domListTypes.children[i];
1023 var liDom = domListTypesFragment.children[i];
10281024 var aDom = liDom.children[0];
10291025 var decl = typesList[i];
10301026 aDom.textContent = decl.name;
10311027 aDom.setAttribute('href', navLinkDecl(decl.name));
10321028 }
1029 domListTypes.innerHTML = "";
1030 domListTypes.appendChild(domListTypesFragment);
10331031 domSectTypes.classList.remove("hidden");
10341032 }
10351033 if (namespacesList.length !== 0) {
1036 resizeDomList(domListNamespaces, namespacesList.length, '<li><a href="#"></a></li>');
1034 var domListNamespacesFragment = createDomListFragment(namespacesList.length, '<li><a href="#"></a></li>');
10371035 for (var i = 0; i < namespacesList.length; i += 1) {
1038 var liDom = domListNamespaces.children[i];
1036 var liDom = domListNamespacesFragment.children[i];
10391037 var aDom = liDom.children[0];
10401038 var decl = namespacesList[i];
10411039 aDom.textContent = decl.name;
10421040 aDom.setAttribute('href', navLinkDecl(decl.name));
10431041 }
1042 domListNamespaces.innerHTML = "";
1043 domListNamespaces.appendChild(domListNamespacesFragment);
10441044 domSectNamespaces.classList.remove("hidden");
10451045 }
10461046
10471047 if (errSetsList.length !== 0) {
1048 resizeDomList(domListErrSets, errSetsList.length, '<li><a href="#"></a></li>');
1048 var domListErrSetsFragment = createDomListFragment(errSetsList.length, '<li><a href="#"></a></li>');
10491049 for (var i = 0; i < errSetsList.length; i += 1) {
1050 var liDom = domListErrSets.children[i];
1050 var liDom = domListErrSetsFragment.children[i];
10511051 var aDom = liDom.children[0];
10521052 var decl = errSetsList[i];
10531053 aDom.textContent = decl.name;
10541054 aDom.setAttribute('href', navLinkDecl(decl.name));
10551055 }
1056 domListErrSets.innerHTML = "";
1057 domListErrSets.appendChild(domListErrSetsFragment);
10561058 domSectErrSets.classList.remove("hidden");
10571059 }
10581060
10591061 if (fnsList.length !== 0) {
1060 resizeDomList(domListFns, fnsList.length, '<tr><td></td><td></td></tr>');
1062 var domListFnsFragment = createDomListFragment(fnsList.length, '<tr><td></td><td></td></tr>');
10611063 for (var i = 0; i < fnsList.length; i += 1) {
10621064 var decl = fnsList[i];
1063 var trDom = domListFns.children[i];
1065 var trDom = domListFnsFragment.children[i];
10641066
10651067 var tdFnCode = trDom.children[0];
10661068 var tdDesc = trDom.children[1];
......@@ -1074,17 +1076,19 @@
10741076 tdDesc.textContent = "";
10751077 }
10761078 }
1079 domListFns.innerHTML = "";
1080 domListFns.appendChild(domListFnsFragment);
10771081 domSectFns.classList.remove("hidden");
10781082 }
10791083
10801084 if (container.fields != null && container.fields.length !== 0) {
1081 resizeDomList(domListFields, container.fields.length, '<div></div>');
1085 var domListFieldsFragment = createDomListFragment(container.fields.length, '<div></div>');
10821086
10831087 var containerNode = zigAnalysis.astNodes[container.src];
10841088 for (var i = 0; i < container.fields.length; i += 1) {
10851089 var field = container.fields[i];
10861090 var fieldNode = zigAnalysis.astNodes[containerNode.fields[i]];
1087 var divDom = domListFields.children[i];
1091 var divDom = domListFieldsFragment.children[i];
10881092
10891093 var html = '<div class="mobile-scroll-container"><pre class="scroll-item">' + escapeHtml(fieldNode.name);
10901094
......@@ -1107,15 +1111,17 @@
11071111 }
11081112 divDom.innerHTML = html;
11091113 }
1114 domListFields.innerHTML = "";
1115 domListFields.appendChild(domListFieldsFragment);
11101116 domSectFields.classList.remove("hidden");
11111117 }
11121118
11131119 if (varsList.length !== 0) {
1114 resizeDomList(domListGlobalVars, varsList.length,
1120 var domListGlobalVarsFragment = createDomListFragment(varsList.length,
11151121 '<tr><td><a href="#"></a></td><td></td><td></td></tr>');
11161122 for (var i = 0; i < varsList.length; i += 1) {
11171123 var decl = varsList[i];
1118 var trDom = domListGlobalVars.children[i];
1124 var trDom = domListGlobalVarsFragment.children[i];
11191125
11201126 var tdName = trDom.children[0];
11211127 var tdNameA = tdName.children[0];
......@@ -1134,15 +1140,17 @@
11341140 tdDesc.textContent = "";
11351141 }
11361142 }
1143 domListGlobalVars.innerHTML = "";
1144 domListGlobalVars.appendChild(domListGlobalVarsFragment);
11371145 domSectGlobalVars.classList.remove("hidden");
11381146 }
11391147
11401148 if (valsList.length !== 0) {
1141 resizeDomList(domListValues, valsList.length,
1149 var domListValuesFragment = createDomListFragment(valsList.length,
11421150 '<tr><td><a href="#"></a></td><td></td><td></td></tr>');
11431151 for (var i = 0; i < valsList.length; i += 1) {
11441152 var decl = valsList[i];
1145 var trDom = domListValues.children[i];
1153 var trDom = domListValuesFragment.children[i];
11461154
11471155 var tdName = trDom.children[0];
11481156 var tdNameA = tdName.children[0];
......@@ -1161,6 +1169,8 @@
11611169 tdDesc.textContent = "";
11621170 }
11631171 }
1172 domListValues.innerHTML = "";
1173 domListValues.appendChild(domListValuesFragment);
11641174 domSectValues.classList.remove("hidden");
11651175 }
11661176 }
......@@ -1768,7 +1778,7 @@
17681778 if (ev.ctrlKey) name = "Ctrl+" + name;
17691779 return name;
17701780 }
1771
1781
17721782 function onWindowKeyDown(ev) {
17731783 switch (getKeyString(ev)) {
17741784 case "Esc":
......@@ -1809,7 +1819,7 @@
18091819
18101820 function startAsyncSearch() {
18111821 clearAsyncSearch();
1812 searchTimer = setTimeout(startSearch, 100);
1822 searchTimer = setTimeout(startSearch, 10);
18131823 }
18141824 function startSearch() {
18151825 clearAsyncSearch();
......@@ -1881,25 +1891,27 @@
18811891 }
18821892
18831893 if (matchedItems.length !== 0) {
1884 resizeDomList(domListSearchResults, matchedItems.length, '<li><a href="#"></a></li>');
1885
18861894 matchedItems.sort(function(a, b) {
18871895 var cmp = operatorCompare(b.points, a.points);
18881896 if (cmp != 0) return cmp;
18891897 return operatorCompare(a.decl.name, b.decl.name);
18901898 });
18911899
1900 var domListSearchResultsFragment = createDomListFragment(matchedItems.length, '<li><a href="#"></a></li>');
18921901 for (var i = 0; i < matchedItems.length; i += 1) {
1893 var liDom = domListSearchResults.children[i];
1902 var liDom = domListSearchResultsFragment.children[i];
18941903 var aDom = liDom.children[0];
18951904 var match = matchedItems[i];
18961905 var lastPkgName = match.path.pkgNames[match.path.pkgNames.length - 1];
18971906 aDom.textContent = lastPkgName + "." + match.path.declNames.join('.');
18981907 aDom.setAttribute('href', navLink(match.path.pkgNames, match.path.declNames));
18991908 }
1900 renderSearchCursor();
19011909
1910 domListSearchResults.innerHTML = "";
1911 domListSearchResults.appendChild(domListSearchResultsFragment);
19021912 domSectSearchResults.classList.remove("hidden");
1913
1914 renderSearchCursor();
19031915 } else {
19041916 domSectSearchNoResults.classList.remove("hidden");
19051917 }