Стратегии рендеринга HTML с помощью Javascript

Question

Я беру толстый массив JSON с сервера с помощью вызова AJAX, затем обрабатываю его и отображаю HTML с помощью Javascript. Я хочу сделать это как можно быстрее.

Chrome опережает FF в моих тестах, но браузеру может потребоваться 5-8 секунд для рендеринга ~ 300 записей.

Я рассматривал ленивую загрузку, например, реализованную в Google Reader, но это противоречит другим моим случаям использования, таким как возможность мгновенного поиска результатов поиска (простой поиск выполняется на стороне клиента по всем записям, которые мы получили в Массив JSON) и несколько фильтров.

Одна вещь, которую я заметил, это то, что и FF, и Chrome ничего не рендерит, пока они не зацикливаются на всех элементах массива JSON, хотя я явно вставляю вновь созданные элементы в DOM после каждого цикла (как только у меня появляется HTML). Чего бы я хотел добиться, так это заставить браузер отображаться как можно быстрее.

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

Я ищу любые подсказки и подсказки здесь.

Answer 1

попробовать:

• вставить строки в массив, а затем просто

   el.innerHTML = array.join("");
  

• использовать фрагменты документа

  var frag = document.createDocumentFragment();
  for ( loop ) {
      frag.appendChild( el );
  }
  parent.appendChild( frag );
  

Answer 2

Если вам не нужно отображать все 300 записей одновременно, вы можете попытаться разбить их на 30 или 50 записей за раз и развернуть массив JSON, так как эти части должны отображаться через пейджер илиокно локального поиска.После преобразования вы можете кэшировать содержимое для последующего отображения, когда пользователи перемещаются вверх и вниз по страницам.

Answer 3

Google Web Toolkit имеет BulkTableRenderers , которые предназначены для быстрой визуализации больших таблиц. Даже если вы решите не использовать GWT, вы можете выбрать некоторые методы, просмотрев исходный код , доступный по лицензии Apache, версия 2.0.

Answer 4

300 не много.Мне удалось создать дерево из более чем 500 элементов с данными из JSON с помощью jQuery за доли секунды в Chrome.300 не большое число.

Если они отображаются так медленно, это может быть связано с неправильным способом сделать это.Можете ли вы указать, как вы это делаете?

Самый медленный способ - написать HTML в строку в Javascript, а затем назначить его с помощью элемента innerHtml.Но это все равно будет чертовски быстро для 300 рядов.

Answer 5

Попробуйте создать элементы в отдельном узле DOM или фрагменте документа, а затем присоедините все это за один раз.