Предимства на documentFragment
| Търсене във форума |
| подробно търсене |
| Към страницата. |
По едно време прочетох много статии за documentFragment, но дълго време не можех да разбера какво наистина е готино в него.
След известно време разбрах, че нищо, но нещо е. Нека поговорим за това
Какво е documentFragment?
documentFragment - "фрагмент от документ" е най-близък по смисъл до обикновен DOM елемент.
Тоест можете да го създадете:
към него могат да се добавят други възли.
Номерът е, че когато документен фрагмент се вмъкне в DOM, той изчезва и вместо това се вмъкват неговите деца. Това е единственото и основно свойство на documentFragment в сравнение с всички други DOM обекти.
Тоест можете да добавите много TD към него и след това да добавите към TR. В този случай фрагментът ще се разтвори и TD ще бъдат вмъкнати като директни наследници.
Кога и защо е необходим documentFragment?
Връщане на набор от възли от функция
Първият случай на използване на documentFragment е при връщане на множество възли от функция. Можете да направите това, като върнете масив или можете да върнете documentFragment:
След това външната функция може да го вмъкне в DOM или да го използва допълнително без намеса на масиви.
Бързо вмъкване в DOM
Това е може би най-важният случай.
Да кажем, че трябва да създадем куп TR елементи и да ги вмъкнем в DOM.
Първият начин е да ги създадете и поставите. И така n пъти.
Но вмъкването в "живия" DOM е скъпо. Тук на помощ идва documentFragment. Можете да го вмъкнете в него и едва след това да го добавите към DOM.
Скоростта обаче ще бъде различна.
Всъщност няма значение дали го използвате като отделен DOMконтейнер documentFragment или нещо друго.
Важно е междинните вмъквания да влизат в DOM, откъснат от живия документ.
Например, ето два бенчмарка.
И двамата създават таблица 10x10 чрез попълване на TBODY с TR/TD елементи.
В този случай първият вмъква всичко в документа точно там, вторият забавя вмъкването на TBODY в документа до края на процеса.
Кликнете, за да стартирате.
Какво общо има documentFragment с това? И нищо общо с това! Вместо това може да бъде всеки възел, но documentFragment понякога е удобен поради свойството си да се разтваря при вмъкване.
Тоест, когато е неудобно да се направи междинен контейнерен възел, например, когато се добавя много TR, зареден от сървъра. Вместо n извиквания за appendChild в DOM на живо, имаме само 1 извикване, което може да доведе до същите спестявания като в сравнителните тестове по-горе.
Клониране на възли
documentFragment има метод cloneNode, т.е. може да се клонира заедно с всички възли.
Това също може да бъде удобно (1 извикване вместо n), но отново - няма значение какво да клонирате - обикновен възел извън DOM или documentFragment.
Удобството на documentFragment е, че той ще изчезне, когато бъде вмъкнат в документа. Обикновено това е полезно в таблици, мрежи и други подобни.
Един фрагмент от документ не оптимизира нищо сам по себе си, не е по-бърз от обикновения документ.
Оптимизацията се състои именно в това, че всички действия се извършват извън DOM.
Но благодарение на свойството dissolve on insertion, documentFragment е уникален и си струва да се има предвид. Не винаги е възможно и удобно да се създаде истински контейнер, но такъв временен може да бъде много полезен.
Благодаря за статията, не знаех за фрагменти преди. Направих бързо търсене в източниците на jQuery - фрагментите се използват доста активно. Могапредполагат, че когато използвате jQuery, не е нужно да се притеснявате за скоростта на вмъкване на елементи.
Нещо в моя хром понякога първият бенчмарк (без фрагменти) е по-бърз от втория
Здравей Изпробвах два теста. И двамата дадоха 11. Какво трябваше да видя? Браузър - Chrome на Mac OS X.
Firefox 27, Pentium 4 3,06 GHz. Неотложено средно 19ms. Закъснение със средно 11ms.
И двата теста изпълняват еднакво
можете веднага да получите documentFragment от полученото (например ajax) парче html