При каком размере DOM jQuery Mobile начнет становиться вялым? Повлияет ли добавление тысяч LI на производительность? - PullRequest
Новая
       18

При каком размере DOM jQuery Mobile начнет становиться вялым? Повлияет ли добавление тысяч LI на производительность?

2 голосов
/ 17 ноября 2011

Мы обсуждаем два подхода к отображению контактов устройства в мобильном приложении на основе jQuery Mobile.

Мы создаем для iPhone.

1) При каждом нажатии клавиши фильтруйтеконтакты в собственном коде (через PhoneGap) и передают только соответствующие контакты в UIWebView.

2) При загрузке передайте все контакты в UIWebView и выполните фильтрацию нажатий клавиш в веб-приложении с помощью jQuery.

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

Более широкий вопрос: при каком размере DOM замедлится jQuery Mobile?Например, создание 2000 элементов LI (со строками длиной около 20 символов) заметно ухудшит производительность?

1 Ответ

0 голосов
/ 17 ноября 2011

В конечном счете, я думаю, вы обнаружите, что выполнение фильтрации в нативном коде (вариант 2) будет намного быстрее, чем может обеспечить даже движок Nitro в iOS. jQuery Mobile использует 400 элементов списка в качестве тестового стенда. Выпуск Кандидат 3 предпринял огромные шаги для улучшения производительности списков. iOS и Android отобразят список 400 примерно за 1,5 секунды. Относительную статистику и разбивку вы можете увидеть в блоге JQMs о RC3

Позвольте мне выбросить еще одно предложение. Назовите его, вариант 3. Делайте всю фильтрацию в нативном коде там, где это, вероятно, геометрически быстрее. Затем, когда вы визуализируете просмотр списка, выведите его как предварительно обработанный просмотр списка. Воспользуйтесь преимуществами мобильного jquery CSS, но не отображайте список с помощью библиотеки javascript. Просто сделайте предварительный рендеринг контента, чтобы не беспокоиться о массовых манипуляциях с DOM.

Итак, вместо рендеринга ... 

<ul data-role="listview">
     <li><a href="tel:9999999999">Lastname, Firstname</a></li>
     <li><a href="tel:9999999999">Lastname, Firstname</a></li>
<ul>

Попробуйте сделать это напрямую ... 

<ul data-role="listview" class="ui-listview">
    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-c ui-btn-up-c"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="index.html" class="ui-link-inherit">Acura</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="index.html" class="ui-link-inherit">Audi</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
</ul>
...