Javascript.RU

Польза от documentFragment

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/multi-insert.

В свое время читал много статей о documentFragment, но долго не мог понять, что в нем реально крутого.

Через некоторое время осознал, что ничего, но кое-что есть. Об этом и поговорим

documentFragment - "фрагмент документа" наиболее близок по смыслу к обычному DOM-элементу.

То есть, его можно создать:

var fragment = document.createDocumentFragment()

в него можно добавлять другие узлы.

fragment.appendChild(node)

Фишка заключается в том, что когда documentFragment вставляется в DOM - то он исчезает, а вместо него вставляются его дети. Это единственное и основное свойство documentFragment по сравнению со всеми остальными сущностями DOM.

То есть, можно добавить в него много TD, и потом append к TR. При этом фрагмент растворится и вставятся именно TD как прямые потомки.

Первый случай, когда documentFragment применим - это возврат множества узлов из функции. Можно это сделать возвращением массива, а можно вернуть documentFragment:

function makeRow() {
  var fragment = document.createDocumentFragment()
  var td_1 = document.createElement('TD')
  
  fragment.appendChild(td_1)
  ...
  fragment.appendChild(td_n)

  return fragment
}

Затем внешняя функция может вставить его в DOM или использовать далее без промежуточных массивов.

Это, пожалуй, самый важный случай.

Допустим, нам нужно создать пачку элементов TR и вставить их в DOM.

Первый способ - создавать их и вставлять. И так n раз.

Но операция вставки в "живой" DOM дорогая. И тут на помощь приходит как раз documentFragment. Можно вставлять в него, а уже потом его добавить в DOM.

При этом скорость будет отличаться.

Совершенно не важно, используете ли вы в качестве оторванного от DOM контейнера documentFragment или что-то другое.

Важно, что промежуточные вставки идут в оторванный от живого документа DOM.

Например, вот два бенчмарка.

Оба они создают таблицу 10x10, наполняя TBODY элементами TR/TD.

При этом первый вставляет все в документ тут же, второй - задерживает вставку TBODY в документ до конца процесса.

Кликните, чтобы запустить.

/* appends elements right after creation */
appendFirst = new function() {
  var benchTable
  
  this.setup = function() {
    benchTable = document.getElementById('bench-table')
    while(benchTable.firstChild) { benchTable.removeChild(benchTable.firstChild) }
  }
  this.work = function() {
    var tbody = document.createElement('TBODY')

    benchTable.appendChild(tbody)

    for(var i=0; i<10; i++) {
      var tr = document.createElement('TR')
      tbody.appendChild(tr)
      for(var j=0; j<10; j++) {
        var td = document.createElement('td')
        td.appendChild(document.createTextNode(''+i+j))
        tr.appendChild(td)
      }      
    }
  }
  
}

/* appends elements right after creation
BUT wrapping tbody appended late */
appendLast = new function() {
  var benchTable
  
  this.setup = function() {
    benchTable = document.getElementById('bench-table')
    while(benchTable.firstChild) { benchTable.removeChild(benchTable.firstChild) }
  }
  this.work = function() {
    var tbody = document.createElement('TBODY')


    for(var i=0; i<10; i++) {
      var tr = document.createElement('TR')
      tbody.appendChild(tr)
      for(var j=0; j<10; j++) {
        var td = document.createElement('td')
        tr.appendChild(td)
        td.appendChild(document.createTextNode(''+i+j))
      }      
    }
    
    benchTable.appendChild(tbody)
  }
  
}

При чем же здесь documentFragment? А не при чем! Вместо него может быть любой узел, но иногда удобен именно documentFragment из-за своего свойства растворяться при вставке.

То есть, когда неудобно делать промежуточный узел-контейнер, например при добавлении множества TR, подгруженных с сервера. Вместо n вызовов appendChild в живой DOM имеем только 1 вызов, это может дать экономию такую же как в бенчмарках выше.

У documentFragment есть метод cloneNode, т.е. его можно клонировать вместе со всеми узлами.

Это также бывает удобно (1 вызов вместо n), но опять же - нет разницы, что клонировать - обычный узел вне DOM или documentFragment.

Удобство documentFragment лишь в том, что при вставке в документ он исчезнет. Как правило, это полезно в таблицах, гридах и т.п.

Фрагмент документа ничего не оптимизирует сам по себе, он не быстрее обычного документа.

Оптимизация заключается именно в том, что все действия делаются вне DOM.

Но благодаря свойству растворяться при вставке, documentFragment уникален, и его стоит иметь в виду. Не всегда можно и удобно создавать настоящий контейнер, а такой, временный - может очень даже пригодиться.


Автор: Дмитрий23 (не зарегистрирован), дата: 27 октября, 2010 - 19:03
#permalink

Спасибо за статью, раньше не знал про фрагменты.
Сейчас бегло прошёлся поиском по исходникам jQuery - фрагменты используются довольно активно. Так что могу предположить, что при использовании jQuery можно не беспокоиться о скорости вставки элементов.


Автор: Бирюков Павел (не зарегистрирован), дата: 4 ноября, 2010 - 18:38
#permalink

В тексте, который ниже бенчмарка три раза повторяется одно и то же. Прошу прощения, что комментарий не по сути.


Автор: cranx, дата: 18 октября, 2012 - 11:28
#permalink

Что-то у меня в хроме иногда первый бенчмарк (без фрагментов) быстрее второго


Автор: Александр Аникин (не зарегистрирован), дата: 3 июня, 2013 - 11:03
#permalink

Привет
Попробовал два теста. Оба выдали по 11. Что я должен был увидеть?
Браузер - Chrome на Mac OS X.

Спасибо.


Автор: Гость (не зарегистрирован), дата: 15 марта, 2014 - 15:55
#permalink

Firefox 27, Pentium 4 3.06GHz.
Неотложенный в среднем 19 мс.
Отложенный в среднем 11 мс.


Автор: Гость (не зарегистрирован), дата: 22 мая, 2014 - 12:31
#permalink

Chrome 34.0.1847.137

Оба теста одинаково перформят


Автор: Анонимоус (не зарегистрирован), дата: 9 августа, 2014 - 01:41
#permalink

можно из полученного (например ajax-ом) куска html сразу получить documentFragment

var range = document.createRange();
range.selectNode(document.body);
var df = range.createContextualFragment( responsedHtml );

Автор: aksdkjhasd (не зарегистрирован), дата: 17 октября, 2015 - 14:24
#permalink

Непосредственная - 5
Отложенная - 4

Firefox на OS X - MacBook Pro


Автор: superD (не зарегистрирован), дата: 26 апреля, 2016 - 23:39
#permalink

Google Chrome на OS X Mavericks:

Непосредственная - 6
Отложенная - 3


Автор: Гость (не зарегистрирован), дата: 27 августа, 2019 - 09:30
#permalink

подгруженных с сервера. Вместо n вызовов appendChild в живой DOM имеем только 1 вызов, это может дать экономию такую же как в бенчмарках выше. happy wheels


Автор: patsm00re18 (не зарегистрирован), дата: 7 октября, 2019 - 15:12
#permalink

I like this site it’s a master piece! Glad I noticed this on google. six game pc


Автор: Dree (не зарегистрирован), дата: 22 июня, 2020 - 11:52
#permalink

а вместо него вставляются его дети. Это единственное и основное свойство documentFragment по сравнению со всеми остальными сущностями DOM. Game online moto x3m


Автор: pikachu chu (не зарегистрирован), дата: 14 августа, 2020 - 12:42
#permalink

You’ve written nice post, I am gonna bookmark this page, thanks for info. I actually appreciate your own position and I will be sure to come back here. Thanks. paper io 2


Автор: Property management companies (не зарегистрирован), дата: 25 августа, 2020 - 06:12
#permalink

hello have a nice day,this website is perfect because is a good article and good design,thanks this create website.Property management companies


Автор: nobita88, дата: 19 ноября, 2020 - 12:56
#permalink

Thank you for providing the information on this good and wonderful app. I will review it for use. bmi calculator


Автор: Гость (не зарегистрирован), дата: 1 мая, 2021 - 02:24
#permalink

Good post, I learned something totally new and challenging on this website I stumble upon every day. promotions maroc


Автор: casual encounters glasgow (не зарегистрирован), дата: 5 июля, 2021 - 18:54
#permalink

casual encounters glasgow is the best web platform created for lonley guys in UK to find fine ladies for casual chat contacts


Автор: TS in Cardiff (не зарегистрирован), дата: 2 сентября, 2021 - 15:51
#permalink

TS in Cardiff is the best web place in UK for lonley guys to find hot girls ready for casual contacts


Автор: Shemale à Montpellier (не зарегистрирован), дата: 9 декабря, 2021 - 23:41
#permalink

Shemale à Montpellier is place where lonley guys can find ladies for casual contacts in France and EU


Автор: Transen Graz (не зарегистрирован), дата: 23 декабря, 2021 - 19:32
#permalink

Visit Transen Graz and enjoy sexy chat with hot shemales


Автор: 메이저놀이터추천 (не зарегистрирован), дата: 12 января, 2022 - 12:31
#permalink

I will bookmark your web site and take the feeds additionally…I am satisfied to search out a lot of helpful information right here in the publish, we want work out more techniques on this regard, thanks for sharing. 메이저놀이터추천


Автор: Silke Bausch (не зарегистрирован), дата: 7 февраля, 2022 - 17:39
#permalink

Transen wurde speziell für die Trans-Community entwickelt und ist eine der interessantesten Dating-Seiten für Transsexuelle im Internet. Viele Trans-Personen halten sie für die beste Transgender-Dating-Seite. Auf dieser Seite können Sie alle Arten von Transgender-Partnern für Engagement, Beziehung, Freundschaft, Liebe oder sogar Ehe finden.


Автор: Viktoria Werneburg (не зарегистрирован), дата: 21 февраля, 2022 - 13:56
#permalink

Sex Bayern hat für Sie gesorgt. Es ist im Grunde die erste Anlaufstelle für alle, die in die Welt der Partnersuche einsteigen. Wenn Sie beim Online-Dating auf Nummer sicher gehen wollen, müssen Sie dort swipen, wo alle swipen.


Автор: Manuela Maja (не зарегистрирован), дата: 7 марта, 2022 - 14:07
#permalink

Sex in Hamburg hat mich schließlich überzeugt und ist meine Lieblings-Dating-App geworden. Ursprünglich konzentrierte sich die App auf gemeinsame Verbindungen und gemeinsame Freunde


Автор: Britta Kuhlmann (не зарегистрирован), дата: 8 марта, 2022 - 23:31
#permalink

Sex Sachsen ist die Dating-App, die ich empfehlen würde. Wenn man nur sehr wenig über eine Person weiß, kann die erste Kontaktaufnahme zu einer großen Herausforderung werden. Sie müssen sich durch ein Meer von Profilen wühlen, was es leicht macht, Menschen zu übergehen, denen man unter anderen Umständen vielleicht eine Chance gegeben hätte.


Автор: Гость (не зарегистрирован), дата: 24 марта, 2022 - 18:15
#permalink

Фишка заключается в том, что когда documentFragment вставляется в DOM - то он исчезает, а вместо него вставляются его дети.


Автор: Lore Hein (не зарегистрирован), дата: 26 мая, 2022 - 20:37
#permalink

Reife Frauen Gravatar


Автор: Swenyly, дата: 8 июня, 2022 - 04:21
#permalink

Currently i understand what is the documentFragment? It The article helps me understand it in detail fleeing the complex


Автор: Margret Meinhoff (не зарегистрирован), дата: 24 июня, 2022 - 20:39
#permalink

Sex Bremen ist eine der besten Websites, die es gibt. Auch wenn Sie hier nicht Ihre Seelenverwandte finden, können Sie verheiratete Frauen treffen, die den Funken in Ihrem Sexualleben neu entfachen werden. Im Gegensatz zu dem, was einige sagen, ist es völlig in Ordnung, sich mit Menschen außerhalb Ihrer Beziehung zu treffen, wenn Sie zu Hause nicht zufrieden sind.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
10 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum