Merge branch 'mksunny1-Vanillajs-3'

Author: krausest

frameworks/keyed/vanillajs-3/package.json

@@ -17,7 +17,7 @@
     "vanilla",
     "javascript"
   ],
-  "author": "Mark Sun",
+  "author": "Mark Sune",
   "license": "Apache-2.0",
   "homepage": "https://github.com/krausest/js-framework-benchmark",
   "repository": {

frameworks/keyed/vanillajs-3/src/Main.js

@@ -9,46 +9,52 @@ function* _random(n) {
         yield arr
     }
 }
-const data = [], tbody = document.getElementsByTagName('tbody')[0];
-let index = 1, i, lbl, selected, temp;
+const data = [], nTemplates = 10, tbody = document.getElementsByTagName('tbody')[0];
+let index = 1, i, lbl, selected;
 
-function create(e, n = 1000) { if (data.length) clear(e); append(e, n); }
-function append(e, n = 1000) {
-    const [r1, r2, r3] = _random(n);
-    const itemTemplate = document.getElementById('itemTemplate').content.firstElementChild;
-    const itemId = itemTemplate.firstElementChild.firstChild, itemLabel = itemTemplate.querySelector('a.lbl').firstChild;
-    while (--n >= 0) {
-        itemId.nodeValue = index++;
-        data.push(itemLabel.nodeValue = `${adjectives[r1[n]]} ${colours[r2[n]]} ${nouns[r3[n]]}`)
+function create(n = 1000) { if (data.length) clear(); append(n); }
+function append(n = 1000) {
+    const [r1, r2, r3] = _random(n); let j = 0;
+    const itemTemplate1 = document.getElementById('itemTemplate').content.firstElementChild;
+    const itemTemplate = document.createDocumentFragment();
+    for (i = 0; i < nTemplates; i++) itemTemplate.appendChild(itemTemplate1.cloneNode(true));
+    const ids = Array.prototype.map.call(itemTemplate.querySelectorAll('td:first-child'), i => i.firstChild)
+    const labels = Array.prototype.map.call(itemTemplate.querySelectorAll('a.lbl'), i => i.firstChild);
+    
+    while ((n -= nTemplates) >= 0) {
+        for (i = 0; i < nTemplates; i++, j++) {
+            ids[i].nodeValue = index++;
+            data.push(labels[i].nodeValue = `${adjectives[r1[j]]} ${colours[r2[j]]} ${nouns[r3[j]]}`)    
+        }
         tbody.appendChild(itemTemplate.cloneNode(true));
     }
 }
-function update(e) {
+function update() {
     const labels = tbody.querySelectorAll('a.lbl'), length = labels.length;
     for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!';
 }
-function clear(e) { data.length = 0; tbody.textContent = '' }
+function clear() { data.length = 0; tbody.textContent = '' }
 
-function swap(e) {
-    if (data.length < 999) return;
+function swap() {
+    if (data.length < 999) return; const first = tbody.firstElementChild;
     [data[1], data[998]] = [data[998], data[1]];
-    tbody.replaceChild(tbody.children[1], (temp = tbody.children[998]));
-    tbody.insertBefore(temp, tbody.children[1]);
+    tbody.insertBefore(tbody.insertBefore(first.nextElementSibling, 
+        tbody.children[998]).nextElementSibling, first.nextElementSibling);
 }
 tbody.onclick = (e) => {
     e.preventDefault; e.stopPropagation;
     if (e.target.matches('a.lbl')) {
-        const element = e.composedPath()[2];
+        const element = e.target.parentNode.parentNode;
         if (element === selected) selected.className = selected.className ? "" : "danger";
         else {
             if (selected) selected.className = "";
             element.className = "danger"; selected = element
         }
     } else if (e.target.matches('span.remove')) { 
-        data.splice(Array.prototype.indexOf.call(tbody.children, tbody.removeChild(e.composedPath()[3])), 1);
+        data.splice(Array.prototype.indexOf.call(tbody.children, tbody.removeChild(e.target.parentNode.parentNode.parentNode)), 1);
     }
 }
 for (let [key, fn] of Object.entries({
-    run: create, runlots: (e) => create(e, 10000),
+    run: create, runlots: () => create(10000),
     add: append, update, clear, swaprows: swap
-})) document.getElementById(key).onclick = (e) => { e.stopPropagation(); fn(e) }
+})) document.getElementById(key).onclick = (e) => { e.stopPropagation(); fn() }