Как отображать огромное количество входов на странице без сбоев браузера?

Question

У меня есть массив, содержащий список продуктов. Каждый раз, когда я пытаюсь отображать продукты, которые мой браузер будет терпеть крах, потому что это слишком много данных.

$products = array(... 40000 products ...); 
?> 
<table class="table table-bordered"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>#</th> 
      <th>Product name</th> 
     </tr> 
    </thead> 
    <tbody> 
    <?php foreach ($products as $product): ?> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td><?= $product->id; ?></td> 
      <td><?= $product->name; ?></td> 
     </tr> 
    <?php endforeach; ?> 
    </tbody> 
</table> 

Вышеупомянутый сбой мой браузер. Не неожиданно для 40000 продуктов. Единственное, что я не знаю, это то, что было бы лучшим решением для этого. Мне нужны все перечисленные продукты.

EDIT

Я не уверен, если нумерация страниц будет возможность, так как я хочу, чтобы результаты поиска с помощью JQuery. Это страница, которая позволит мне выбрать большое количество продуктов из базы данных и экспортировать их в CSV.

Answer 1

Подробнее о разбиении на страницы. Это лучший способ отобразить все ваши продукты.

Вот отличный учебник, из которого я его узнал. Он немного стар, но он очень хорошо учит основам.

http://www.tonymarston.net/php-mysql/pagination.html

Другой способ делать это с помощью AJAX. Загрузите 30 продуктов и попросите пользователя прокрутить страницу вниз. Когда конец страницы достигнут, загрузите еще 30 продуктов. Я считаю, что это называется бесконечной прокруткой (стиль новостей в новостях Facebook).

Answer 2

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

Разбивка:

http://code.tutsplus.com/tutorials/how-to-paginate-data-with-php--net-2928

Бесконечные прокрутки

http://www.infotuts.com/ajax-infinite-scroll-using-jquery-php-mysql/

Answer 3

Есть юзабилити проблемы, которые возникают от предоставления 40,000 пунктов поэтому многие сайты используют нумерацию страниц и/или AJAX бесконечной прокрутки как уже упоминалось.

При этом рендеринг 40 000 элементов с использованием PHP отлично подходит для браузера. Тем не менее, для достижения этой цели есть соображения, которые вы хотите предпринять при рендеринге многих элементов, включая память PHP, время отклика и т. Д., Которые вступают в игру.

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

Вот некоторые предложения:

Использование итератор

Первое, что нужно избегать загружается, что многие элементы в памяти, например, путем создания массива многих элементов. Гораздо лучше получить итератор и цикл, чтобы ограничить использование памяти.

Например:

# Slow and consumes a lot of memory 

$products = array(); 
for ($i=1; $i<=40000; $i++) { 
    array_push($products, ['id' => $i,'name'=>'foobar']); 
} 

# Very fast and works fine on Chrome, Firefox, Safari 

<table> 
<?php for ($i; $i<=40000; $i++) { ?> 
    <tr> 
     <td><input type="checkbox" /></td> 
     <td><?= $i; ?></td> 
     <td><?= 'foobar'; ?></td> 
    </tr> 
<?php } ?> 
</table> 

При использовании базы данных, вы можете сделать каждый элемент в то время как ниже. Также важно убедиться, что сам запрос выполняется быстро.

<table> 
<?php while($row = $stmt->fetch(PDO::FETCH_ASSOC)) { ?> 
    <tr> 
     <td><input type="checkbox" /></td> 
     <td><?= $row['id']; ?></td> 
     <td><?= $row['name']; ?></td> 
    </tr> 
<?php } ?> 
</table> 

Структуры Использование Lightweight данных

Вторая вещь, чтобы рассмотреть делает обработку каждого элемента, как легкий, как это возможно. Если у вас сложный элемент, вам нужно создать экземпляр объекта для каждого элемента. Если у вас есть простой объект, вы можете использовать массив или ассоциативный массив.

стороне сервера Поиск по сравнению с Client-Side Поиск

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

Answer 4

Самая большая проблема в этом примере - это поля ввода. Удалите их, и вы увидите огромное увеличение производительности, даже если вы одновременно отобразите 50 000 строк.