鍍金池/ 問答/HTML5  PHP  HTML/ 渲染的問題 關(guān)于優(yōu)化

渲染的問題 關(guān)于優(yōu)化

圖片描述

需求：根據(jù)頁面的每個UL的里面的input的value值然后渲染出對應(yīng)li的選中的狀態(tài)，【不依賴第三方庫，原生實現(xiàn)】
現(xiàn)在功能已經(jīng)實現(xiàn)了，但是在性能這邊是相當不好的 ， 請大神給他個思路或者一段代碼 讓我理解一下 謝謝

回答
編輯回答
抱緊我

應(yīng)該是DOM的重排和重繪次數(shù)過多，影響了DOM性能，建議直接在js中生成html，然后插入到dom中：

let starList = [3, 2, 5];
function loadStars() {
    let dom = '';
    starList.forEach(e => {
        dom += '<ul>/
            <input value="' + e + '" type="hidden"/>'
        for (let i = 0; i < 5; i++) {
            dom += i < e ? '<li class="on"></li>' : '<li></li>';
        }
        dom += '</ul>';
    });
    document.getElementById("list").innerHTML = dom;
}
2017年9月27日 07:45
編輯回答
歆久
<div id="list">
    <ul>
        <input type="hidden" value="2" />
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <input type="hidden" value="1" />
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <input type="hidden" value="3" />
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
init();
function init() {
    var dul = document.getElementById('list'), uls = dul.children, i = 0, len = uls.length;
    for (; i < len;) {
        var lis = uls[i++].children, index = lis[0].value;
        lis[index].className = index;
        //lis[index].innerHTML = index;
    }
}
2017年1月17日 02:47