JQuery html() действует очень медленно

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

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

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

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

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

EDIT Я закончил это:

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

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

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

Ответ 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/

Загрузите фреймворк из Google Code
Использовать чит-лист
Объедините все ваши скрипты и уменьшите их
Использовать Firebugs отличные средства ведения журнала консоли.
Сохранять операции выбора до минимума путем кэширования
Держите DOM-манипуляцию до минимума
Оберните все в один элемент при выполнении любого типа вставки DOM
Использовать идентификаторы вместо классов, где это возможно.
Дайте вашим селекторам контекст
Правильно использовать цепочку
Научитесь правильно использовать анимацию
Подробнее о делегировании событий
Использовать классы для хранения состояния
Еще лучше, используйте метод jQuerys internal data() для хранения состояния
Напишите свои собственные селекторы
Оптимизируйте свой HTML-код и измените его, как только страница загрузится.
ленивое содержание загрузки для скорости и преимуществ SEO.
Использовать служебные функции jQuerys
Используйте noconflict для переименования объекта jquery при использовании других фреймворков
Как сказать, когда загруженные изображения
Всегда используйте последнюю версию
Как проверить, существует ли элемент
Добавить класс JS в свой HTML-атрибут
Возврат 'false для предотвращения поведения по умолчанию
Сокращение для события готовности

Ответ 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.

Ответ 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 );
};