Benchmark: jQuery (v3.6.0) && Dom7 (4.0.4) Full (v3)

jQuery (v3.6.0) && Dom7 (4.0.4) Full (v3) (version: 0) Benchmark.js

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

Go to the latest result

HTML Preparation code:

<script src="https://code.jquery.com/jquery-3.6.0.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' });

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Dom7 removeAttr

7K/s

jQuery removeAttr

7K/s

Dom7 set attr

6K/s

jQuery set attr

5K/s

Dom7 css

4K/s

Dom7 removeClass

4K/s

jQuery removeClass

4K/s

Dom7 set attr (Object)

3K/s

Dom7 addClass

3K/s

Dom7 toggleClass

3K/s

jQuery set attr (Object)

3K/s

jQuery css

3K/s

jQuery addClass

2K/s

Dom7 css (Object)

1K/s

jQuery toggleClass

1K/s

jQuery each

368/s

Dom7 each

360/s

jQuery css (Object)

347/s

Fastest: Dom7 removeAttr (21.6x faster)

View exact numbers

✓ Dom7 removeAttr: 7,496 ops/sec
• jQuery removeAttr: 6,940 ops/sec
• Dom7 set attr: 5,708 ops/sec
• jQuery set attr: 5,022 ops/sec
• Dom7 css: 4,090 ops/sec
• Dom7 removeClass: 3,997 ops/sec
• jQuery removeClass: 3,710 ops/sec
• Dom7 set attr (Object): 3,384 ops/sec
• Dom7 addClass: 3,258 ops/sec
• Dom7 toggleClass: 2,885 ops/sec
• jQuery set attr (Object): 2,575 ops/sec
• jQuery css: 2,541 ops/sec
• jQuery addClass: 2,455 ops/sec
• Dom7 css (Object): 1,121 ops/sec
• jQuery toggleClass: 1,038 ops/sec
• jQuery each: 368 ops/sec
• Dom7 each: 360 ops/sec
• jQuery css (Object): 347 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Dom7 removeAttr

13K/s

jQuery removeAttr

12K/s

Dom7 set attr

11K/s

jQuery set attr

10K/s

Dom7 removeClass

9K/s

Dom7 css

8K/s

jQuery removeClass

7K/s

Dom7 addClass

7K/s

Dom7 set attr (Object)

7K/s

jQuery set attr (Object)

5K/s

Dom7 toggleClass

5K/s

jQuery css

5K/s

jQuery addClass

4K/s

Dom7 css (Object)

2K/s

jQuery toggleClass

2K/s

Dom7 each

763/s

jQuery each

762/s

jQuery css (Object)

742/s

View exact numbers

Test name	Executions per second
✓ Dom7 removeAttr	12,825 Ops/sec
jQuery removeAttr	12,122 Ops/sec
Dom7 set attr	11,122 Ops/sec
jQuery set attr	9,830 Ops/sec
Dom7 removeClass	9,256 Ops/sec
Dom7 css	8,084 Ops/sec
jQuery removeClass	6,916 Ops/sec
Dom7 addClass	6,806 Ops/sec
Dom7 set attr (Object)	6,508 Ops/sec
jQuery set attr (Object)	5,281 Ops/sec
Dom7 toggleClass	5,234 Ops/sec
jQuery css	5,170 Ops/sec
jQuery addClass	4,325 Ops/sec
Dom7 css (Object)	2,172 Ops/sec
jQuery toggleClass	1,958 Ops/sec
Dom7 each	763 Ops/sec
jQuery each	762 Ops/sec
jQuery css (Object)	742 Ops/sec

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

LLMs can make mistakes. Check important info.

jQuery (v3.6.0) && Dom7 (4.0.4) Full (v3) (version: 0) Benchmark.js

Created: 4 years ago by: Registered User

Go 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)

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks