jQuery html () работает очень медленно

Question

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

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

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

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

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

РЕДАКТИРОВАТЬ Я закончил делать это:

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

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

Тем не менее, быстрее использовать 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. Минимум манипуляций с DOM
7. Обернуть все в один элемент при выполнении любого вида вставки DOM
8. По возможности используйте идентификаторы вместо классов
9. Дайте вашим селекторам контекст
10. Используйте цепочку правильно
11. Научитесь правильно использовать анимацию
12. Узнайте о делегировании событий
13. Использование классов для хранения состояния
14. Еще лучше - использовать внутренний метод data () jQuery для хранения состояния
15. Напишите свои собственные селекторы
16. Оптимизируйте свой HTML и измените его после загрузки страницы
17. Ленивая загрузка контента для скорости и преимуществ SEO
18. Использовать служебные функции jQuery
19. Использование noconflict для переименования объекта jquery при использовании других платформ
20. Как узнать, когда загружены изображения
21. Всегда используйте последнюю версию
22. Как проверить, существует ли элемент
23. Добавьте класс JS к вашему атрибуту HTML
24. Вернуть false, чтобы предотвратить поведение по умолчанию
25. Сокращение для готового события

Answer 2

Самый быстрый способ это:

 $.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);
    });

В соответствии с эта ссылка является самым быстрым способом, потому что вы заключаете все в один элемент при выполнении любого вида вставки DOM.

Answer 3

Это похоже на ограничение функции 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 );
};