CSSASS (v18)

Revision 18 of this benchmark created by ONEBOYS on

Preparation HTML

<style>
body{background:#333;}
div{width:50px;height:50px;background:#ecc;box-shadow:0 0 8px #fff;}
</style>
<div>asdsad
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
1
 
var $id = function(o) {
    return document.getElementById(o) || o;
    }
    
    
    
var getElementsByClassName = function(className, parent, tag) {
    parent = parent || document;
    if (parent.getElementsByClassName) {
      return parent.getElementsByClassName(className)
    } else {
      tag = tag || '*';
      var returnElements = []
      var els = parent.getElementsByTagName(tag);
      className = className.replace(/\-/g, "\\-");
      var pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");
      var i = 0;
      while (i < els.length) {
        if (pattern.test(els[i].className)) {
          returnElements.push(els[i]);
        }
        i++;
      }
      return returnElements;
    }
    }
    
     /* 为了获取display:none元素的offsetHeight */
    
    
var getHeight = function(elem) {
    if (elem.offsetWidth !== 0) {
      return elem.offsetHeight;
    }
    var temp = 0;
    var old = {};
    var options = {
      position: "absolute",
      visibility: "hidden",
      display: "block"
    }
    for (var name in options) {
      old[name] = elem.style[name];
      elem.style[name] = options[name];
    }
    temp = elem.offsetHeight;
    for (var name in options) {
      elem.style[name] = old[name];
    }
    return temp;
    };

function Roll(obj) {
  var self = this;
  this.wrap = obj.box;
  this.interval = obj.interval || 1000; //滚动间歇
  this.volume = obj.volume || 1; //滚动最小像素
  this.time = 100 / obj.speed || 10; //滚动速度
  this.list = getElementsByClassName('RollList', this.wrap)[0];
  this.children = this.list.children;

  this.init = function() {
    if (this.children.length == 0) return false; /* 没有滚动列,不滚动*/
    this.row = obj.row || getHeight(this.wrap) / getHeight(this.children[0]) | 0; //设置每次滚动的列数，默认为显示区域内的列数
    if (this.children.length < this.row) return false; /* 滚动列数太少 ,不滚动*/

    /* 复制一份内容，达到无缝滚动 */
    if (this.wrap.insertAdjacentHTML) {
      this.wrap.insertAdjacentHTML('beforeEnd', this.wrap.innerHTML);
    } else { /* 因为FF8以前不支持insertAdjacentHTML，用innerHTML就显得有点复杂了。。。 */
      this.wrap.innerHTML += this.wrap.innerHTML;
      this.list = getElementsByClassName('RollList', this.wrap)[0];
      this.children = this.list.children;
    }

    this.timeOpt = setTimeout(this.move, this.interval);
  };

  this.move = function() {
    if (self.list.offsetHeight - self.wrap.scrollTop > 0) {
      self.wrap.scrollTop += self.volume;
      if (self.wrap.scrollTop % (self.row * self.children[0].offsetHeight) >= self.volume) {

        return (self.timeOpt = setTimeout(self.move, self.time));
      } else {
        return (self.timeOpt = setTimeout(self.move, self.interval));
      }
    } else {
      self.timeOpt = setTimeout(function() {
        self.wrap.scrollTop = 0;
        self.move()
      }, self.interval);
    };
  };


  this.init();
};

new Roll({
  box: $id("showbox")
});  
ready
2
 
var $id = function(o) {
    return document.getElementById(o) || o;
    }
    
    
    
var getElementsByClassName = function(className, parent, tag) {
    parent = parent || document;
    if (parent.getElementsByClassName) {
      return parent.getElementsByClassName(className)
    } else {
      tag = tag || '*';
      var returnElements = []
      var els = parent.getElementsByTagName(tag);
      className = className.replace(/\-/g, "\\-");
      var pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");
      var i = 0;
      while (i < els.length) {
        if (pattern.test(els[i].className)) {
          returnElements.push(els[i]);
        }
        i++;
      }
      return returnElements;
    }
    }
    
     /* 为了获取display:none元素的offsetHeight */
    
    
var getHeight = function(elem) {
    if (elem.offsetWidth !== 0) {
      return elem.offsetHeight;
    }
    var temp = 0;
    var old = {};
    var options = {
      position: "absolute",
      visibility: "hidden",
      display: "block"
    }
    for (var name in options) {
      old[name] = elem.style[name];
      elem.style[name] = options[name];
    }
    temp = elem.offsetHeight;
    for (var name in options) {
      elem.style[name] = old[name];
    }
    return temp;
    };

function Roll(obj) {
  var self = this;
  this.wrap = obj.box;
  this.interval = obj.interval || 1000; //滚动间歇
  this.volume = obj.volume || 1; //滚动最小像素
  this.time = 100 / obj.speed || 10; //滚动速度
  this.list = getElementsByClassName('RollList', this.wrap)[0];
  this.children = this.list.children;

  this.init = function() {
    if (this.children.length == 0) return false; /* 没有滚动列,不滚动*/
    this.row = obj.row || getHeight(this.wrap) / getHeight(this.children[0]) | 0; //设置每次滚动的列数，默认为显示区域内的列数
    if (this.children.length < this.row) return false; /* 滚动列数太少 ,不滚动*/

    /* 复制一份内容，达到无缝滚动 */
    if (this.wrap.insertAdjacentHTML) {
      this.wrap.insertAdjacentHTML('beforeEnd', this.wrap.innerHTML);
    } else { /* 因为FF8以前不支持insertAdjacentHTML，用innerHTML就显得有点复杂了。。。 */
      this.wrap.innerHTML += this.wrap.innerHTML;
      this.list = getElementsByClassName('RollList', this.wrap)[0];
      this.children = this.list.children;
    }

    this.timeOpt = setTimeout(this.move, this.interval);
  };

  this.move = function() {
    if (self.list.offsetHeight - self.wrap.scrollTop > 0) {
      self.wrap.scrollTop += self.volume;
      if (self.wrap.scrollTop % (self.row * self.children[0].offsetHeight) >= self.volume) {

        return (self.timeOpt = setTimeout(self.move, self.time));
      } else {
        return (self.timeOpt = setTimeout(self.move, self.interval));
      }
    } else {
      self.timeOpt = setTimeout(function() {
        self.wrap.scrollTop = 0;
        self.move()
      }, self.interval);
    };
  };


  this.init();
};

new Roll({
  box: $id("showbox")
});  
ready

Revisions

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