Benchmark: append multiple vs appendChild documentFragment (2)

HTML Preparation code:

<ul id="test1"></ul>
<ul id="test2"></ul>

Tests:

append multiple
const userList = [{ name: "john" }, { name: "jason" }, { name: "milli" }]; const ul = document.querySelector("#test1"); const userTagList = []; for (const { name } of userList) { const li = document.createElement("li"); li.textContent = name; userTagList.push(li); } ul.append(...userTagList);
appendChild documentFragment
const userList = [{ name: "john" }, { name: "jason" }, { name: "milli" }]; const ul = document.querySelector("#test2"); const fragment = document.createDocumentFragment(); for (const { name } of userList) { const li = document.createElement("li"); li.textContent = name; fragment.appendChild(li); } ul.appendChild(fragment);

Rendered benchmark preparation results:

Previous results

Test case name	Result
append multiple
appendChild documentFragment

append multiple vs appendChild documentFragment (2) (version: 4)