создать/добавить узел vs innerHTML

Question

У кого-нибудь есть веская причина использовать один над другим? Насколько я могу судить, создание/добавление узла просто мешает вам создавать недопустимый код, в то время как innerHTML позволяет вводить сразу несколько узлов.

Учитывая, что мне нужно вставить несколько тегов, кажется, имеет смысл использовать innerHTML. Кто-нибудь другой?

Answer 1

Это всегда спорный аргумент, отчасти потому, что происхождение innerHTML быть несколько сомнительно из стандартов перспектива. Я думаю, что статья QuirksMode по-прежнему актуальна, но мне бы хотелось увидеть ее обновленную. Возможно, contactppk об их обновлении, хотя я уверен, что он занят. Мы могли бы извлечь выгоду из тестирования производительности предположений, которые мы делаем в веб-разработке. В конце концов претензии требуют жестких данных, чтобы доказать, в противном случае это действительно просто разговоры.

В любом случае, я искал и нашел интересные статьи, относящиеся к этой дискуссии. Я еще не помню, как слышал о DocumentFragments, они действительно интересны.

• DOM DocumentFragments
• jQuery Performance Rules
• Improve your jQuery - 25 excellent tips
• Speed test: innerHTML versus DOM manipulation... тест, который на самом деле тестирует скорость, стоит для тех, кто хочет, чтобы собрать некоторые текущие данные о браузерах

Answer 2

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

Answer 3

Это зависит от цели.

Использование методов DOM для вставки html в документ позволит вам дополнительно манипулировать этими элементами до и после их вставки.

Answer 4

Разница в создании узлов через DOM стандартизирована, но innerHTML является просто стандартом де-факто. Я читал, что innerHTML может быть быстрее.

Еще лучшей альтернативой является использование библиотеки jQuery для манипуляции с DOM. Он позаботится о большинстве несовместимости между браузерами и будет более читабельным, чем использование методов DOM.

Answer 5

Если производительность имеет значение, это хорошо, чтобы знать, что innerHTML относительно быстро, особенно в MSIE: http://www.quirksmode.org/dom/innerhtml.html

Однако она имеет плохой образ первоначально быть «собственностью Microsoft» собственность и/или на самом деле не «OO ».

Answer 6

Учитывая, что мне нужно вставить несколько тегов, кажется, имеет смысл использовать innerHTML.

Только «несколько»? Тогда скорость не проблема. Это когда вы создаете сто, вам нужно подумать о том, что вы делаете. На самом деле это не проблема создания, это манипуляция списком дочерних узлов, которая становится все медленнее и медленнее, когда вы добавляете каждый дополнительный элемент.

Что касается добавления, у вас действительно нет выбора. Вы не можете установить innerHTML без потери существующего контента, поэтому, если вы не довольны сериализацией и повторным анализом (который уничтожает любые несериализуемые данные, такие как содержимое формы, свойства/ссылки JavaScript и обработчики событий), вы оказываетесь устанавливая внутреннийHTML другого элемента и перемещая каждый ребенок по одному за другим. Это то, что делают многие фреймворки, и обычно это заканчивается даже медленнее, чем ручной create-and-appendChild.

В зависимости от вашей ситуации (в частности: сколько дочерних узлов уже находится в целевом элементе и сколько их вы собираетесь добавить?), Можно быстрее разбить операцию на меньшие манипуляции на DocumentFragment, чьи дети может быть добавлено к детям элемента за один раз, а не один за другим. Это намного быстрее. К сожалению, невозможно установить innerHTML на DocumentFragment.

Могут также быть более быстрые хаки с использованием объектов Range, чтобы сразу перемещать нагрузку HTML, но, к сожалению, диапазоны имеют перекрестную перекрестную переменную. Мне кажется, что кто-то должен иметь возможность быстро создать append-html из IE range.pasteHTML и W3's range.extractContents. Кто-нибудь за это?

Насколько я могу сказать, создать/добавить узел просто мешает вам создать недопустимый код

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

element.innerHTML= '<a href="'+url+'">'+title+'</a>'; 

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

Вы можете, конечно, пойти на компромисс, создав элементы и установив их содержимое отдельными шагами. Например:

element.innerHTML= '<table>'+'<tr><td>X</td><td><a href="#">go</a></td></tr>'.repeated(urls.length)+'</table>'; 
for (var i= 0; i<urls.length; i++) { 
    var row= element.firstChild.rows[i]; 
    row.cells[0].firstChild.data= urls[i]; 
    row.cells[1].firstChild.href= urls[i]; 
} 

(string.repeated не является стандартным JavaScript, но его использование здесь очевидно.)

Answer 7

DOM MANIPULATION - ПУТЬ БЫСТРО, ЕСЛИ ВЫ ИСПОЛЬЗУЕТЕ ЭТОТ ТРИК !.

Это медленно:

var target = document.getElementById('whatever'); 
for (a = 0; a<10000; a++) { 
var newnode = document.createElement('div'); 
newnode.textContent = a; 
target.appendChild(newnode) } 

Это быстро:

var target = document.createElement('span') 
for (a = 0; a<10000; a++) { 
var newnode = document.createElement('div'); 
newnode.textContent = a; 
target.appendChild(newnode) } 
document.getElementById('whatever').appendChild(target); 

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

Второй пример добавляет вновь созданные узлы к узлу «буфер», который не находится внутри области тела, поэтому обновление не производится до тех пор, пока вы не разместите буферный узел внутри области тела. Попробуй сам!.