체크 박스를 만드는 가장 빠른 방법

Question

검색 엔진에 대해 select-all 기능을 만드는 Google 크롬 확장 프로그램이 있지만 속도가 느립니다 (1-14 초, 250-1000 결과) 더 빠른 방법이 있습니까? 내 코드는 다음과 같습니다 :

var dropdownvalue = dropdown.options[dropdown.selectedIndex].value; 
if ((dropdownvalue == "createFullCheckboxes") || (dropdownvalue == "createNameCheckboxes")) { 
    var div_embed1 = document.getElementById('results-pane'); 

    if (div_embed1) { 
     div_embed1.innerHTML = '<form id="checkbox-form">' + div_embed1.innerHTML + '</form>'; 
    } 

    var i; 
    var x = document.getElementsByClassName('name'); 

    for (i = 0; i < x.length; i++) { 
     x[i].innerHTML = '<input id="checkbox" type="checkbox">' + x[i].innerHTML + ''; 
    } 

    checkedAll(); 
    return; 
}​ 

나는이에 for 루프를 변경 시도 : for (var i = 0, len = x.length; i < len; i++){을하지만, 단지 20ms의 차이가 있었다. CheckedAll()은 단순히 모든 확인란을 선택하는 기능입니다.

선택한 확인란을 반복하고 실제로 select-all 작업을하는 다른 부분 (표시되지 않음)은 92ms에서 훨씬 빠르며 1000 개의 결과에도 여전히 빠릅니다.

감사합니다 : 여기

은 크롬 개발 도구에서 싹둑이다.

Answer 1

나는 것 테스트 :

는

var x = document.getElementsByClassName('name'); 
var h = '<input class="checkbox" type="checkbox">'; 
var i = x.length; 
while(i--){ x[i].innerHTML = h + x[i].innerHTML; } 

동등한 시험은 시험보다보다 더 빨리해야한다.

것은 Duffs 장치를 사용해보십시오 : (투기 우리가 부정적인 영향을 미칠 수있는 프로토 타입 속성 마크 업 렌더링 알고하지 않는 한) 클래스로 대체 (참고 중복 ID를 피하기 위해 = ID를 제거))

function process(xi, h) { 
    xi.innerHTML = h + xi.innerHTML; 
} 
var x = document.getElementsByClassName('name'); 
var h = '<input class="checkbox" type="checkbox">'; 
var iterations = Math.floor(x.length/8); 
var leftover = x.length % 8; 
var i = 0; 

if (leftover > 0) { 
    do { 
     process(x[i++], h); 
    } while (--leftover > 0); 
} 

do { 
    process(x[i++], h); 
    process(x[i++], h); 
    process(x[i++], h); 
    process(x[i++], h); 
    process(x[i++], h); 
    process(x[i++], h); 
    process(x[i++], h); 
    process(x[i++], h); 
} while (--iterations > 0);