FasterSelector

JavaScript performance comparison

Test case created

Preparation code

<table class="listings"><thead>
    <tr>
        <td class="checkbox-column"><input class="global-select-listing" type="checkbox"></td>
        <td style="width: 280px;">Property</td>
        <td style="width: 150px;">ID/HA ID</td>
        <td style="width: 200px;">Listing Model</td>
        <td>PPB Level</td>
    </tr>
    <tr class="global-selection" style="display: none;">
        <td colspan="3">
            <span class="pull-right multi-select-message">You can edit all selected items at once<i class="icon-chevron-right"></i></span>
        </td>
        <td>
            <select class="span2">
                <option>Pay per booking</option>
                <option>None</option>
            </select>
        </td>
        <td>
            <select class="span1">
                <option>5%</option>
                <option>10%</option>
                <option>15%</option>
                <option>20%</option>
                <option>25%</option>
                <option>30%</option>
            </select>
        </td>
    </tr>
</thead>
<tfoot>
    <tr>
        <td colspan="5">
            <div class="pagination pagination-small">
                <ul>
                    <li><a href="#" class="prev"><i class="icon-chevron-left"></i></a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#" class="next"><i class="icon-chevron-right"></i></a></li>
                </ul>
            </div>
            <div class="pull-right filter">
                <form>
                    <span class="help-inline">Show</span>
                    <select class="span1">
                        <option>10</option>
                        <option>30</option>
                        <option>50</option>
                        <option>100</option>
                    </select>
                    <span class="help-inline">Properties</span>
                </form>
            </div>
        </td>
    </tr>
</tfoot>
<tbody class="products">

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">Meadowlands #1</a>
            <span class="address">19833 Shady Ln...</span>
        </div>
    </td>
    <td>
        XJDHYE1<br>
        177382910
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            Pay per booking
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            10%
        </span>
    </td>
</tr>

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">hello1</a>
            <span class="address">address</span>
        </div>
    </td>
    <td>
        pid<br>
        haid
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            listingmodel
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            ppblevel
        </span>
    </td>
</tr>

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">hello2</a>
            <span class="address">address</span>
        </div>
    </td>
    <td>
        pid<br>
        haid
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            listingmodel
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            ppblevel
        </span>
    </td>
</tr>

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">hello3</a>
            <span class="address">address</span>
        </div>
    </td>
    <td>
        pid<br>
        haid
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="display: inline;">
            listingmodel
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="display: inline;">
            ppblevel
        </span>
    </td>
</tr>

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">hello4</a>
            <span class="address">address</span>
        </div>
    </td>
    <td>
        pid<br>
        haid
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            listingmodel
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            ppblevel
        </span>
    </td>
</tr>

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">world5</a>
            <span class="address">address</span>
        </div>
    </td>
    <td>
        pid<br>
        haid
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            listingmodel
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            ppblevel
        </span>
    </td>
</tr>

</tbody>
</table><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 

Preparation code output

Property ID/HA ID Listing Model PPB Level
Show Properties
filler image
Meadowlands #1 19833 Shady Ln...
XJDHYE1
177382910
Pay per booking 10%
filler image
hello1 address
pid
haid
listingmodel ppblevel
filler image
hello2 address
pid
haid
listingmodel ppblevel
filler image
hello3 address
pid
haid
listingmodel ppblevel
filler image
hello4 address
pid
haid
listingmodel ppblevel
filler image
world5 address
pid
haid
listingmodel ppblevel

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
All
$(".single-product-filter").hide();
$(".single-product-selection").show();  
pending…
Selected
var listings = $(".select-listing:checked");
listings.closest("tr").find(".single-product-filter").hide();
listings.closest("tr").find(".single-product-selection").show();
pending…
Cached
var listings = $(".select-listing:checked");
listings.parent().parent().find(".single-product-filter").hide();
listings.parent().parent().find(".single-product-selection").show();  
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment