live vs. bind (v8)

Revision 8 of this benchmark created on

Description

Because your dom is more complex than a uniq div. This shows up that live is taking much more longer as there is more elements in dom. "Live" slow down increase with the number of "live" events you have.

Preparation HTML

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<div>
        <h1>Header - <a href="http://www.google.com">google</a></h1>
</div>
<div>
        <div>
                <div>
                        <p>Articles</p>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                        <div>
                                <h1>Article</h1>
                                <p>Lorem ipsum</p>
                                <p>liens<br/><a href="http://www.google.com">google</a><br/><a href="http://www.google.com">google</a></p>
                        </div>
                </div>
                <div>
                        <p>Blocs</p>
                        <div>
                                <h4>Bloc - <a href="http://www.google.com">google</a></h4>
                                <div>
                                        <ul>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                        </ul>
                                        <p><a href="http://www.google.com">google</a></p>
                                </div>
                        </div>
                        <div>
                                <h4>Bloc - <a href="http://www.google.com">google</a></h4>
                                <div>
                                        <ul>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                        </ul>
                                        <p><a href="http://www.google.com">google</a></p>
                                </div>
                        </div>
                        <div>
                                <h4>Bloc - <a href="http://www.google.com">google</a></h4>
                                <div>
                                        <ul>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                        </ul>
                                        <p><a href="http://www.google.com">google</a></p>
                                </div>
                        </div>
                        <div>
                                <h4>Bloc - <a href="http://www.google.com">google</a></h4>
                                <div>
                                        <ul>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                        </ul>
                                        <p><a href="http://www.google.com">google</a></p>
                                </div>
                        </div>
                        <div>
                                <h4>Bloc - <a href="http://www.google.com">google</a></h4>
                                <div>
                                        <ul>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                                <li>ligne</li>
                                        </ul>
                                        <p><a href="http://www.google.com">google</a></p>
                                </div>
                        </div>
                </div>
        </div>
        <div>
                <p>Footer</p>
                <div>
                        <p>liens</p>
                        <p>
                           <a href="http://www.google.com">google</a>
                           <a href="http://www.google.com">google</a>
                           <a href="http://www.google.com">google</a>
                           <a href="http://www.google.com">google</a>
                           <a href="http://www.google.com">google</a>
                           <a href="http://www.google.com">google</a>
                        </p>
                        <p>
                           <a href="http://www.google.com">google</a>
                           <a href="http://www.google.com">google</a>
                           <a href="http://www.google.com">google</a>
                           <a href="http://www.google.com">google</a>
                           <a href="http://www.google.com">google</a>
                           <a href="http://www.google.com">google</a>
                        </p>
                </div>
        </div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
live
$('div a').live('click', function() {});
$('p a').live('click', function() {});
$('h1 a').live('click', function() {});
$('h4 a').live('click', function() {});
ready
bind
$('div a').bind('click', function() {});
$('p a').bind('click', function() {});
$('h1 a').bind('click', function() {});
$('h4 a').bind('click', function() {});
ready
click
$('div a').click(function() {});
$('p a').click(function() {});
$('h1 a').click(function() {});
$('h4 a').click(function() {});
ready
on
$('div').on('click', 'a', function() {});
$('p').on('click', 'a', function() {});
$('h1').on('click', 'a', function() {});
$('h4').on('click', 'a', function() {});
ready

Revisions

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