JQuery HTML(), действующий очень медленно

Question

я испытывал что-то я читал раньше о том, как случайная Math.random() на самом деле, и хотел, чтобы отобразить 10000 номеров, что должно было быть случайное число между 0 и 10000000.

Чтобы увидеть test, я решил просто присоединиться к массиву случайных чисел к строке с <br> между каждым целым числом. И тогда я просто сделал $("#"+elm).html(randomNumberString);, который был очень медленным. Я просто подумал, что это генерация и сортировка случайных чисел в массив. Но когда я начал размещать таймеры в своем коде, стало очевидно, что это был результат, который замедлял все.

Так как тест я сделал document.getElementById(elm).innerHTML = randomNumberString;

jQuery.html(): 2500ms getElementById.innerHTML: 170ms

Я попробовал это на всех 5 браузеров, и номера были очень близки во всех браузерах. .. Я использую jQuery неправильно в этом случае? Я также попытался добавить и извлечь элемент перед запуском таймера, поэтому я мог просто сделать $(elm).html(), но это не помогло. Кажется, это фактическая функция html(), которая замедляет все.

EDIT я в конечном итоге делает это:

randomStringNumber = "<div>" + randomStringNumber + "</div>"; 

и теперь все это работает гораздо быстрее: jQuery.html(): 120 мс getElementById.innerHTML: 80ms

Еще быстрее используя oldschool html. И если у кого-то есть ответ на вопрос, зачем быстрее обертывать его в один элемент, я был бы признателен ...

Answer 1

25 наконечник, чтобы улучшить ваше использование JQuery

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

http://acsenthil.wordpress.com/2011/07/04/improve-your-jquery-25-excellent-tips/

1. Загрузите рамки из Google Code
2. Используйте шпаргалку
3. Объединить все ваши скрипты и преуменьшать их
4. Используйте превосходство Firebug одолжил журнальную регистрацию консоли
5. операций выбора свести к минимуму кэширует
6. Keep манипуляции DOM к минимуму
7. Wrap все в одном элементе при выполнении любого вида DOM вставки
8. идентификаторов Используйте вместо классов там, где это возможно
9. Дайте ваши селекторы контекст
10. используйте цепочки правильно
11. Научится использовать одушевленный правильно
12. Узнайте о делегации события
13. Используйте классы для хранения состояния
14. Еще лучше использовать внутренние данные JQuery в() метод для сохранения состояния
15. Напишите свои собственные селекторы
16. Оптимизируйте HTML и изменить его после загрузки страницы
17. Ленивые загрузки содержимое для скорости и SEO преимущества функции полезности
18. Использовать JQuery в
19. Используйте noconflict переименовать объект Jquery при использовании других структур
20. Как сказать, когда изображения загружены
21. Всегда используйте последнюю версию
22. Как проверить, если элемент существует
23. Добавьте класс JS в атрибуте HTML
24. Возвращение «ложь», чтобы предотвратить поведение по умолчанию
25. Сокращенное обозначение готового события

Answer 2

Это похоже на функцию limitation функции html. В этой дискуссии следующая функция была предложена в качестве замены:

$.fn.replaceHtml = function(val) { 
    var stack = []; 
    return this.each(function(i, el) { 
     var oldEl = el; 
     /*@cc_on // Pure innerHTML is slightly faster in IE 
     oldEl.innerHTML = html; 
     return oldEl; 
     @*/ 
     var newEl = oldEl.cloneNode(false); 
     newEl.innerHTML = html; 
     oldEl.parentNode.replaceChild(newEl, oldEl); 
     /* Since we just removed the old element from the DOM, return a reference 
     to the new element, which can be used to restore variable references. */ 
     stack.push(newEl); 
    }).pushStack(stack); 
}; 

Answer 3

Самый быстрый способ заключается в следующем:

$.getJSON("/Admin/GetFolderList/", function(result) { 
     var optionsValues = '<select>'; 
     $.each(result, function(item) { 
      optionsValues += '<option value="' + item.ImageFolderID + '">' + item.Name + '</option>'; 
     }); 
     optionsValues += '</select>'; 
     var options = $('#options'); 
     options.replaceWith(optionsValues); 
    }); 

По this link это самый быстрый способ, потому что вы обернуть все в одном элементе при выполнении любого вида вставки DOM.