Benchmark: jQuery (v2.2.4) && Dom7 (4.0.4) Full (v3)

jQuery (v2.2.4) && Dom7 (4.0.4) Full (v3) (version: 0)

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

Created: 4 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dom7@4.0.4/dom7.min.js"></script>

Script Preparation code:

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 addClass
Dom7('a.test-link').addClass('new-test-link');
jQuery removeClass
jQuery('a.test-link').removeClass('new-test-link');
Dom7 removeClass
Dom7('a.test-link').removeClass('new-test-link');
jQuery toggleClass
jQuery('a.test-link').toggleClass('new-test-link');
Dom7 toggleClass
Dom7('a.test-link').toggleClass('new-test-link');
jQuery set attr (Object)
jQuery('a.test-link').attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark" });
Dom7 set attr (Object)
Dom7('a.test-link').attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark" });
jQuery removeAttr
jQuery('a.test-link').removeAttr( "title" );
Dom7 removeAttr
Dom7('a.test-link').removeAttr('title');
jQuery css
jQuery('a.test-link').css('color', 'black');
Dom7 css
Dom7('a.test-link').css('color', 'black');
jQuery set attr
jQuery('a.test-link').attr('data-test', 'test-value');
Dom7 set attr
Dom7('a.test-link').attr('data-test', 'test-value');
jQuery each
jQuery('a.test-link').each(function(index, element) { console.log( index, element ); });
Dom7 each
Dom7('a.test-link').each(function(element, index) { console.log( element, index ); });
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

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

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Related benchmarks: