Codeigniter填充下拉性能

Question

I have a function in which I am populating a drop-down with about 100k items.

Obviously this is causing my page to hang for a bit while it's rendering.

public function GetOrderDropDown($id){
    $CI =& get_instance();
    $CI->load->database();
    $qry = $CI->db->query("Select orderID, CONCAT('Order ID: ', orderID) As OrderName From vwSelectOrders Order By orderStarted Desc", FALSE);                    
    $res = $qry->result_array();
    if($res){
        $rCt = count($res);
        echo '<option value="0">- Please select an order -</option>';
        for($i = 0; $i < $rCt; ++$i){
            $sel = ($id == $res[$i]['orderID']) ? ' selected="selected"': null;
            echo '<option value="' . $res[$i]['orderID'] . '"' . $sel . '>' . $res[$i]['OrderName'] . '</option>';
            if($i % 50 === 0){
                ob_flush();
                flush();
            }
        }   
    }
}

The query itself runs pretty quick when applied in SQL MS, in fact when I print_r the returned array it's still pretty quick. So I thought that by adding in a flush of the response at every 50 iterations would do the trick... and it does seem to hang less, but... I wonder if it could be better.

This particular function is called in an ajaxed loaded page that displays a Loading graphic while the page is loaded... maybe I can force it to wait until the page is fully ready to be displayed?

// Load in a page
function LoadPage($url, $where){
    var $loading = '<div class="pageLoader">Loading...<br /><img src="/assets/images/ajax-loader.gif" alt="loading..." height="11" width="16" /></div>';
    var $container = jQuery((typeof($where) !== 'undefined') ? $where : '#content-container');
    var $t = Math.round(new Date().getTime() / 1000);
    var options = {
            url: $url + '?_=' + $t,
            cache: false,
            type: 'POST',
            beforeSend: function(){
                    $container.slideUp('slow', function(){
                        $container.slideDown('fast').html($loading);    
                    });
                },
            success: function(data, status, jqXhr){
                $container.slideUp('fast', function(){
                    $container.slideDown('fast').html(data);    
                });
            },
            complete: function(jqXhr, status){},
            error: function(jqXhr, status, error){
                $container.slideUp('fast', function(){
                    $container.slideDown('fast').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><i class="fa fa-exclamation-triangle fa-4x pull-left"></i><p><strong>Danger Will Robinson!</strong><br />There was an issue pulling in this page. Our support team has been notified, please check back later.</p></div>');    
                });
            }
        };
    jQuery.ajax(options);
}

What else could I do, Firefox actually becomes un-responsive while it is loading...?

Answer 1

In fact You shouldn't use <select> for 100k items. That's not user-fiendly. Try to search autocomplete solutions.

About Your question: no, You can't add element with 100k child nodes without overloading browser.