W jaki sposób insertAdjacentHTML jest o wiele szybszy od innerHTML?

About a month ago, Firefox 8 zaimplementował metodę insertAdjacentHTML, która została dodana do IE4 wraz z innerHTML. Zgodnie z testem porównawczym this wstawianie sąsiedniego HTMLa jest zwykle o rząd wielkości szybsze niż innerHTML.W jaki sposób insertAdjacentHTML jest o wiele szybszy od innerHTML?

Zakładam, że oba wywołują ten sam parser HTML, więc dlaczego ta różnica jest tak dramatyczna? insertAdjacentHTML to proste wywołanie metody, podczas gdy innerHTML to getter/setter i prawdopodobnie jest to trochę zbyteczne, ale nigdy bym tego nie wyobraził.

Źródło

2011-09-28 Peter C

Należy zauważyć, że użycie 'appendChild' jest znacznie szybsze niż oba. Prawdopodobnie dlatego, że nie jest potrzebny żaden analizator składni. Różnica między 'insertAdjacentHTML' i' innerHTML' wydaje się być nieistotna w porównaniu do 'appendChild'. Jednakże, jeśli potrzebujesz parsować ciąg html, 'appendChild' nie pomoże wiele. Oto szczegółowy JSperf: http://jsperf.com/insertadjacenthtml-perf/28 – oriadam

jest odpowiednikiem work.innerHTML = work.innerHTML + "<span>test</span>";, tj. Za każdym razem, gdy działa, musi serializować całą istniejącą zawartość work, a następnie przeprowadzić ponowny montaż całej partii plus dodatkowy zakres.

parsuje tylko jedną rozpiętość za każdym razem, a następnie dołącza mały fragment dokumentu do DOM.

Źródło

2011-09-28 23:28:33 Alohci

Mam nadzieję, że dobra przeglądarka zoptymalizuje 'work.innerHTML + =" test "' po prostu dopisze 'innerHTML', podobnie jak nowoczesne przeglądarki optymalizują konkatenację ciągów. Mogę się mylić, ale byłoby to zaskakujące, gdyby żaden z dostawców przeglądarek nie pomyślał o tym. –

To nie takie proste. Cykl szeregowania/analizowania ma wiele efektów ubocznych, takich jak resetowanie niektórych właściwości węzła i upuszczanie dynamicznie dołączanych procedur obsługi zdarzeń. Optymalizacja wymagałaby dokładnej replikacji. Producenci przeglądarek mają lepsze rzeczy do robienia. 'Element.innerHTML + = ...' jest wzorcem zapobiegającym, którego łatwo uniknąć w kodzie JS. Po prostu tego nie rób. – Alohci

+1 Ma sens. Nie zgadzam się jednak z 'e.innerHTML + = ...' stanowiącym antepattern. Jest kilka ważnych zastosowań z udziałem Ajax i nie rozumiem, dlaczego jest to szkodliwe (pomijając powolność) w innym miejscu. –

Seter innerHTML będzie musiał usunąć wszystkie istniejące węzły potomne przed dodaniem nowych.

Nie wiem, czy to jedyny powód, ale to z pewnością czynnik.

Źródło

2011-09-28 22:23:44 user123444555621

W jaki sposób insertAdjacentHTML jest o wiele szybszy od innerHTML?

Odpowiedz

Powiązane problemy