Javascript Chrome：为什么批量更改样式（cssText）比以单个（.style.property）方式更改慢？

在《高性能Javascript》（High Performance Javascript）一书中，我读到了关于最小化重绘和回流的内容，批量DOM更改可以带来更好的性能，比如使用：

var el = document.getElementById('mydiv');
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

而不是

var el = document.getElementById('mydiv');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';

我在Chrome上做了一个测试，但结果正好相反，下面是我的测试代码：

var ie = (function(){
    var undef, v = 3, div = document.createElement('div');

    while (
        div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->',
        div.getElementsByTagName('i')[0]
    );

    return v> 4 ? v : undef;
}());


// First insert 100*100 element

var total = 100 * 100;
var round = 100 * 100;

var body = document.querySelector("body");

if (ie) {
    total = round = 100 * 10;       
}

var createElement = function (id) {
    var div = document.createElement("div");
    div.setAttribute("id", "id-" + id);
    return div;
}

for (var i = 0; i <= total; i++) {
    body.appendChild(createElement(i));
}

// Then change style in random
function randomFromInterval(from, to) {
    return Math.floor(Math.random() * (to-from+1)+from);
}

function randomWidth() {
    return randomFromInterval(0, 200) + "px";
}

function randomHeight() {
    return randomFromInterval(0, 200) + "px";
}

function randomColor() {
    var r = randomFromInterval(0, 255),
        g = randomFromInterval(0, 255),
        b = randomFromInterval(0, 255);

    return "rgb(" + r + ", " + g + ", " + b + ")";
}

var time = +new Date();

for (var i = 0; i <= round; i++) {
    var id = randomFromInterval(0, total);
    var div = document.querySelector("#id-" + id);

    // The `slower` way...but it is faster, use less time
    div.style.width = randomHeight();
    div.style.height = randomWidth();
    div.style.backgroundColor = randomColor();

    // var text = "width: " + randomWidth() + "; height: " + randomHeight() + "; background: " + randomColor() + ";"
    // div.style.cssText = text;
}

console.log(+new Date() - time);

var ie=（函数（）{
var undef，v=3，div=document.createElement（'div'）；
当(
div.innerHTML=“”，
div.getElementsByTagName（'i'）[0]
);
返回v>4？v：未定义；
}());
//第一次插入100*100元素
var总计=100*100；
var round=100*100；
var body=document.querySelector（“body”）；
如果（即）{
总计=四舍五入=100*10；
}
var createElement=函数（id）{
var div=document.createElement（“div”）；
div.setAttribute（“id”、“id-”+id）；
返回div；
}
对于（var i=0；i我可以问一下您是如何测试这一点的吗

您是否已将测试用例输入，例如la

可用的信息全面表明vs，在执行测试时，我似乎无法复制您注意到的结果