在cnblogs上看到一个名为sandy的人发表了一个博文：用事实证明cssText性能高
对作者本人不做任何评论。但是作者坚持认为cssText比style快，拒绝承认事实，让人感到惋惜。

我觉得有必要让大家听到不同的声音，是真是假，自己做分辨。


我测试的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>用事实证明cssText比较慢</title>
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <style type="text/css">
  </style>
  <script type="text/javascript">
  function Timer(){
    this.startTime = (new Date()).getTime();
 }
 Timer.prototype.timeEnd=function(){
    alert((new Date()).getTime() - this.startTime)
 }
 function testLong(isSlow){
    var t = new Timer();
    var i = 100000;
    if(isSlow){
        var x = document.documentElement.style;
        while(i--){
            x.cssText = "border-bottom:1px solid red;padding-top:10px"
        }
    }else{
        var x = document.documentElement.style;
        while(i--){
            x.borderBottom = "1px solid red"
            x.paddingTop="10px"
        }
    }
    t.timeEnd()
 }
  </script>
 </head>
 
 <body>
 <div class='left'>
 <pre>
 <code>
    var i = 100000;
    var x = document.documentElement.style;
    while(i--){
        <font color=red>x.borderBottom = "1px solid red"</font>
        <font color=red>x.paddingTop="10px"</font>
    }
 </code>
 </pre>
 <input type="button" value="快速" onclick="testLong()" />
 </div>
 <div class='mid'>
 <pre>
 <code>
    var i = 100000;
    var x = document.documentElement;
    while(i--){
        <font color=red>x.cssText= "border-bottom:1px solid red;padding-top:10px"</font>
    }
 </code>
 </pre>
 <input type="button" value="慢速" onclick="testLong(true)" />
 </div>
   
 </body>
</html>

原作者一开始用标示符深度的问题，掩盖真相，在大家指正标示符深度问题后，亦然坚持自己的意见，认为cssText快，而不面对客观事实。

我的结论也未必正确，欢迎大家指正和讨论。

作者: Easy C# 发表于 2011-03-14 14:32 原文链接

Tag 用事实证明csstext性能不一定高
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架