copyCSS vs mine

JavaScript performance comparison

Test case created by Aymeric

Info

Test the jQuery plugin copyCSS (http://upshots.org/javascript/jquery-copy-style-copycss) versus my own function (http://blog.kodono.info/wordpress/2011/12/22/retrouver-les-styles-css-appliques-a-un-element-du-dom-javascript/)

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="foo" style="background-color:blue">foo</div>
<div id="bar">bar</div>
 

Preparation code output

foo
bar

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
copyCSS
$.fn.copyCSS = function(source){
    var dom = $(source).get(0);
    var style;
    var dest = {};
    if(window.getComputedStyle){
        var camelize = function(a,b){
            return b.toUpperCase();
        };
        style = window.getComputedStyle(dom, null);
        for(var i = 0, l = style.length; i < l; i++){
            var prop = style[i];
            var camel = prop.replace(/\-([a-z])/g, camelize);
            var val = style.getPropertyValue(prop);
            dest[camel] = val;
        };
        return this.css(dest);
    };
    if(style = dom.currentStyle){
        for(var prop in style){
            dest[prop] = style[prop];
        };
        return this.css(dest);
   };
   if(style = dom.style){
      for(var prop in style){
        if(typeof style[prop] != 'function'){
          dest[prop] = style[prop];
        };
      };
    };
    return this.css(dest);
};

$('#bar').copyCSS('#foo');
pending…
mine
function getStyle(e) {
    var arr=(typeof window.getComputedStyle == "function" ? window.getComputedStyle(e) : e.currentStyle ); // IE will use the "currentStyle"
    var res=[];
    $.each(arr, function(k,v) { // ici j'utilise le "each" de jQuery simplement parce que c'est plus pratique/simple que le for-in
      if (typeof window.getComputedStyle == "undefined") {
        var kNoCamel=k.replace(/([A-Z])/g, "-$1").toLowerCase(); // sous IE on a des noms de propriétés au format camelCase
        k=v;
        v=kNoCamel;
      }
      if (v.charAt(0) != "-") {
        var vSlice = v.slice(0,7);
        // ici on va chercher à conserver que quelques propriétés CSS bien particulières
        var ok = (vSlice=="border-"||vSlice=="margin-"||vSlice=="padding");
        switch(v) {
          case "background-color":
          case "color":
          case "font-style":
          case "font-weight":
          case "font-size":
          case "font-family":
          case "width":
          case "height":
          case "vertical-align":
          case "text-align":
          case "text-decoration": ok=true;
        }
        if (ok) {
          if (typeof window.getComputedStyle == "function") {
            var vCamel=(v.search("-") != -1 ? v.replace(/(-)(.)/g,function(c) { return c[1].toUpperCase();}) : v); // pour trouver les valeurs associés aux propriétés on se change en camelCase
            res.push(v+":"+arr[vCamel]);
          } else {
            res.push(v+":"+k);
          }
      }
    }
  });
  return res.join(";");
};

document.getElementById('bar').setAttribute("style",getStyle(document.getElementById('foo')));
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

Add a comment