css变量 &calc函数的性能

近期发现Android 一部分Android机器 比如vivo 联想 三星 手机对rem支持不好 实际渲染的容器不准确 大小不一 于是想在前端调研下动态css变量的实现 替换掉rem 喜出望外啊 css变量 竟然有这个东西 （知识匮乏了）

于是简单测试了一把 mark下 经测试一般页面 不会超过2000个节点，看下了下天猫官网节点才1900多个dom

但是发现 calc➕css变量的方式的确有性能问题

在1000个节点大概相差 3-5s区间

一般的移动页面是可以这么操作的

移动页面一般也就500左右

统计方式

下面以手动粗鲁统计 performance感觉误差大 也不准确。

统计方法如

<script>
    if (~navigator.userAgent.indexOf('iPhone')) {
        let num = window.devicePixelRatio;
        document.documentElement.style.setProperty("--rpx", 10);
    }
</script>
<style>
    div{
      width: 100px;
      height: 100px;
      margin: 10px;
            background-color: red;
  }
    /* div {
        width: calc(var(--rpx) * 10px);
        height: calc(var(--rpx) * 10px);
        margin: 10px;
        background-color: red;
    } */
</style>
<script>
    var s = Date.now();
     for (let i = 0; i < 10000; i++) {
    let s = document.createElement('div');
    s.innerHTML = i;
    document.body.append(s);
}
function showNavigationDetails() {
    const [entry] = performance.getEntriesByType('navigation');
    console.table(entry.toJSON());
}
window.onload = function () {
    let num = Date.now();
    console.log('test'+document.getElementsByTagName("*").length, num - s);
  //  showNavigationDetails();
}
</script>