since I don"t know how to use createDocumentFragment , I hope you can help me to see if the usage is correct, or if there is anything else that affects performance
let _smilies = _root.el.querySelector(".smilies-body");
let _ul, _li = "";
let fragment = document.createDocumentFragment();
Object.keys(smiliesData).forEach((y, i) => {
_ul = document.createElement("ul");
_ul.setAttribute("class", "smilies-items smilies-items-biaoqing")
_ul.setAttribute("data-id", i)
smiliesData[y].split("|").forEach(e => {
_ul.innerHTML += `<li class="smilies-item"><img src="https://img.codeshelper.com/upload/img/2021/03/06/3fu1pjnthfa4913.png"></li>`
})
_li += `<li class="smilies-name" data-id="${i}"><span>${y}</span></li>`
fragment.appendChild(_ul); //ul
})
let _div = document.createElement("div");
_div.setAttribute("class", "smilies-bar")
_div.innerHTML = `<ul class="smilies-packages">${_li}</ul>`
fragment.appendChild(_div); //div
_smilies.appendChild(fragment);