Иронично, сред тези последователности има разлика. В повечето браузъри, втората опция - по-бързо.

Защо е така? Понякога те казват: "защото браузъра очертава нови всеки път, когато добавите елемент". Това не е така. Въпросът не е да се преначертае.

достатъчно Browser "умен", така че нищо не се губи и пречертаването. В повечето случаи процесът на преначертаване и свързаните с изчисления ще бъде отложено до края на сценария, и в момента е абсолютно никаква разлика, единици са променени в каква последователност.

Въпреки това, когато поставите възел появят различни вътрешни събития и новини вътрешни структури от данни, които са скрити от очите ни.

Какво точно се случва - това зависи от конкретния, вътрешната изпълнението на браузъра DOM, но това отнема време. Разбира се, браузъри се развиват и да се опитват да намалят допълнителни стъпки до минимум.

За да проверите текущото състояние на нещата - това е два база за сравнение.

И двамата създаде таблица 20x20, пълнене TBODY елементи TR / TD.

В този случай, първите вложки всичко в документа веднага, а вторият - TBODY забавяне вмъкнете в документа преди края на процеса.

Кликнете, за да започне.

за тестване на кода е да поставите-bench.js файл.

Ние ще продължим да работим с обекти за поставяне.

Да разгледаме случая, когато документът вече разполага с голям списък на UL. След спешна нужда да добавите още 20 LI елементи.

Как да го направя?

Ако нови елементи идват под формата на линия, можете да се опитате да ги добавите, както следва:

Но операцията ul.innerHTML + = "." Може да се по различен начин пренаписана като ul.innerHTML = ul.innerHTML + ".". С други думи, той не добавя към, и замества цялото съдържание на списъка с добавка на линия. Това не е добре от гледна точка на производителност, но също така ще бъде странични ефекти. По-специално, всички външни ресурси (снимки) в презаписваем innerHTML ще бъдат заредени отново. Ако някои променливи са препратки към елементите в списъка - те ще бъде погрешно, тъй като съдържанието е изцяло подменен. Като цяло, това е по-добре да не правим.

А ако искате да вмъкнете в средата на списъка? Тук innerHTML не помага.

Можете, разбира се, за да вмъкнете ред във временен DOM-елемент и премествате елементи, но има много по-добър вариант: метода insertAdjacentHTML!

метод insertAdjacentHTML позволява да вмъкнете произволна HTML навсякъде в документа, включително и тези между възлите!

Тя се поддържа от всички браузъри освен Firefox версия 8 по-малко, добре, там е възможно да се подражава.

HTML HTML низ, който искате да поставите

където: Къде във връзка с ELEM вмъкнете ред. Има четири варианта:

Например можете да поставите в списъка на липсващите елементи, преди

Единственият недостатък на този метод - той не работи в Firefox до версия 8. Но това може лесно да се добавят с помощта polifill insertAdjacentHTML за Firefox.

Този метод има "близнаци", които се поддържат навсякъде, с изключение на Firefox, но при него те са добавени в една и съща polifillom:

• elem.insertAdjacentElement (където, newElem) - вложки в произволно място не е HTML низ и newElem елемент.
• elem.insertAdjacentText (където, текст) - създава текстов възел от текстовият низ и го вмъква в определено място по относителен ELEM.

В синтаксиса на тези методи, с изключение на последния параметър е идентичен с insertAdjacentHTML. Заедно те образуват "гъвкав швейцарски армейски нож" за поставяне на всичко и навсякъде.

Важно е за по-стари браузъри

Оптимизация, която е под въпрос, е важно преди всичко за по-стари браузъри, включително IE9-. В съвременните браузъри ефект от него е обикновено малки и понякога може да е отрицателна.

Преди това, ние говорихме за реда се вмъква в DOM. И какво да направя, когато това е необходимо, за да вмъкнете в съществуваща UL много DOM-елементи?

Можете да ги поставите един по един, наричайки insertBefore / appendChild. но в същото време получаваме много сделки с голям дневен документ.

Поставете купчина единици по едно и също време от помощ DocumentFragment. Това е специална различни браузъри, обектът DOM, което изглежда като обикновен на DOM-възел, но това не е така.

Синтаксисът за създаването му:

DocumentFragment нямат общ свойства DOM възли като innerHTML. име на маркер и т.н. Това не е възел.

Неговата "Chip" е, че когато се вмъква в DOM на DocumentFragment - тя изчезва и се вмъкват децата си вместо това. Този имот е уникална характеристика на DocumentFragment.

Например, ако добавите много LI. и след това да причини ul.appendChild (фрагмент). фрагментът се разтваря и DOM да поставите LI. И в същия ред, в който сте били във фрагмента.

В съвременните браузъри ефект на такава оптимизация може да бъде различен, но в малки инструменти понякога отрицателен.

Разбиране на сегашното състояние на нещата, които могат като изпълните следната малка бенчмарка.

Сравнително наскоро се появи в стандартните методи, които ви позволяват да поставите всичко и навсякъде.

• node.append (възли.) - вложки възли на крайната точка,
• node.prepend (възли.) - вложки възли към горния възел,
• node.after (възли.) - възли след възел вмъква възел,
• node.before (възли.) - вмъква възли преди възел възел,
• node.replaceWith (възли.) - вмъква възли вместо на възела.

Тези методи не се връщат.

Във всички тези методи възли - DOM-възлови точки или линии, във всяка комбинация и количество. И редовете са вкарани точно както текстови възли, за разлика от insertAdjacentHTML.

Пример (и polifillom):

Манипулации променящите DOM структура (вмъкване, изтриване елементи) обикновено по-бързо с малък индивид възел с повече от DOM, което е в документа са.

Специфичната разликата зависи от вътрешната изпълнението на браузъра DOM.

Семейството на методи, за да вмъкнете HTML / т / текст на произволно място в документа:

• elem.insertAdjacentHTML (където, HTML)
• elem.insertAdjacentElement (където възел)
• elem.insertAdjacentText (където, текст)

Последните два метода не се поддържат в Firefox, към момента на написването на текста, но има малък polifill insertAdjacentFF.js. което ги добавя. Разбира се, необходимо е само за Firefox.

DocumentFragment да се намали броят на вложки в голям дневен DOM. Тази оптимизация е особено ефективно в по-стари браузъри, нови ефекти от по-малко отрицателни, или обратно.

Първите елементи вкарани в нея, а след това - тя се вмъква в DOM. Когато поставите DocumentFragment «разтваря" и вместо да вмъква в нея се съдържа единици.

DocumentFragment. За разлика от insertAdjacent *. работа с колекция от DOM-възел.

Съвременните методи за работа с неограничен брой възли и текстът се желаните polifill:

• добавяне / сравнява първите - поставете в края / началото.
• преди / след - поставете преди / след.
• replaceWith - подмяна.

Напиши код за вмъкване на текст HTML към края на списъка, използвайки метод ул insertAdjacentHTML. Това вмъкване, за разлика от възлагане innerHTML + =. Тя няма да замени текущото съдържание.

Добави в списъка с елементи, по-долу

Редове в таблицата са много: той може да бъде 20, 50, 100 ... Има и други елементи в документа.

Как да направите сортиране работа възможно най-бързо? И ако в таблицата 10000 линии (и това се случва)?

Послепис Може да помогне DocumentFragment тук?

За да сортирате функция ще ни помогне да сортирате масива.

Общата идея е очевидна: да направи поредица от редове и го оправи. Тънкостите са обхванати в подробности.

В ifreyme долу зареден документ, описващ и прилагане на различни алгоритми. Забележка: разликата в производителността може да достигне няколко пъти!

Послепис Създаване DocumentFragment не са добри. Можете да се изтеглят от документа за TBODY и да се справят с него в изолация от DOM (алгоритъм 4).

P.P.S. Ако искате да направите много единици, обикновено е innerHTML е по-бързо от изтриване и вмъкване на елементи чрез Задморски повиквания. Това означава, че за повторно генериране на таблицата по-ефективно.