{"ScriptPreparationCode":"function compile3(arr){\r\n console.time(\u0027a\u0027)\r\n d3.select(\u0022#test3\u0022).selectAll(\u0027div\u0027)\r\n .data(arr)\r\n .join(\r\n enter =\u003E {\r\n const box = enter.append(\u0022div\u0022)\r\n .style(\u0027width\u0027, \u0027150px\u0027) \r\n .style(\u0027border\u0027, \u00271px solid\u0027)\r\n box.append(\u0027span\u0027)\r\n box.append(\u0027div\u0027)\r\n\t update(box)\r\n }\r\n )\r\n .call(update)\r\n\r\n console.timeEnd(\u0027a\u0027)\r\n\r\n function update(box) {\r\n box.select(\u0027span\u0027).text(d =\u003E d.title)\r\n box.select(\u0027div\u0027).text(d =\u003E d.text)\r\n }\r\n}\r\n\r\nfunction compile2(arr){\r\n console.time(\u0027a\u0027)\r\n d3.select(\u0022#test3\u0022).html(\u0027\u0027).selectAll(\u0027div\u0027)\r\n .data(arr)\r\n .enter()\r\n .append(\u0027div\u0027)\r\n .style(\u0027width\u0027, \u0027150px\u0027) \r\n .style(\u0027border\u0027, \u00271px solid\u0027)\r\n .each(html)\r\n console.timeEnd(\u0027a\u0027)\r\n\r\n function html(d) {\r\n const box = d3.select(this)\r\n box.append(\u0027span\u0027).text(d.title)\r\n box.append(\u0027div\u0027).text(d.text)\r\n }\r\n}\r\n\r\nfunction compile1a(arr){\r\n console.time(\u0027a\u0027)\r\n const fragment = new DocumentFragment()\r\n\r\n arr.forEach(html)\r\n const wrap = document.getElementById(\u0027test3\u0027)\r\n wrap.innerHTML = \u0027\u0027\r\n wrap.appendChild(fragment)\r\n console.timeEnd(\u0027a\u0027)\r\n \r\n function html(d) {\r\n const box = document.createElement(\u0027div\u0027)\r\n\tbox.style.width = \u0027150px\u0027\r\n\tbox.style.border = \u00271px solid\u0027\r\n\tconst span = document.createElement(\u0027span\u0027)\r\n\tspan.textContent = d.title\r\n\tconst div = document.createElement(\u0027div\u0027)\r\n\tdiv.textContent = d.text\r\n box.appendChild(span)\r\n\tbox.appendChild(div)\r\n fragment.append(box)\r\n }\r\n}\r\n\r\nfunction compile1(arr){\r\n console.time(\u0027a\u0027)\r\n const fragment = new DocumentFragment()\r\n\r\n arr.forEach(html)\r\n const wrap = d3.select(\u0022#test3\u0022).html(\u0027\u0027)\r\n wrap.node().append(fragment)\r\n console.timeEnd(\u0027a\u0027)\r\n function html(d) {\r\n const box = d3.create(\u0027div\u0027)\r\n .style(\u0027width\u0027, \u0027150px\u0027) \r\n .style(\u0027border\u0027, \u00271px solid\u0027)\r\n box.append(\u0027span\u0027).text(d.title)\r\n box.append(\u0027div\u0027).text(d.text)\r\n fragment.append(box.node())\r\n }\r\n}\r\n\r\nfunction compile(arr){\r\n console.time(\u0027a\u0027)\r\n const el = arr.map(html).join(\u0027\u0027)\r\n d3.select(\u0022#test3\u0022).html(el)\r\n console.timeEnd(\u0027a\u0027)\r\n\r\n function html(d) {\r\n const box = d3.create(\u0027div\u0027)\r\n .style(\u0027width\u0027, \u0027150px\u0027) \r\n .style(\u0027border\u0027, \u00271px solid\u0027)\r\n box.append(\u0027span\u0027).text(d.title)\r\n box.append(\u0027div\u0027).text(d.text)\r\n return box.node().outerHTML\r\n }\r\n}\r\n//https://observablehq.com/@d3/selection-join\r\nfunction getArr() {\r\n const arr = []\r\n\r\n function addOne() {\r\n const rand = Math.round(Math.random()*100)\r\n const title = \u0027title\u0027\u002Brand\r\n const text = \u0027asljfla aslj a asllj sa lsj\u0027\r\n arr.push({title, text})\r\n }\r\n const count = 100\r\n for (let i = 0; i \u003C count; i\u002B\u002B) addOne()\r\n return arr\r\n}","TestCases":[{"Name":"Fragment","Code":"const arr = getArr()\r\ncompile1a(arr)\r\nconst arr2 = getArr()\r\ncompile1a(arr2)","IsDeferred":false},{"Name":"Join","Code":"const arr = getArr()\r\ncompile3(arr)\r\nconst arr2 = getArr()\r\ncompile3(arr2)","IsDeferred":false},{"Name":"Frag \u002B d3","Code":"const arr = getArr()\r\ncompile1(arr)\r\nconst arr2 = getArr()\r\ncompile1(arr2)","IsDeferred":false},{"Name":"Clear","Code":"const arr = getArr()\r\ncompile2(arr)\r\nconst arr2 = getArr()\r\ncompile2(arr2)","IsDeferred":false},{"Name":"Replace2","Code":"const arr = getArr()\r\ncompile(arr)\r\nconst arr2 = getArr()\r\ncompile(arr2)","IsDeferred":false}]}