Run results for: 【JiangNanGame】style setting test 3

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Browser: Chrome 115

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
SetStyle1	17.5 Ops/sec
SetStyle2	18.6 Ops/sec
SetStyle3	11.9 Ops/sec
SetStyle4	6.3 Ops/sec

HTML Preparation code:

<div id="test" style='width:1px;height:1px;'></div>

Script Preparation code:

window.ele = document.getElementById("test");

window.SetStyle1 = (ele, json) => {
    const styleObject = ele.style;
    for (let key in json) {
        let value = json[key];
        styleObject[key] = value;
    }
    return ele;
};

window.SetStyle2 = (ele, json) => {
    const styleObject = ele.style;
    for (let key in json) {
        let value = json[key];
        styleObject.setProperty(key, value);
    }
    return ele;
};

window.SetStyle3 = (ele, json) => {
    let str = ele.style.cssText;
    for (let key in json) {
        let value = json[key];
        str += `${key}:${value};`;
    }
    ele.setAttribute('style', str);
    return ele;
};

window.SetStyle4 = (ele, json) => {
    let str = ele.style.cssText;
    for (let key in json) {
        let value = json[key];
        str += `${key}:${value};`;
    }
    ele.style.cssText = str;
    return ele;
};

window.myStyle = {
  color: "red",
  border: "1vmin solid red",
  padding: "0.5vmin",
  'background-color': "black",
  height: "1vh",
  width: "1vw",
  left: "100px",
};

Tests:

SetStyle1
let i = 0; while (i < 100000) { SetStyle1(ele, myStyle); i++; }
SetStyle2
let i = 0; while (i < 100000) { SetStyle2(ele, myStyle); i++; }
SetStyle3
let i = 0; while (i < 100000) { SetStyle3(ele, myStyle); i++; }
SetStyle4
let i = 0; while (i < 100000) { SetStyle4(ele, myStyle); i++; }