Самый быстрый способ создать флажки

У меня есть расширение Google Chrome, которое создает функцию выбора для всей поисковой системы, но она медленная (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 (var i = 0, len = x.length; i < len; i++){, но была только 20мс разница. CheckedAll() - это функция, которая просто выбирает все флажки.

Другая часть (не показана), которая проходит через выбранные флажки и фактически делает работу с выбором, выполняется намного быстрее при 92 мс и даже за 1000 результатов она по-прежнему быстро.

Вот надрез от хромированной Дев инструментов:

Snapshot of the timings

Спасибо.

источник

2012-05-17 A.M.K

его вход в дом медленный, а не ваш цикл. цикл невелик по сравнению с операциями dom. вам нужно было бы реорганизовать массив array.push для строк, а затем присоединиться к концу и разместить один большой текстовый результат в dom один раз –

Я думал, что это был DOM, но не видел другого способа, не могли бы вы объяснить более детально? Спасибо. –

вы проходите через каждую итерацию цикла. вместо этого, если бы можно было создать ваш html целиком, как если бы вы могли нарисовать квадрат вокруг большой области, которую вы определяете, то есть подход. вам нужно будет показать свой дом в вашем примере, чтобы я показал конкретный подход, основанный на том, как вы визуализируете –

Я бы тест:

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) замещаются класса)

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);

источник

2012-05-17 15:19:34

Как отмечено в комментарии, это незначительно по сравнению с доступом DOM, который отмечается в ваших тестах производительности. –

2.77 Секунд, но спасибо в любом случае. –

572ms, 250 результатов и 2.43, 750 результатов !! Спасибо. –

Самый быстрый способ создать флажки

ответ

Смежные вопросы