Question

在Chrome中使用网络开发者时，我遇到了这个Long frame times are an indication of jank问题。经过一些实验，我仍然没有明白这一点然后我创建了一个新的.html文件，其中包含以下（几乎为空）内容：

<!DOCTYPE html>
<html>
<head>
  <title>Empty</title>
</head>
<body>
<p id="p"></p>
<script>document.querySelector("#p").innerHTML = Date.now();</script>
</body>
</html>

（Date.now()定义Chrome肯定会重新制作内容）

...在Chrome的Incognito mode中打开它，并以不同的方式多次重新加载页面（ Ctrl + R ， Ctrl + Shift + R 和第三件事。）

有些情况下，帧持续时间为5秒或20秒甚至2分钟！ （不得不说：我不需要等待2分钟。）
我无法理解，在这里加载可能需要五秒钟。

问题在没有任何可见逻辑的情况下随意触发，因此我需要帮助来管理它。

This course让我对Chrome的渲染算法有了基本的了解，但是那些人有不同版本的控制台，所以它有所帮助。

询问问题后的屏幕截图。 17.3 mins：

Answer 1

我使用简单的JSBIN page对此进行了测试 - 使用您问题中的代码：

＆＃13;

function HashTable(){
    var size = 0;
    var entry = new Object();
    this.add = function(key,value){
        if(!containsKey(key)){
            size++;
        }
        entry[key] = value;
    }

    this.getValue = function(key){
        return containsKey(key)?entry[key]:null;
    }

    this.remove = function(key){
        if (containsKey(key) && delete entry[key]) {
            size--;
        }
    }

    this.containsKey = function(key){
        return (key in entry);
    }

    this.containsValue = function(value){
        for(var prop in entry){
            if(entry[prop] == value){
                return true;
            }
        }
        return false;
    }
    //get all values
        this.getValues = function(){
            var values = new Array();
            for(var prop in entry){
                values.push(entry[prop]);
            }
            return values;
        }
    //get all keys
        this.getKeys = function(){
            var keys = new Array();
            for(var prop in entry){
                values.push(prop);
            }
            return keys;
        }
    this.getSize = function(){
        return size;
    }

    this.clear = function(){
        size = 0;
        entry = new Object;//???????????????????
    }
}

var hashtest = new HashTable();
hashtest.add('name','LiMing');

＆＃13;

无论我运行多少次，我都没有问题。值得注意的是，帧时间始终存在一个条形 - 但它可以代表＆＃34;空闲帧时间＆＃34;。

我没有得到任何明显的警告。

如果您仍有此问题，请提供一个示例 - 尤其是如果您网页上还有其他内容可能是一个因素。

“长帧时间表明了jank”

1 个答案: