Question

我只想在将100000个节点插入文档时获取节点的渲染时间，我尝试了几种方法，但结果出乎意料。

以下是示例：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>node insert cost time test</title>
    <script>
        var st = Date.now();
    </script>
</head>
<body>
<h1>Placehoder</h1>
<h1 id="h1"></h1>
<h1 id="h2"></h1>
<h1 id="h3"></h1>
<h1 id="h4"></h1>
<h1 id="h5"></h1>
<div id="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    var en = Date.now();
    $("#h4").html("White cost time:" + (en - st));
</script>
<script>

    let data = [];
    for(let i =0;i<100000;i++){
      data.push({
         name:"test",
         age:18,
         gender:"female"
      }) 
    }

    
    const s = Date.now();
    let list = data;
    const timer = setInterval(() => {
        const ss = Date.now();
        if ($("#indexid-" + (list.length - 1)).size() > 0) {
            const findTime = new Date();
            const ft = + findTime;
            $("#h5").html(findTime)
            $("#h1").html(`The RealTime is ${findTime - s}`)
            clearInterval(timer);
        }
    }, 1)
    const tpl = '<div id="indexid-{id}">' +
        '<h2>Name：{name}</h2>' +
        '<h4>Gender：{gender}</h4>' +
        '<h6>Age：{age}</h6>' +
        '</div>'
    let res = [];
    list.forEach((item, index) => {
        item.id = index;
        let str = tpl.replace(/\{(\w+)\}/gi, function ($, $1) {
            if (item[$1] + "") {
                return item[$1];
            }
            return ""
        })
        res.push(str);
    })
    //insert 100000 nodes into document
    //then get the nodes render time
    $("#box").html(res.join(""))
    const e = Date.now();
    $("#h2").html(`JS execute time：${e - s}ms`)
      
  
</script>
</body>
</html>

＆＃13;

这适用于桌面浏览器，但不适用于mobileweb。在移动网络上，输出时间比它应该小。我也使用MutationObserver Api，但得到了相同的结果，有人可以帮助我吗？

插入文档后节点需要多长时间才能绘制？

0 个答案: