Többszörös insertadjacentes és dokumentumfragment
Furcsa módon van különbség a szekvenciák között. A legtöbb böngészőben a második lehetőség gyorsabb.
Miért van ez? Néha azt mondják: "mert a böngésző minden egyes elem hozzáadásakor redisztál." Ez nem így van. Nem arról van szó, hogy újraterveznék.
A böngésző elég okos ahhoz, hogy semmit se lehet szükségtelenül újrafesteni. A legtöbb esetben a festés és a számítási számítás késleltetésre kerül, amíg a szkript befejeződik, és abban az időben teljesen megváltozik, hogy a csomópontok mely sorrendben változtak.
A csomópont beillesztésekor azonban különböző belső események és frissítések találhatók a szemünk elől rejtett belső adatszerkezetekre.
Ami pontosan ez, a DOM sajátos belső böngésző implementációjától függ, de időbe telik. Természetesen a böngészők fejlődnek, és megpróbálják minimalizálni a felesleges intézkedéseket.
A helyzet jelenlegi állapotának könnyű áttekintése - itt van két referenciaérték.
Mindkettő létrehoz egy 20x20-as táblázatot, TBODY betöltésével TR / TD elemekkel.
Ebben az esetben az első mindent beillesz a dokumentumba, a második - késlelteti a TBODY beillesztését a dokumentumba a folyamat végéig.
Kattintson a gombra.
A tesztek kódja a file insert-bench.js fájlban található.
Továbbra is dolgozunk a csomópontok beillesztésével.
Tekintsük azt az esetet, amikor a dokumentumnak már van egy nagy listája az UL-kről. Aztán sürgősen hozzá kellett adni 20 további LI elemet.
Hogyan kell ezt csinálni?
Ha az új elemek egy karakterlánc formájában jönnek létre, próbálhatja meg őket így:
De az ul.innerHTML + = "." Művelet más úton is átírható, mint ul.innerHTML = ul.innerHTML + "." Más szóval, nem adja hozzá, hanem kiegészíti a lista teljes tartalmát egy bővített vonallal. Ez nem jó a teljesítmény szempontjából, de mellékhatások lesznek. Különösen az újraírható internalHTML belsejében lévő összes külső erőforrás (kép) újra betöltődik. Ha egyes változókban vannak linkek a listaelemekhez - helytelenek lesznek, mivel a tartalmat teljesen kicserélik. Általában jobb, ha nem.
És ha be kívánja illeszteni a listán a közepére? Itt a innerHTML egyáltalán nem segít.
Természetesen beilleszthet egy sort egy ideiglenes DOM elembe, és onnan átviheti az elemeket, de van egy sokkal jobb lehetőség: a insertAdjacentHTML módszer!
A insertAdjacentHTML módszer lehetővé teszi tetszőleges HTML beillesztését bárhol a dokumentumban, beleértve a csomópontok között is!
Ezt minden böngésző támogatja, kivéve a Firefoxot, mint a 8-as verziót. Nos, ott emulálható.
html A beszúrandó HTML-karakterlánc
ahol: ahol a elemet beilleszteni egy sztringet. Csak négy lehetőség közül választhat:
Például illessze be a lista hiányzó elemeit
Ennek a módszernek az egyetlen hátránya, hogy nem működik a Firefoxban a 8. verzió előtt. De könnyen hozzáadható a insertAdjacentHTML polifónikus Firefoxhoz.
Ez a módszer "ikertestvérekkel" rendelkezik, amelyek mindenhol támogatottak, kivéve a Firefoxot, de benne ugyanazt a polifillát:
- elem.insertAdjacentElement (ahol, newElem) - tetszőleges helyre illeszt be, nem egy HTML-sorozatot, hanem egy új elemet.
- elem.insertAdjacentText (ahol, szöveg) - létrehoz egy szöveges csomópontot a szöveges karakterláncból, és beilleszti a megadott helyre az elemhez képest.
E módszerek szintaxisa, az utolsó paraméter kivételével, pontosan ugyanaz, mint a insertAdjacentHTML. Együtt "univerzális svájci kést" alkotnak, bárhol bárhová beilleszteni.
Fontos a régebbi böngészők számára
Az optimalizálás, amelyet itt tárgyalunk, elsősorban a régebbi böngészőkre, köztük az IE9- -re is fontos. A modern böngészőkben a hatása általában csekély, és néha negatív lehet.
Ezt megelőzően arról beszéltünk, hogy egy sor beillesztése a DOM-ba. És mit kell tennem, ha sok DOM elemet be kell illeszteni egy meglévő UL-be?
Beszúrhatja őket egyenként a insertBefore / appendChild felhívásával. de ez sok műveletet eredményez egy nagy élő dokumentummal.
Egy csomócsomó beillesztése egyszerre segít a DocumentFragmentnek. Ez egy speciális cross-browser DOM-objektum, amely hasonló a normál DOM-csomóponthoz, de ez nem így van.
A létrehozás szintaxisa:
A DocumentFragment nem rendelkezik a DOM csomópontok szokásos tulajdonságaival, például a innerHTML. tagName és hasonlók. Ez nem csomó.
A "funkció" az, hogy amikor a DocumentFragment be van helyezve a DOM-ba, eltűnik, és helyette a gyerekeket helyezi be. Ez a tulajdonság a DocumentFragment egyedülálló tulajdonsága.
Például, ha hozzá sok LI. majd hívja az ul.appendChild (töredék) nevet. akkor a fragmentum feloldódik, és a DOM pontosan LI-t helyez be. és ugyanabban a sorrendben, amelyben a töredékben voltak.
A modern böngészőkben az ilyen optimalizálás hatása eltérő lehet, és a kis dokumentumok esetében néha negatív.
Meg tudja érteni a dolgok aktuális állapotát a következő kis benchmark futtatásával.
Újabban a szabvány olyan módszereket vezetett be, amelyek lehetővé teszik, hogy bármit és bármit beilleszthessenek.
- node.append (.csomópontok) - a csomópontokat beilleszti a végső csomópontba,
- node.prepend (.csomópontok) - beilleszt egy csomópontot a kezdő csomópontba,
- node.after (.csomópontok) - csomópontok beillesztése a csomópont csomópontja után,
- node.before (.csomópontok) - a csomópont csomópontjainak beillesztése előtt,
- node.replaceWith (.csomópontok) - a csomópont helyett csomópontokat helyez be.
Ezek a módszerek nem adnak vissza semmit.
Mindezen módszereknél a csomópontok DOM csomópontok vagy húrok, bármilyen kombinációban és számban. És a sorok pontosan úgy vannak beillesztve, mint szöveges csomópontok, ellentétben a insertAdjacentHTML-el.
Példa (polifillal):
Az olyan manipulációk, amelyek megváltoztatják a DOM struktúráját (beillesztés, elemek törlése), általában gyorsabbak egy külön csomóponttal, mint egy nagy DOM-ban, amely a dokumentumban található.
A pontos különbség a böngészőben a DOM belső végrehajtásától függ.
A HTML / elem / szöveg tetszőleges helyre történő beillesztésére szolgáló eljárások családja:
- elem.insertAdjacentHTML (ahol, html)
- elem.insertAdjacentElement (ahol, csomópont)
- elem.insertAdjacentText (ahol, szöveg)
Az utolsó két módszer nem támogatott a Firefoxban, az írás idején, de van egy kis polifilus insertAdjacentFF.js. amely hozzáadja őket. Természetesen csak a Firefox szükséges.
A DocumentFragment lehetővé teszi, hogy minimálisra csökkentsük a betétek számát egy nagy élő DOM-ban. Ez az optimalizálás különösen hatékony a régebbi böngészőkben, az újaknál a hatás kevésbé, vagy fordítva negatív.
Az elemeket először beillesztik, majd - beillesztik a DOM-ba. Amikor beszúr egy dokumentumfragmentet, akkor "feloldódik", és a csomópontok beillesztésre kerülnek.
DocumentFragment. ellentétben az InsertAdjacent * opcióval. működik DOM csomópontok gyűjteményével.
A modern módszerek, bármilyen csomóponttal és szöveggel együtt dolgozni kívánatos polifill:
- append / prepend - beillesztés a befejezéshez / induláshoz.
- előtt / után - beillesztés előtt / után.
- replaceWith - csere.
Írja be a kódot a html szöveg beillesztéséhez az ul list végén a insertAdjacentHTML módszerrel. Egy ilyen beillesztés, ellentétben a innerHTML + = hozzárendelésével. Ne felülírja az aktuális tartalmat.
Elemek hozzáadása a listához
A táblázat sorai sokak: talán 20, 50, 100 ... A dokumentumban vannak más elemek is.
Hogyan válogathat a válogatás a lehető leggyorsabban? És ha 10 000 sor van a táblázatban (és néha ez is)?
Ui A DocumentFragment itt segíthet?
A rendezéshez a tömb rendezési funkciója segít.
Az általános elképzelés a felszínen rejlik: sorozatot készít és sorba rendezi. A részletekben rejlik a finomság.
Az alábbiakban különféle algoritmusokat leíró és végrehajtó dokumentum betöltődik. Felhívjuk figyelmét, hogy a teljesítménykülönbség többször is elérhet!
Ui Itt hozhat létre dokumentumfragmenst. A TBODY dokumentumból ki lehet húzni és a DOM-tól (4. algoritmus) elkülönítve kezelni.
P.P.S. Ha több csomópontot kell létrehoznia, akkor a innerHTML általában gyorsabban működik, mint az elemek törlésével és beillesztése a DOM hívásokon keresztül. Azaz a táblázat hatékonyabban regenerálódik.