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