在IOS端浏览器上,点击元素点击后会造成requestAnimationFrame"丢帧"的问题

发布于 2022-09-05 07:27:10 字数 2460 浏览 29 评论 0

下面代码的执行，在正常情况下一般都是60fps左右。但在IOS浏览器上(safari 或者微信都是),当我一点击button按钮后(任何可以点击的元素都是比如绑定点击事件后的元素也一样)，可以看到页面上所记录的跳帧帧数,点一下按钮有时会跳到100多fps。
--那么我的问题是：
1、在IOS浏览器上，点击元素会影响requestAnimationFrame的执行是吗？
2、如果是，有什么方法让点击元素点击后不会影响requestAnimationFrame的执行呢？

============================================================================
下面先贴出测试代码（请在IOS浏览器上打开）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <style>
        *{
            margin:0;
            padding: 0;
        }
        html,body{
            width:100%;
            height:100%;
            overflow: hidden;
        }
        button{
            position: absolute;
            bottom:0;
            left:0;
            width:200px;
            height:200px;
        }
        .show-info{
                position: absolute;
            left:0;
            top:0;
            font-size: 40px;
            z-index:111111;
        }
        .show-box{
            position: absolute;
            left:0;
            top:100px;
            font-size: 30px;
            z-index:111111;
            border:1px solid #000;
        }
    </style>
</head>
<body>
<!--点击button按钮会造成requestAnimationFrame的执行不稳定-->
  <button>多次点击会跳帧IOS</button>
  <span class="show-info">0</span>
  <div class="show-box"> </div>
  <script>
        var showInfo = document.querySelector('.show-info');
        var showBox = document.querySelector('.show-box');
        var lastDate = 0;
        var elapsedTime = 0;
        var loop = function(){
            var nowDate = new Date();
            elapsedTime = nowDate - lastDate;
            lastDate = nowDate;
//          ~~(1000 / elapsedTime) = 每秒的帧速率
            showInfo.innerHTML = ~~(1000 / elapsedTime) + 'fps';
            // 如果帧数大于100(跳帧) 则 记录到showBox
            if(~~(1000 / elapsedTime) > 100){
                showBox.innerHTML += ' | =' + ~~(1000 / elapsedTime) + 'fps= |';
            }
            window.requestAnimationFrame(loop);
        };
        window.requestAnimationFrame(loop);
  </script>
</body>
</html>

分享到QQ

分享到微博