Что лучший способ для d3 манипулировать html?

Я использую mbostock awesome d3 для простого html-рендеринга, простейшего как я мог подумать, выбрав пустой div и заполнив его HTML.

d3.select($('#thediv')[0])
  .selectAll('p')
  .data(l).enter()
  .append('p')
  .html(function(d){return 'd3 ' + d;});

В Win7 Chrome я заметил, что для больших наборов данных это выглядит как очень медленно. (3,5 с для 20000 элементов)

В этом примере показан очень простой (хотя и длинный) список: http://jsfiddle.net/truher/NQaVM/

Я попробовал два решения: отображение видимости:

$('#thediv').toggle()

и запись в отдельный элемент:

var p = $('<div>')
d3.select(p[0])...
$('#theparent').append(p)

Результаты были следующими:

Firefox: равномерно быстро (600-700 мс)

Chrome: либо переключение или отключение выполняется быстро (800 мс), в противном случае очень медленно (3,5 с)

Отключение Internet Explorer: быстрее, но все еще медленно (1,8 с), в противном случае очень медленно (3,2 с)

Мой вопрос таков: Есть ли лучшее решение?

Ответ 1

Как правило, две вещи, которые заканчиваются медленными при выполнении манипуляций с DOM, являются модификациями дерева DOM и перерисовки браузера.

Использование переключателя видимости позволяет избежать перерисовки браузера в любом современном, оптимизированном движке DOM. Тем не менее вы по-прежнему будете платить цену за изменение дерева DOM.

Редактирование отдельного элемента даст вам как перехват переименования, так и отсутствие необходимости платить за обновления в DOM.

Во всех случаях второй вариант, из-за манипуляции с DOM потока, будет быстрее или в худшем случае быстрее. Относительная разница в скорости между браузерами более чем вероятно из-за различий в их двигателях DOM и Javascript. Есть некоторые тесты, которые могут дать вам больше информации об этом.

Помимо скорости самих манипуляций DOM, вы можете начать просмотр развертки цикла и другие оптимизации (Джеффом Гринбергом), чтобы свести к минимуму работу, выполняемую вашим фактическим script. Помимо этого вы уже делаете это правильно.

Если вам интересно узнать больше о внутреннем браузере, вы должны демонстративно взглянуть на длинную статью в html5rock о браузере внутренности. Существует также хорошая статья в разработчиках Google о том, как ускорить JavaScript на веб-страницах.