MeasureThat.net

 jQuery (v1.12.4-wp) && Dom7 (4.0.4) Full (v2) (version: 0)

Comparing performance of: jQuery addClass vs Dom7 each vs jQuery each vs Dom7 set attr vs jQuery set attr vs Dom7 css vs jQuery css vs Dom7 removeAttr vs jQuery removeAttr vs Dom7 set attr (Object) vs jQuery set attr (Object) vs Dom7 toggleClass vs jQuery toggleClass vs Dom7 removeClass vs jQuery removeClass vs Dom7 addClass vs jQuery css (Object) vs Dom7 css (Object)

Created: 3 years ago by: Registered User
Jump to the latest result
HTML Preparation code:
AخA
 
1
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
2
<script src="https://cdn.jsdelivr.net/npm/dom7@4.0.4/dom7.min.js"></script>
Script Preparation code:
​x
 
function range(size, startAt = 0) {
    return [...Array(size).keys()].map((i) => i + startAt);
}
​
range(500).map((link) => {
    const a = document.createElement("a");
    const text = `My Title Text ${link}`;
    const linkText = document.createTextNode(text);
    a.appendChild(linkText);
    a.href = `http://example.com/${link}`;
    a.classList.add('test-link')
    document.body.appendChild(a);
});
Tests:

  • jQuery addClass

     
    jQuery('a.test-link').addClass('new-test-link');

  • Dom7 each

     
    Dom7('a.test-link').each(function(element, index) {
        console.log( element, index );
    });

  • jQuery each

     
    jQuery('a.test-link').each(function(index, element) {
        console.log( index, element );
    });

  • Dom7 set attr

     
    Dom7('a.test-link').attr('data-test', 'test-value');

  • jQuery set attr

     
    jQuery('a.test-link').attr('data-test', 'test-value');

  • Dom7 css

     
    Dom7('a.test-link').css('color', 'black');

  • jQuery css

     
    jQuery('a.test-link').css('color', 'black');

  • Dom7 removeAttr

     
    Dom7('a.test-link').removeAttr('title');

  • jQuery removeAttr

     
    jQuery('a.test-link').removeAttr( "title" );

  • Dom7 set attr (Object)

     
    Dom7('a.test-link').attr({
      alt: "Beijing Brush Seller",
      title: "photo by Kelly Clark"
    });

  • jQuery set attr (Object)

     
    jQuery('a.test-link').attr({
      alt: "Beijing Brush Seller",
      title: "photo by Kelly Clark"
    });

  • Dom7 toggleClass

     
    Dom7('a.test-link').toggleClass('new-test-link');

  • jQuery toggleClass

     
    jQuery('a.test-link').toggleClass('new-test-link');

  • Dom7 removeClass

     
    Dom7('a.test-link').removeClass('new-test-link');

  • jQuery removeClass

     
    jQuery('a.test-link').removeClass('new-test-link');

  • Dom7 addClass

     
    Dom7('a.test-link').addClass('new-test-link');

  • jQuery css (Object)

     
    jQuery('a.test-link').css({
        left: '100px',
        top: '200px',
        color: 'red',
        width: '300px',
        marginLeft: '17px',
        'padding-right': '20px'
    });

  • Dom7 css (Object)

     
    Dom7('a.test-link').css({
        left: '100px',
        top: '200px',
        color: 'red',
        width: '300px',
        marginLeft: '17px',
        'padding-right': '20px'
    });
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    jQuery addClass
    Dom7 each
    jQuery each
    Dom7 set attr
    jQuery set attr
    Dom7 css
    jQuery css
    Dom7 removeAttr
    jQuery removeAttr
    Dom7 set attr (Object)
    jQuery set attr (Object)
    Dom7 toggleClass
    jQuery toggleClass
    Dom7 removeClass
    jQuery removeClass
    Dom7 addClass
    jQuery css (Object)
    Dom7 css (Object)

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: one year ago)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
Chrome 123 on Windows
View result in a separate tab
Test name Executions per second
jQuery addClass 2723.3 Ops/sec
Dom7 addClass 3652.9 Ops/sec
jQuery removeClass 3613.7 Ops/sec
Dom7 removeClass 4348.9 Ops/sec
jQuery toggleClass 847.7 Ops/sec
Dom7 toggleClass 2918.5 Ops/sec
jQuery set attr (Object) 2567.3 Ops/sec
Dom7 set attr (Object) 2799.2 Ops/sec
jQuery removeAttr 2182.8 Ops/sec
Dom7 removeAttr 8725.1 Ops/sec
jQuery css 3426.2 Ops/sec
Dom7 css 4347.8 Ops/sec
jQuery set attr 5096.6 Ops/sec
Dom7 set attr 5374.0 Ops/sec
jQuery each 441.7 Ops/sec
Dom7 each 442.0 Ops/sec
jQuery css (Object) 520.1 Ops/sec
Dom7 css (Object) 1212.0 Ops/sec
LLMs can make mistakes. Check important info.
Related benchmarks: