innerhtml-v-appendchild

JavaScript performance comparison

Test case created

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    var options = {
      css: '',
      size: {
        width: '',
        height: '',
      },
      extension: {
        name: '',
      }
    }
};
</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
js
// Generated by CoffeeScript 1.5.0
var attribution, container, disableLink, iframe;

style = document.createElement('style')
style.type = 'text/css'

style.appendChild(document.createTextNode("#yieldsquare-ad {\n  margin:10px auto 20px;\n\n  width: " + options.size.width + "px;\n}\n\n#yieldsquare-about a {\n  cursor: pointer;\n}\n\n.yieldsquare-enabled {\n  border-radius:0 0 5px 5px;\n  box-shadow: inset 0 0 75px 75px lightgray, 0 0 0 lightgray;\n  -webkit-transition:opacity 1s linear;\n}\n\n.yieldsquare-disabled-first {\n  -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.45);\n  -webkit-transition: opacity 1s linear;\n  background-image: url(http://s3.amazonaws.com/static.yieldsquare.com/ads-disabled/messagebed.gif);\n  height: 90px;\n  opacity: 1;\n  position: relative;\n  width: 728px;\n}\n\n.yieldsquare-disabled-second {\n  -webkit-transition: all 0.4s ease-in-out;\n  background-image: url(http://s3.amazonaws.com/static.yieldsquare.com/ads-disabled/messagebed.gif);\n  border-radius:0 0 5px 5px;\n  box-shadow: inset 0 0 35px 35px transparent, 0 0 75px 50px transparent;\n  height: 90px;\n  opacity: 0;\n  position: relative;\n  width: 728px;\n}\n\n#yieldsquare-about-ad {\n  font:11px arial !important;\n  color:#555;\n  padding: 4px;\n  text-align:center;\n}\n\n#yieldsquare-about-ad a {\n  cursor: pointer;\n  color: #333;\n}\n\n.yieldsquare-message-icon {\n    position: absolute;\n    top: 20px;\n    left: 20px;\n}\n\n.yieldsquare-message-p {\n    font: 13px/17px \"Helvetica Neue\", Arial, Helvetica, Geneva, sans-serif;\n    width: 542px;\n    height: 74px;\n    left: 123px;\n    position: absolute;\n    top: 0px;\n    color: #3d3d3d;\n    margin-top: 13px;\n    margin-bottom: 13px;\n}\n\n.yieldsquare-message-p span {\n    font: bold 16px/17px \"Helvetica Neue\", Arial, Helvetica, Geneva, sans-serif;\n    color: #292929;\n}\n\n.yieldsquare-message-p a {\n    text-decoration: none;\n    color: #1d97cf;\n}\n\n.yieldsquare-message-p a:hover {\n    text-decoration: underline;\n}\n\n#yieldsquare-message-x {\n    position: absolute;\n    left: 715px;\n    top: 6px;\n}\n\n" + options.css));

document.getElementsByTagName('head')[0].appendChild(style);

container = document.createElement('div');

container.setAttribute('id', 'yieldsquare-ad');

container.setAttribute('class', 'yieldsquare-enabled');

container.style.display = 'none';

iframe = document.createElement('iframe');

iframe.setAttribute('id', 'yieldsquare-frame');

iframe.setAttribute('frameborder', 0);

iframe.setAttribute('width', options.size.width);

iframe.setAttribute('height', options.size.height);

iframe.style.margin = '0';

iframe.src = 'http://google.com';

container.appendChild(iframe);

attribution = document.createElement('div');

attribution.setAttribute('id', 'yieldsquare-about-ad');

attribution.appendChild(document.createTextNode("This ad is supporting your extension " + options.extension.name));

disableLink = document.createElement('a');

disableLink.setAttribute('id', 'yieldsquare-disable-ad');

disableLink.appendChild(document.createTextNode('Turn off these ads?'));

attribution.appendChild(disableLink);

container.appendChild(attribution);

document.body.appendChild(container);
pending…
innerhtml
var html;

html = "<style>\n  #yieldsquare-ad {\n    margin:10px auto 20px;\n\n    width: " + options.size.width + "px;\n  }\n\n  #yieldsquare-about a {\n    cursor: pointer;\n  }\n\n  .yieldsquare-enabled {\n    border-radius:0 0 5px 5px;\n    box-shadow: inset 0 0 75px 75px lightgray, 0 0 0 lightgray;\n    -webkit-transition:opacity 1s linear;\n  }\n\n  .yieldsquare-disabled-first {\n    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.45);\n    -webkit-transition: opacity 1s linear;\n    background-image: url(http://s3.amazonaws.com/static.yieldsquare.com/ads-disabled/messagebed.gif);\n    height: 90px;\n    opacity: 1;\n    position: relative;\n    width: 728px;\n  }\n\n  .yieldsquare-disabled-second {\n    -webkit-transition: all 0.4s ease-in-out;\n    background-image: url(http://s3.amazonaws.com/static.yieldsquare.com/ads-disabled/messagebed.gif);\n    border-radius:0 0 5px 5px;\n    box-shadow: inset 0 0 35px 35px transparent, 0 0 75px 50px transparent;\n    height: 90px;\n    opacity: 0;\n    position: relative;\n    width: 728px;\n  }\n\n  #yieldsquare-about-ad {\n    font:11px arial !important;\n    color:#555;\n    padding: 4px;\n    text-align:center;\n  }\n\n  #yieldsquare-about-ad a {\n    cursor: pointer;\n    color: #333;\n  }\n\n  .yieldsquare-message-icon {\n      position: absolute;\n      top: 20px;\n      left: 20px;\n  }\n\n  .yieldsquare-message-p {\n      font: 13px/17px \"Helvetica Neue\", Arial, Helvetica, Geneva, sans-serif;\n      width: 542px;\n      height: 74px;\n      left: 123px;\n      position: absolute;\n      top: 0px;\n      color: #3d3d3d;\n      margin-top: 13px;\n      margin-bottom: 13px;\n  }\n\n  .yieldsquare-message-p span {\n      font: bold 16px/17px \"Helvetica Neue\", Arial, Helvetica, Geneva, sans-serif;\n      color: #292929;\n  }\n\n  .yieldsquare-message-p a {\n      text-decoration: none;\n      color: #1d97cf;\n  }\n\n  .yieldsquare-message-p a:hover {\n      text-decoration: underline;\n  }\n\n  #yieldsquare-message-x {\n      position: absolute;\n      left: 715px;\n      top: 6px;\n  }\n\n  " + options.css + "\n</style>\n\n<div id=\"yieldsquare-ad\" class=\"yieldsquare-enabled\" style=\"display:none\">\n  <iframe id=\"yieldsquare-frame\"\n          style=\"margin:0\"\n          src=\"http://google.com\"\n          frameborder=\"0\"\n          scrolling=\"no\"\n          width=\"" + options.size.width + "\"\n          height=\"" + options.size.height + "\"></iframe>\n  <div id=\"yieldsquare-about-ad\">\n    This ad is supporting your extension <i>" + options.extension.name + "</i>:\n    <a id=\"yieldsquare-disable-ad\">Turn off these ads?</a>\n  </div>\n</div>";

document.body.insertAdjacentHTML('beforeend', html);
 
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment