jQuery Performance Tips #1

Checking Visibility

Visibility Test Cases
1
2
3
4
5
6
$('#word').is(':visible');
$('#word:visible').length == 1 ;
$('#word:visible').length > 0 ;
$('#word').css('display') == 'block';
$('#word').is(':not(:hidden)');
!$('#word').is(':hidden');

#Results

http://jsperf.com/jquery-visiblity-selector

#Summary

All major browsers perform really well using 4) the css display block, except for Chrome based browsers. The chrome based browsers, Chrome and new Opera, perform the best with 6) ! is :hidden. The comparison, 6) ! is :hidden, looks like the one to use over the 1) .is(‘:visible’).

Finding Option Selected in Select List

Find Selected Cases
1
2
3
4
5
6
7
8
$("select").find(':selected'); 
$("select option:selected");
$("select > option").filter(":selected");
$("select > option:selected");
$('select').children('option:selected');
$("select > option").find(":selected");
$('select').children('option').filter(":selected");
$('select').children().filter(":selected");

#Results

http://jsperf.com/select-option-in-list/4

#Summary

All major browsers perform well using the children selectors (5, 7, 8). The best of children filters tend to be 5) .children(‘option:selected’).