鍦烘櫙锛氱Щ鍔ㄧ鍟嗗搧鍒楄〃椤靛姩鎬佸姞杞藉崱椤?/h2>

鏌愮數鍟咥PP鍦ㄦ粴鍔ㄥ姞杞界20椤靛晢鍝佹椂锛屾柊澧炵殑60涓晢鍝佽妭鐐瑰鑷寸晫闈㈠喕缁?.3绉掞紝鐢ㄦ埛鎶曡瘔鎿嶄綔鍗￠】

    
鏍稿績瑙ｅ喅鏂规瀵规瘮
    
    
        
鈻?浼犵粺appendChild鏂规
        

// 鍏稿瀷鍗￠】瀹炵幇
const fragment = document.createDocumentFragment();
data.forEach(item => {
const div = document.createElement('div');
div.className = 'goods-item';
div.innerHTML = <img src="${item.pic}"/>...;
fragment.appendChild(div);
});
document.getElementById('list').appendChild(fragment);

鉂?鎬ц兘鐥涚偣锛氬綋鎻掑叆60涓鏉傝妭鐐规椂锛岀Щ鍔ㄧChrome鍑虹幇850ms鐨勯暱浠诲姟锛圠ong Task锛?/p>

    
        
鈻?insertAdjacentHTML浼樺寲鏂规
        

// 楂樻晥DOM娉ㄥ叆鏂规
let htmlStr = '';
data.forEach(item => {
htmlStr += <div class="goods-item"> <img src="${item.pic}"> ${/* 鍏朵粬鍟嗗搧淇℃伅妯℃澘 */''} </div>;
});
document.getElementById('list').insertAdjacentHTML('beforeend', htmlStr);

鉁?浼樺寲鏁堟灉锛氬湪Redmi K40涓婃祴璇曪紝闀夸换鍔＄缉鍑忚嚦230ms锛孎PS缁存寔鍦?0甯т互涓?/p>

    

        

            

                
鎸囨爣
                
appendChild
                
insertAdjacentHTML
            
        
        

            

                
DOM鎿嶄綔娆℃暟
                
60娆?/td>
                
1娆?/td>
            
            

                
鍐呭瓨鍗犵敤宄板€?/td>
                
84MB
                
62MB
            
            

                
娓叉煋鑰楁椂
                
320ms
                
110ms
            
        
    



    
馃殌 绉诲姩绔渶浣冲疄璺?/h3>
    

        

            鈻?/span>
            浼樺厛瀛楃涓叉嫾鎺ワ細鍦ㄥ皬绫?鍗庝负绛夎澶囦笂锛屽瓧绗︿覆鎷兼帴姣擠ocumentFragment蹇?.8鍊?
        
        

            鈻?/span>
            鎵归噺鍖栨搷浣滐細褰撴彃鍏ヨ秴杩?0涓妭鐐规椂锛屽姟蹇呬娇鐢ㄥ崟娆OM鍐欏叆
        
        

            鈻?/span>
            鍐呭瓨浼樺寲锛?/strong>鍙婃椂瑙ｉ櫎涓存椂鍙橀噺寮曠敤锛岄伩鍏峷8鍨冨溇鍥炴敹鍗￠】