关于nth-of-type导致ios执行动画卡顿的定位

背景

脱离文档流进行动画，提升动画性能

具体情况

动态生成了大量的dom，对其中的某一个dom进行脱离文档流，然后执行动画

1.js部分代码

    function rener() {
        var html = '<div id="div1"></div>'
        for (var i = 0; i < 20000; i++) {
            html += '<div style="background:' + getColor() + ';">' + i + '</div>'
        }
        document.body.innerHTML = html
    }

    function getColor() {
        //定义字符串变量colorValue存放可以构成十六进制颜色值的值
        var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
        //以","为分隔符，将colorValue字符串分割为字符数组["0","1",...,"f"]
        var colorArray = colorValue.split(",");
        var color = "#"; //定义一个存放十六进制颜色值的字符串变量，先将#存放进去
        //使用for循环语句生成剩余的六位十六进制值
        for (var i = 0; i < 6; i++) {
            //colorArray[Math.floor(Math.random()*16)]随机取出
            // 由16个元素组成的colorArray的某一个值，然后将其加在color中，
            //字符串相加后，得出的仍是字符串
            color += colorArray[Math.floor(Math.random() * 16)];
        }
        return color;
    }
    rener()

js部分的代码就是生成了20000个节点

2.css部分

div:nth-of-type(1) {
        position: absolute;
        z-index: 1;
        width: 100px;
        height: 100px;
        animation: test 1s ease-in infinite;
        background: gray;
    }

    @keyframes test {
        0% {
            width: 100px;
            height: 100px;
        }
        25% {
            width: 50px;
            height: 200px;
        }
        50% {
            width: 200px;
            height: 50px;
        }
        75% {
            width: 100px;
            height: 100px;
        }
        100% {
            width: 200px;
            height: 200px;
        }
    }

这个也比较简单,用nth-of-type定位到第一个div，然后脱离文档流，无限执行动画，理论上，这不会有问题的，但是在测试时，发现，ios卡出翔，动画就是一跳一跳的，瞬间怀疑脱离文档流这个优化手段是假的，但是，这是各路大神给的结论，不应该呀，所以，我就在猜，是不是nth-of-type的问题导致的，果然，把它换成了id选择器之后，动画能完美地执行了

结论

其实，我也没啥结论，只是找到了症结所在，大体的原因可以猜测下，应该是每次动画时，都会使用nth-of-type去找这个dom节点，所以会卡，如果有官方的具体解释，还望贴上链接