jQuery.prepend() vs jQuery.append() (v17)

Revision 17 of this benchmark created on

Preparation HTML

<ul id="test" style="height: 10em; overflow: auto"></ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var $test = $( '#test' ), lis = '';
    for ( var i = 1; i <= 1001; i++ ) {
        lis += '<li>List item #' + i + '</li>';
    }
    $test.html( lis );
    
    var $lis = $test.children( 'li' ),
        $nearStart = $lis.eq( 9 ),
        $middle = $lis.eq( 500 ),
        $nearEnd = $lis.eq( -10 );

Test runner

Ready to run.

Testing in
TestOps/sec
Move middle element to start
$test.prepend( $middle )
ready
Move middle element to end
$test.append( $middle );
ready
Move near start element to start
$test.prepend( $nearStart );
ready
Move near start element to end
$test.append( $nearStart );
ready
Move near end element to start
$test.prepend( $nearEnd );
ready
Move near end element to end
$test.append( $nearEnd );
ready

Revisions

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