Производительность Javascript: самый быстрый способ создания и внедрения HTML

Question

Это для одной страницы, мобильного веб-приложения ....

Для удобства чтения я конкатенировал свой html, а затем сделал инъекцию.Я почти уверен, что есть более эффективный способ, и хотел бы получить мнение эксперта js!

Вот пример одной из моих составных строк html ...

var html_str = '';
$.each(events_array, function(k, ev_type){
    if( localStorage.getItem('show_type'+ev_type.type_num) !== 'false' ){        
        $.each(ev_type, function(k2, e){
            if(typeof e != 'string'){
                if(fav_mode && last_date_num != e.date){
                    html_str += '<li class="date">'+e.date_text+'</li>';
                    last_date_num = e.date;
                }
                html_str += '<li';
                if(fav_mode | (FAVOURITES && $.inArray(parseInt(e.event_id), FAVOURITES) >= 0) ){
                    html_str += ' class="fav"';
                }
                html_str += '>';
                html_str +=     '<div class="l_'+e.gig_club+'"></div>';
                html_str +=     '<p rel="'+e.event_id+'"><span>'+e.venue+' : </span>'+e.nameofnight+'</p>';
                html_str += '</li>';                 
            }                         
        });
    }
});
return html_str

Answer 1

Там нет "Самый быстрый".Для браузера есть только «Самый быстрый».

Существует 3 распространенных метода.Работа со строками HTML, использование шаблонов и DOM.

Поскольку шаблоны могут использовать как внутреннюю обработку строк HTML, так и DOM, я бы порекомендовал его для удобства чтения / сопровождения.

Вот несколько тестов

Шаблоны

Больше шаблонов

Шаблоны с данными для мобильных платформ

Загрузка шаблонов

Dust JS Benchmark

Answer 2

Если вы говорите об огромном количестве HTML, а перф имеет первостепенное значение

Определенно, нет:

• Итеративное внедрение узлов dom в цикл. Это может привести к путанице даже в негигантских сценариях HTML.

• Попытайтесь сохранить работу, используя действующий существующий HTML, настраивая атрибуты и обмениваясь контентом между различными элементами. Как и в предыдущем пункте, это может быть уродливым даже в вещах, не связанных с тысячами элементов. Большие таблицы, для которых не задано фиксированное расположение таблиц, могут стать особенно неприятными, когда вы активируете тонну переворачивания.

• Используйте прямую строку jQuery для сборки - что, IMO, на самом деле отлично подходит для большинства применений, поскольку оно отлично справляется с проверкой противных escape-последовательностей, если вводить данные из источников, которые в один прекрасный день могут быть не настолько безопасными. Вместо этого используйте метод html, чтобы создавать из строк и вводить их из строк. Хотя на самом деле для максимальной производительности, я бы просто отказался от JQ, если бы на 100% доверял своим данным.

Do:

• Соберите все это во фрагмент документа и добавьте к нему. Или создайте строку HTML и сразу же добавьте ее. Я предпочитаю гибридный метод, описанный ниже в разделе «Возможно», но не тестировал в течение 2-3 лет. Таким образом, браузер должен перерисовать страницу только один раз. Google "CSS reflow" для более подробной информации.

• Если вам нужно много настроек для большого объема HTML, просто измените данные и пересоберите весь набор по той же причине, что и выше.

• Если вы строите из строк, минимизируйте конкатенацию с помощью оператора '+' и используйте вместо этого объединения массива. Шаблонирование с массивами прекрасно работает в крайнем случае.

• Беспокоитесь о циклах и итераторах, которые принимают аргумент функции, если IE <= 8 является проблемой. Повторные вызовы функций могут обходиться без JIT-компилятора. Они действительно могут помочь вам в JIT, если они встроены (определены внутри другой функции без каких-либо ссылок, возвращаемых извне). </p>

• Проверьте все, что вы пытаетесь. Во всем есть серые области, кроме правила добавления нескольких к одному гигантскому. Несколько всегда будет медленнее.

Может быть:

Отличным трюком в старых браузерах было использование больших строк HTML для документирования фрагментов и добавления их с помощью методов DOM. Это было не самым быстрым для всех браузеров, но это был лучший подход по всем направлениям, когда IE7 имел значение, и разница в современных браузерах JIT между одноблочным innerHTML, методами DOM только во фрагмент документа и гибридным подходом была в основном незначительной.

Answer 3

Вы также можете рассмотреть возможность использования documentFragment, хотя он может быть не столь читабельным, как html-строка, он очень эффективен (с точки зрения производительности) и читабелен, возможно, объектно-ориентированным способом.

вы можете посетить этотстраница для деталей: http://ejohn.org/blog/dom-documentfragments/

Answer 4

Явный цикл for определенно будет намного быстрее, чем $.each(), главным образом потому, что он выполняет вызов функции для каждого элемента, но также и по другим причинам, например, с новым кадром выполнения поискавремя для html_str будет больше.

Есть некоторые эмпирические доказательства (я думаю, что это было справедливо для старых браузеров, я не уверен, что быстрее в настоящее время или на мобильных устройствах, стоит проверить) что добавление элементов в массив (с переменной цикла html_str[i], а не html_str.push()) и последующий вызов .join происходит быстрее, чем конкатенация строк.

Как уже упоминалось, добавление одного большого DOMstring быстрее, чем небольшие добавления, и намного быстрее, чем использование методов DOM (appendChild, insertBefore и т. д.).

Хороший шаблонизатор сделает эти вещи за вас (за небольшую дополнительную плату), хотя яЯ не уверен, если многие из них делают.И если это всего лишь небольшое количество шаблонов, то использование библиотеки может оказаться излишним, когда простой цикл делает свое дело.

Answer 5

Я бы тоже порекомендовал использовать шаблоны.

Но я думаю, что вы уже используете лучшие практики по внедрению HTML: гораздо лучше создать HTML, а затем внедрить его за один раз, а не вводить много раз.небольшие кусочки HTML, так как браузер может перекрашивать / переформатировать документ при каждой инъекции.