Користь від documentFragment
| Пошук по форуму |
| Розширений пошук |
| До сторінки. |
Свого часу читав багато статей про documentFragment, але довго не міг зрозуміти, що в ньому реально крутий.
Через деякий час усвідомив, що нічого, але дещо є. Про це і поговоримо
Що таке documentFragment?
documentFragment - " фрагмент документа " найбільш близький за змістом до звичайного DOM-элементу.
Тобто його можна створити:
до нього можна додавати інші вузли.
Фішка полягає в тому, що коли documentFragment вставляється в DOM - він зникає, а замість нього вставляються його діти. Це єдина і основна властивість documentFragment в порівнянні з рештою всіх сутностей DOM.
Тобто можна додати в нього багато TD , а потім append до 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.
Але завдяки властивості розчинятися при вставці, documentFragment є унікальним, і його варто мати на увазі. Не завжди можна і зручно створювати справжній контейнер, а такий, тимчасовий - може дуже знадобитися.
Дякую за статтю, раніше не знав про фрагменти. Зараз швидко пройшовся пошуком по вихідниках jQuery - фрагменти використовуються досить активно. Так що можуприпустити, що під час використання jQuery можна не турбуватися про швидкість вставки елементів.
Щось у мене в хромі іноді перший бенчмарк (без фрагментів) швидше за другий
Привіт Спробував два тести. Обидва видали по 11. Що я мав побачити? Браузер - Chrome на Mac OS X.
Firefox 27, Pentium 4 3.06GHz. Невідкладний у середньому 19 мс. Відкладений у середньому 11 мс.
Обидва тести однаково перформують
можна з отриманого (наприклад ajax-ом) шматка html відразу отримати documentFragment