Лучшая практика для фильтрации объектов, клиентских с JavaScript, скройте или удалите из DOM?
Для доступа к .emacs файлу для профиля, самый легкий путь состоит в том, чтобы открыть emacs. Тогда сделайте C-x C-, введите в ~USERNAME/.emacs (или можно использовать init.el или один из других ароматов). Введите свой материал в файл и C-x C-s (я думаю) сохранить его.
фактический файл расположен (в Windows XP) в c:\Documents and Settings\USERNAME.emacs.d(whatever, который Вы назвали файлом), или эквивалентное написание/местоположение в Вашей системе.
4 ответа
Если область отображения имеет фиксированный размер (или, по крайней мере, максимальный размер), и вы должны фильтровать на стороне клиента, я бы не создал узел DOM для каждого элемента, а вместо этого повторно использовать предопределенный набор узлов DOM в качестве шаблонов , скрывая ненужные шаблоны в зависимости от количества результатов от фильтра. Это значительно сократит количество узлов DOM в документе, что сохранит отзывчивость вашей страницы и будет довольно легко реализовать.
Пример HTML *:
<ul id="massive-dataset-list-display">
<li>
<div class="field-1"></div>
<div class="field-2"></div>
<div class="field-n"></div>
</li>
<li>
<div class="field-1"></div>
<div class="field-2"></div>
<div class="field-n"></div>
</li>
<li>
<div class="field-1"></div>
<div class="field-2"></div>
<div class="field-n"></div>
</li>
.
.
.
</ul>
Пример JavaScript *:
var MassiveDataset = function(src) {
var data = this.fetchDataFromSource(src);
var templateNodes = $("#massive-dataset-list-display li");
// It seems that you already have this handled, but just for
// completeness' sake
this.filterBy(someParam) {
var filteredData = [];
// magic filtering of `data`
this.displayResults(filteredData);
};
this.displayResults(filteredData) {
var resultCount = filteredData.length;
templateNodes.each(function(index, node) {
// There are more results than display node templates, start hiding
if ( index >= resultCount ) {
$(node).hide();
return;
}
$(node).show();
this.formatDisplayResultNode(node, filteredData[i]);
});
};
this.formatDisplayResultNode = function(node, rowData) {
// For great justice
};
};
var md = new MassiveDataset("some/data/source");
md.filterBy("i can haz filter?");
* Не тестировалось. Не ждите, что копирование / вставка сработает, но это было бы здорово.
Я понимаю, что это не совсем то, что вы просите, но поскольку вы открыли дверь для альтернативных ...
Рассматривали ли вы какую-либо фильтрацию на стороне сервера? Вы можете загрузить свои результаты с помощью AJAX, если пользователь изменяет параметры фильтрации, и таким образом вы не загружаете тысячи строк данных в браузер, когда вы можете отображать только часть из них. Это потенциально сэкономит вам и посетителям полосу пропускания, хотя это будет зависеть от того, как ваш сайт действительно используется.
В принципе, если вы заранее решите, какие данные вы хотите отображать, вам не придется испытывать проблемы
Я понимаю, что это может не соответствовать вашим потребностям, но я предлагаю это в качестве предложения на тот случай, если вы застряли на идее клиентской стороны.
повторно не загружать тысячи строк данных в браузер, если вы можете отобразить только их часть. Это потенциально сэкономит вам и посетителям полосу пропускания, хотя это будет зависеть от того, как ваш сайт действительно используется.По сути, если вы заранее решите, какие данные вы хотите отображать, вам не придется сталкиваться с проблемами
Я понимаю, что это может не соответствовать вашим потребностям, но я предлагаю это в качестве предложения на тот случай, если вы застряли на идее клиентской стороны.
повторно не загружать тысячи строк данных в браузер, если вы можете отобразить только их часть. Это потенциально сэкономит вам и посетителям полосу пропускания, хотя это будет зависеть от того, как ваш сайт действительно используется.По сути, если вы заранее решите, какие данные вы хотите отображать, вам не придется сталкиваться с проблемами
Я понимаю, что это может не соответствовать вашим потребностям, но я предлагаю это в качестве предложения на тот случай, если вы застряли на идее клиентской стороны.
Добавление класса и использование CSS для отображения / скрытия элемента, вероятно, будет самым быстрым (с точки зрения кодирования и производительности), особенно с таким большим количеством элементов.
Если вы хотите пойти по пути манипуляции с DOM, подумайте о редактировании DOM в автономном режиме. Кэшируйте дерево DOM в памяти (локальная переменная), обновите все строки и замените исходный узел DOM. См. http://www.peachpit.com/articles/article.aspx?p=31567&seqNum=5 для получения дополнительной информации по этому вопросу.
Я выполнил проект, который требовал фильтрации элементов на местоположение в "области просмотра" Карт Google и ползунок минимального и максимального значений (для тех, кому интересно, это было для веб-сайта недвижимости).
В первой версии использовался запрос AJAX для фильтрации всего (на стороне сервера) Предметы, поэтому каждое изменение в фильтре требует новых данных. Затем данные JSON были проанализированы в узлах DOM и добавлены в документ. Кроме того, в этом случае индексация элементов поисковой системой была невозможна.
Вторая версия также использовала запрос AJAX, но на этот раз запрашивал только отфильтрованные идентификаторы элементов. Все элементы присутствовали в HTML с уникальными идентификаторами, а отфильтрованные элементы имели дополнительное имя класса, чтобы изначально скрыть их. При изменении фильтра запрашивались только отфильтрованные идентификаторы и соответственно обновлялось имя класса элемента. Это значительно улучшило скорость, особенно в Internet Explorer (который имеет самый медленный движок JavaScript - из поддерживаемых нами браузеров -!) ...
в этом случае индексация элементов поисковой системой была невозможна.Вторая версия также использовала запрос AJAX, но на этот раз запрашивал только отфильтрованные идентификаторы элементов. Все элементы присутствовали в HTML с уникальными идентификаторами, а отфильтрованные элементы имели дополнительное имя класса, чтобы изначально скрыть их. При изменении фильтра запрашивались только отфильтрованные идентификаторы и соответственно обновлялось имя класса элемента. Это значительно повысило скорость, особенно в Internet Explorer (который имеет самый медленный движок JavaScript - из поддерживаемых нами браузеров -!) ...
в этом случае индексация элементов поисковой системой была невозможна.Вторая версия также использовала запрос AJAX, но на этот раз запрашивал только отфильтрованные идентификаторы элементов. Все элементы присутствовали в HTML с уникальными идентификаторами, а отфильтрованные элементы имели дополнительное имя класса, чтобы изначально скрыть их. При изменении фильтра запрашивались только отфильтрованные идентификаторы и соответственно обновлялось имя класса элемента. Это значительно повысило скорость, особенно в Internet Explorer (который имеет самый медленный движок JavaScript - из поддерживаемых нами браузеров -!) ...
При изменении фильтра запрашивались только отфильтрованные идентификаторы и соответственно обновлялось имя класса элемента. Это значительно улучшило скорость, особенно в Internet Explorer (который имеет самый медленный движок JavaScript - из поддерживаемых нами браузеров -!) ... При изменении фильтра запрашивались только отфильтрованные идентификаторы и соответственно обновлялось имя класса элемента. Это значительно улучшило скорость, особенно в Internet Explorer (который имеет самый медленный движок JavaScript - из поддерживаемых нами браузеров -!) ...Манипуляции с DOM слишком медленны для "нескольких тысяч элементов". Предполагая, что у вас есть действительно, действительно веская причина, по которой вы не заставляете сервер выполнять фильтрацию, тогда лучшим решением, которое я нашел, является использование XSL-преобразований на стороне клиента для данных, хранящихся как XML.
Сами преобразования очень быстро даже на достаточно больших наборах данных. Затем вы в конечном итоге назначаете результаты свойству innerHTML содержащего DIV, где вы хотите, чтобы таблица отображалась. Использование innerHTML для больших изменений в DOM намного быстрее, чем манипулирование DOM с помощью Javascript.
Edit : Ответы на комментарии Джастина Джонсона: -
Если набор данных такой большой, XML потенциально будет чудовищно большой.
Обратите внимание, что в моем первом абзаце я уже сделал заявление об отказе от ответственности, касающееся включения сюда серверов помощи. Здесь может быть случай изменить дизайн и разумно использовать AJAX, или просто не пытаться отображать много данных сразу. Однако я изо всех сил стараюсь ответить на поставленный вопрос.
Также стоит учесть, что «чудовищно большой», по крайней мере, зависит от пропускной способности. В хорошо подключенной интрасети пропускная способность веб-приложения не так высока. Вдобавок я видел и использовал реализации, которые создают и повторно используют кэшированный XML с течением времени.
Кроме того, если XML преобразуется в объект DOM, чем это лучше?
Существует огромная разница между Техника, которую я предлагаю, и прямое управление DOM с помощью Javascript. Подумайте, когда код в javascript изменяет DOM, базовый движок не имеет возможности узнать, что за ним немедленно последуют другие изменения, а также нельзя быть уверенным, что javascript не будет немедленно проверять другие свойства DOM. Следовательно, когда Javascript вносит изменения в DOM, браузер должен гарантировать, что он обновляет все виды других свойств, чтобы они соответствовали завершенному рендерингу.
Однако, когда innerHTML назначается большая строка HTML, браузер может вполне успешно создать целую кучу объектов DOM без каких-либо перерасчетов, он может отложить миллион обновлений для различных значений свойств до тех пор, пока не будет построена вся DOM. Следовательно, для крупномасштабных изменений innerHTML уничтожит прямую манипуляцию с DOM.
также нельзя быть уверенным, что javascript не будет немедленно проверять другие свойства DOM. Следовательно, когда Javascript вносит изменения в DOM, браузер должен гарантировать, что он обновляет все виды других свойств, чтобы они соответствовали завершенному рендерингу.Однако, когда innerHTML назначается большая строка HTML, браузер может вполне успешно создать целую кучу объектов DOM без каких-либо перерасчетов, он может отложить множество обновлений для различных значений свойств до тех пор, пока не будет построена вся DOM. Следовательно, для крупномасштабных изменений innerHTML уничтожит прямую манипуляцию с DOM.
также нельзя быть уверенным, что javascript не будет немедленно проверять другие свойства DOM. Следовательно, когда Javascript вносит изменения в DOM, браузер должен гарантировать, что он обновляет все виды других свойств, чтобы они соответствовали завершенному рендерингу.Однако, когда innerHTML назначается большая строка HTML, браузер может вполне успешно создать целую кучу объектов DOM без каких-либо перерасчетов, он может отложить множество обновлений для различных значений свойств до тех пор, пока не будет построена вся DOM. Следовательно, для крупномасштабных изменений innerHTML уничтожит прямую манипуляцию с DOM.
Следовательно, когда Javascript вносит изменения в DOM, браузер должен гарантировать, что он обновляет все виды других свойств, чтобы они соответствовали завершенному рендерингу.Однако, когда innerHTML назначается большая строка HTML, браузер может вполне успешно создать целую кучу объектов DOM без каких-либо перерасчетов, он может отложить множество обновлений для различных значений свойств до тех пор, пока не будет построена вся DOM. Следовательно, для крупномасштабных изменений innerHTML уничтожит прямую манипуляцию с DOM.
Следовательно, когда Javascript вносит изменения в DOM, браузер должен гарантировать, что он обновляет все виды других свойств, чтобы они соответствовали завершенному рендерингу.Однако, когда innerHTML назначается большая строка HTML, браузер может вполне успешно создать целую кучу объектов DOM без каких-либо перерасчетов, он может отложить миллион обновлений для различных значений свойств до тех пор, пока не будет построена вся DOM. Следовательно, для крупномасштабных изменений innerHTML уничтожит прямую манипуляцию с DOM.