Dom manipulation - POO vs Proc

Benchmark publishedon

Preparation HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

Setup

class Area{
	constructor(list){
		this.element = $("<div>");
	 
	
    this.element.addClass('button-area');	
    this.element.css({color: 'red'});

    list.map((txt) => {			
      this.element.append(this.text(txt));
    });

    return this.element;	
	}

	text(txt){	
    const p = $('<p>');
    p.text(txt);
    p.attr('class', 'p_test');

    return p;
	}
}

Test Runner

Initializing...

Testing in
Test CaseOps/sec
POO


const list = ['Bonjour', 'Maman', 'Comment tu vas ?', 'Moi je vis ma meilleur vie'];

const element = new Area(list);

$('body').append(element);
ready
Proc
const element = $("<div class='button-area' style='color:red'><p class='p_test'>Bonjour</p><p class='p_test'>Maman</p><p class='p_test'>Comment tu vas ?</p><p class='p_test'>Moi je vis ma meilleur vie</p></div>");
$('body').append(element);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1
publishedon