bardziej wydajny jquery

Question

ten kolejny kawałek kodu działa, ale to sprawia, że ​​przeglądarka nieco dziwnie. Nic wielkiego. Zastanawiam się, czy byłby sposób na zwiększenie wydajności? Czy mogę użyć buforowania lub w jakiś sposób zapełnić jedną opcję, a następnie skopiować ją do drugiej 5. (na stronie jest 6 zrzutów z klasą "maski").

Każda pomoc będzie bardzo ceniona!

$('.mask').each(function() { 
    $(this).append($('<option/>').val("").text("")); 
    for (var i = 1; i < 256; i++) { 
     $(this).append($('<option/>').val(i).text(i)); 
    } 
    }); 
}); 

Answer 1

Można tworzyć węzły raz następnie sklonować je tak:

var temp = $('<select/>'); 
$('<option/>').val("").text("").appendTo(temp); 
for (var i = 1; i < 256; i++) { 
    $('<option/>').val(i).text(i).appendTo(temp); 
} 
temp.children().clone().appendTo('.mask'); 

Zamiast robić wiele indywidualnych dołącza do DOM (co jest bardzo kosztowne) to dozuje wszystkie elementy w górę w fragmencie dokumentu następnie klonuje je, dodając w partiach (jedna partia na zaznaczenie).

Answer 2

To znacznie szybciej (około 3-10 razy, jak testowane here) budować HTML się w jeden ciąg znaków:

var html = "<option value=''></option>"; 
for (var i = 1; i < 256; i++) { 
    html += "<option value='" + i + "'>" + i + "</option>"; 
} 
$(".mask").append(html); 

See test wydajności porównanie aktualnych możliwości w tym wątku: http://jsperf.com/appending-options-jquery