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

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: 2 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script src="https://code.jquery.com/jquery-1.12.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 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

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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: 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

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

Created: 2 years ago by: Registered User

Jump to the latest 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)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A