Change Text Test

JavaScript performance comparison

Test case created by Andrew Bridge

Preparation code

<p id="changeMe1">
  Hello! This is the first piece of text! Will you change me?
</p>
<p id="changeMe2">
  Hello! This is the second piece of text! Will you change me?
</p>
      
<script>
Benchmark.prototype.setup = function() {
  pTag1 = document.getElementById("changeMe1");
  pTag2 = document.getElementById("changeMe2");

};

Benchmark.prototype.teardown = function() {
  pTag1.innerHTML = "Hello! This is the first piece of text! Will you change me?";
  pTag2.innerHTML = "Hello! This is the second piece of text! Will you change me?";
  pTag1 = pTag2 = null;

};
</script>

Preparation code output

<p id="changeMe1"> Hello! This is the first piece of text! Will you change me? </p> <p id="changeMe2"> Hello! This is the second piece of text! Will you change me? </p>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Normal Function
function changeText(pTag, toWhat) {
  document.getElementById(pTag).innerHTML = toWhat;
  return true;
}

function changeColour(pTag, toWhat) {
  var textObj = document.getElementById(pTag);
  //do functions for colour change
  alert("colour changed");
  return true;
}

changeText("changeMe1", "My normal function changed the first one!");
changeText("changeMe2", "My normal function changed the second one!");
pending…
Object Method - Nested
function TextChanger(pTag) {
  this.textObj = document.getElementById(pTag);
  this.changeColour = function() {
    //do functions for colour change
    alert("colour changed");
    return true;
  };
  this.changeWords = function(toWhat) {
    this.textObj.innerHTML = toWhat;
    return true;
  };
}

var text1 = new TextChanger("changeMe1");
var text2 = new TextChanger("changeMe2");
text1.changeWords("This was an object method changing me, the first one!");
text2.changeWords("This was an object method changing me, the second one!");
pending…
Object Method - Prototyped
function TextChanger(pTag) {
  this.textObj = document.getElementById(pTag);
}

TextChanger.prototype.changeColour = function() {
  //do functions for colour change
  alert("colour changed");
  return true;
};
TextChanger.prototype.changeWords = function(toWhat) {
  this.textObj.innerHTML = toWhat;
  return true;
};

var text1 = new TextChanger("changeMe1");
//var text2 = new TextChanger("changeMe2");
text1.changeWords("This was an object method changing me, the first one!");
//text2.changeWords("This was an object method changing me, the second one!");
pending…

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

Compare results of other browsers

0 Comments

Hello! This is the first piece of text! Will you change me?

Hello! This is the second piece of text! Will you change me?