как эффективно добавлять контент с помощью JQuery

Question

Я использую JQuery для добавления большого количества текста внутри тега. Я считаю, что чем больше текста в данный момент в теге, тем медленнее добавляется текст, а для больших объемов текста он слишком медленный.

Есть ли более эффективный способ добавления текста? Например, создание фиктивных дочерних тегов и установка их содержимого вместо добавления к родительскому тегу?

Answer 1

Отметьте презентацию и эту тоже: jQuery Anti-Patterns
И вообще:

• не .append () в цикле
• не добавляется непосредственно в DOM
• построить строку и затем добавить ее или использовать DocumentFragment
• не добавляются непосредственно в DOM

Answer 2

Используйте DOM DocumentFragments , чтобы добавить группу узлов, и взгляните на презентацию Николаса Закаса в режиме слайд-шоу "writing -ffective-javascript"

Answer 3

Когда я тестировал свой сайт, я заметил, что .innerHTML намного быстрее, чем методы добавления jQuery. Это устарело, и в будущих браузерах поддержка может ухудшиться. Тем не менее, атрибут bgcolor все еще работает, и я помню, как мне говорили, что он устарел около десяти лет назад. Не добавляйте сценарии с фрагментом html, так как они требуют eval'ing (jQuery делает это автоматически, что приводит к медленным временам, тогда как с innerHTML вы должны делать это вручную, если это необходимо). Eval очень медленный, не используйте его, если это возможно. Опять же, как упоминалось ранее, присоединение к массиву более эффективно, чем конкатенация строк. Используйте переменные, чтобы указать на узлы DOM (то есть var this = document.getElementById("YourDomNode"), а затем работать с this, где это необходимо, вместо повторения оператора document.getElementById). Объявление переменных вне функции позволяет им быть доступными из любой функции. Обратите внимание, что это скрипт на стороне клиента, поэтому значение переменной является уникальной ссылкой для каждого пользователя. Выполнение этих сильно повторяющихся строк может уменьшить размер файла в зависимости от того, что вы делаете. Если вам абсолютно необходимо загрузить встроенный JavaScript-код как часть фрагментов HTML, попробуйте следующее:

/* Call this section after appending to the dom with innerHTML */
var f = function() {runScripts(document.getElementById('newDOM_Section'));};
setTimeout(f,1);

/* Stick the following in your main .js file */
var stringScript
var f
function runScripts(element) {
    var scripts = element.getElementsByTagName("script"); 
    var intScriptsCount = scripts.length
        for (var i = 0; i < intScriptsCount; i++) { 
        stringScript = scripts[i].text
            setTimeout(stringScript, 1); 
        }

}

Приведенный выше код сделает изменения DOM видимыми до того, как все сценарии будут оценены. Это не многопоточность, поэтому будьте осторожны с его использованием. Гораздо лучше использовать атрибуты для обработчиков событий (onclick, onchange и т. Д.)

Наконец, прежде чем манипулировать элементом в dom, установите стиль для отображения: none, манипулируйте им, затем установите стиль обратно для отображения: inline (inline по умолчанию для некоторых общих элементов) или какой бы он ни был ранее.

Это просто быстрый умственный анализ некоторых использованных мною тактик, поэтому приветствуются любые высказывания / оскорбления плохой практики.

Answer 4

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