JavaScript: Добавление детей к элементу
Какая техника ниже лучше на основе пользовательского опыта?
В обоих примерах примите это thumbContainer установлен на возвращаемое значение document.getElementById('thumbContainer'), и new Thumbnail(thumb).toXMLString() возвращает строку с разметкой XHTML в нем.
A) Просто += с thumbContainer.innerHTML:
for (thumb in thumbnails) {
thumbContainer.innerHTML += new Thumbnail(thumb).toXMLString();
}
B) Или преобразование new Thumbnail(thumb).toXMLString() к элементам DOM и использованию appendChild?
for (thumb in thumbnails) {
var shell = document.createElement('div');
shell.innerHTML = new Thumbnail(thumb).toXMLString();
for (i = 0; i < shell.childElementCount; i++) {
thumbContainer.appendChild(shell.children[i]);
}
}
Я использовал обоих и получаю жалобы от Firefox, что у меня есть продолжительный сценарий, и я хочу остановить его?
Какой цикл менее непроницаем, который позволит UI обновлять, поскольку новые элементы добавляются к DOM?
2 ответа
A) Просто + = с thumbContainer.innerHTML
Никогда этого не делайте. Это должно сериализовать весь контент в HTML, добавить к нему строку и снова проанализировать все это. Это медленно (выполнение этого в цикле - особенно плохая новость), и он потеряет все ссылки JavaScript, обработчики событий и т. Д. .
IE insertAdjacentHTML сделает это более эффективно. Он также является частью HTML5, но пока еще широко не реализован в других местах.
с помощью appendChild?
Да, нормально. Если у вас есть много превью, он начнет работать медленно (но не так плохо, как каждый раз повторно обрабатывать innerHTML). Создание DocumentFragment для одновременной вставки нескольких элементов в список дочерних узлов контейнера может помочь в некоторых случаях. Комбинирование DocumentFragment с Range может сделать еще больше, но становится труднее писать совместимым образом, поскольку реализация IE Range такова, что StRange.
В любом случае, поскольку вы, похоже, ничего не делаете с отдельными узлами оболочки, почему бы просто не объединить все строки HTML-эскизов вместе перед синтаксическим анализом?
for (var child в shell.childNodes) {
Не используйте for..in в типах последовательности, это не будет делать то, что вы думаете. Он предназначен только для использования против объекта , используемого в качестве отображения. Правильный способ перебора Array или NodeList - старый добрый for (var i = 0; i
Лично мне больше нравится второй подход (использование appendChild), потому что вы добавляете новый элемент в дерево документа, не затрагивая старые элементы.
При использовании innerHTML += new content, вы затрагиваете старое содержимое, потому что весь HTML должен быть переназначен (заменен новым HTML, который содержит старый код и немного нового кода).
Но если вы хотите увеличить производительность, я бы предложил использовать DocumentFragments. С их помощью вы можете добавлять целый набор узлов всего одним вызовом appendChild в дереве документа. Стоит почитать: "DOM DocumentFragments" by John Resig, но это не тот случай в вашей проблеме, потому что вы получаете содержимое в виде строки, которую нужно сначала преобразовать в узлы DOM.
Мое второе предложение - создать строку HTML-кода и затем использовать innerHTML на временном контейнере, чтобы преобразовать ее в узлы DOM
var htmlCode = "";
for (thumb in thumbnails) {
htmlCode += new Thumbnail(thumb).toXMLString();
}
var element = document.createElement(htmlCode);
element.innerHTML = htmlCode; // ... and append all the elements to document, or thumbContainer.innerHTML += htmlCode;