In che modo insertAdjacentHTML è molto più veloce di innerHTML?

About a month ago, Firefox 8 ha implementato il metodo insertAdjacentHTML, che è stato aggiunto a IE4 insieme a innerHTML. In base al benchmark this, insertAdjacentHTML è in genere un ordine di grandezza più veloce di innerHTML.In che modo insertAdjacentHTML è molto più veloce di innerHTML?

Suppongo che entrambi chiamino lo stesso parser HTML, quindi perché la differenza è così drammatica? insertAdjacentHTML è una semplice chiamata di metodo, mentre innerHTML è un getter/setter e probabilmente c'è un po 'di overhead per quello, ma non lo immaginerei mai.

fonte

2011-09-28 Peter C

Si noti che l'uso di 'appendChild' è molto più veloce di entrambi. Probabilmente perché non è necessario nessun parser. La differenza tra 'insertAdjacentHTML' e' innerHTML' sembra insignificante rispetto a 'appendChild'. Tuttavia, se è necessario analizzare la stringa html, 'appendChild' non sarà di grande aiuto. Ecco un JSperf dettagliato: http://jsperf.com/insertadjacenthtml-perf/28 – oriadam

work.innerHTML += "test"; è equivalente a work.innerHTML = work.innerHTML + "test";, vale a dire ogni volta che viene eseguito deve puntate tutti i contenuti esistenti di work e poi rianalizzare l'intero lotto, più l'arco supplementare.

work.insertAdjacentHTML("BeforeEnd", "test"); sta analizzando solo l'intervallo ogni volta e quindi allegando il frammento di documento piccolo al DOM.

fonte

2011-09-28 23:28:33 Alohci

Mi auguro che un buon browser ottimizzi 'work.innerHTML + =" test "' per aggiungere semplicemente 'innerHTML', proprio come il moderno i browser ottimizzano la concatenazione delle stringhe. Potrei sbagliarmi, ma sarebbe sorprendente se nessuno dei produttori di browser ci avesse pensato. –

Non è così facile. Il ciclo serialize/parse ha una serie di effetti collaterali, come la reimpostazione di alcune proprietà del nodo e il rilascio di gestori di eventi collegati dinamicamente. L'ottimizzazione richiederebbe che fossero replicati esattamente. I produttori di browser hanno cose migliori da fare. 'Element.innerHTML + = ...' è un anti-pattern che è facile da evitare nel codice JS. Basta non farlo. – Alohci

+1 ha senso. Non sono d'accordo con "e.innerHTML + = ..." essendo un antipattern. Ci sono alcuni usi validi che coinvolgono Ajax e non vedo perché sia dannoso (oltre ad essere lento) altrove. –

Il setter innerHTML deve rimuovere tutti i nodi figlio esistenti prima di aggiungerne di nuovi.

Non so se questo è l'unico motivo, ma questo è certamente un fattore.

fonte

2011-09-28 22:23:44 user123444555621

In che modo insertAdjacentHTML è molto più veloce di innerHTML?

risposta

Problemi correlati