如何在不破坏浏览器的情况下在页面上显示大量输入？

I've got an array containing a list of products. Everytime I try to display the products my browser will crash because it is just too much data.

$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>

The above crashes my browser. Not unexpected with 40000 products. The only thing I don't know is what would be a better solution to do this. I do need all of those products listed.

EDIT

I'm not sure if pagination would be a possibility since I wanna make the results searchable using jQuery. It's a page that will make it able for me to select a large number of products from the database and export them to a CSV.

Learn about pagination. It's the best way to display all your products.

Here's a great tutorial from which I've learned it. It's a bit old but it teaches the basics very well.

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

Another method would be doing it with AJAX. Load 30 products and let the user scroll down the page. When the end of the page is reached, load 30 more products. I believe it is called infinite scrolling (Facebook newsfeed style).

Either use pagination or infinitescroll options to make sure you're only loading chuncks at a time.

Pagination :

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

Infinite-scroll

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

There are usability issues that arise from rendering 40,000 items which is why many sites use pagination and/or AJAX infinite scroll as mentioned.

That being said, rendering 40,000 items using PHP is fine for a browser. However, to accomplish this, there are considerations you want to take in when rendering that many items, including PHP memory, response time, etc. that come into play.

Beyond rendering, since your goal is to make this searchable, the issue may be with the client-side search code performance which needs to load all the data into a searchable data structure. A more performant approach would be to take the search parameters in the browser and run a server-side search against your database to present the matching results.

Here are some suggestions:

Use an Iterator

The first thing to avoid is loading that many items into memory, such as by creating an array of many items. It's much better to get an iterator and cycle through that to limit memory usage.

For example:

# 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>

When using a database, you can render each item at a time as well as below. It's also important to ensure that the query itself is fast.

<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>

Use Lightweight Data Structures

The second thing to consider is making the processing of each item as lightweight as possible. If you have a complex item, you many need to instantiate an object for each item. If you have a simple object, you can use an array or associative array.

Server-Side Search vs. Client-Side Search

To search that many results using JavaScript / jQuery on the client may be an issue as well. For this many results, it would be more performant to take the search inputs from the browser to perform the search on the server-side using a database query (with proper indexing) and just return the matching items.

The biggest problem in this example are the input fields. Remove them and you will see a huge performance increase, even if you display 50.000 rows at once.