====== Performance ======

===== append() dans une boucle =====

Comparaison de 2 codes et résultat

<code javascript>
    $.each(sites,function(key, value)
    {
        if( (type_station!='' && value.label_type==type_station) || type_station==''){
            if(groupBy != value.id.substr(0,4)){
                if(groupBy != null)
                    $select.append('</optgroup>');
                $select.append('<optgroup label="' + value.id.substr(0,4) + '">');
            }
            groupBy = value.id.substr(0,4);
            var selected = selected_sites.indexOf(value.id) > -1 ? ' selected' : '';
            $select.append('<option value="' + value.id + '"' + selected + '>' + value.id + ' / ' + value.label + ' / ' + value.label_type + '</option>');
        }
    });
</code>

<code javascript>
    var output = '';
    $.each(sites,function(key, value)
    {
        if( (type_station!='' && value.label_type==type_station) || type_station==''){
            if(groupBy != value.id.substr(0,4)){
                if(groupBy != null)
                    output += '</optgroup>';
                output += '<optgroup label="' + value.id.substr(0,4) + '">';
            }
            groupBy = value.id.substr(0,4);
            var selected = selected_sites.indexOf(value.id) > -1 ? ' selected' : '';
            output += '<option value="' + value.id + '"' + selected + '>' + value.id + ' / ' + value.label + ' / ' + value.label_type + '</option>';
        }
    });
    $select.append(output);
</code>

{{ :devweb:jquery:selection_050.png |}}

En stockant le contenu HTML dans une variable puis en utilisant append une fois uniquement à la fin, on obtient un temps d'exécution de 22,67ms au lieu de 1,59s !