MeasureThat.net

Run results for: jQuery (v1.12.4-wp) && Dom7 (4.0.4) Full (v2)

Go to the benchmark
Run details:
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
Windows
Desktop
one year ago
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
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'
    });