You are here

[Violation] 'click' handler took 429ms 有大用有大大用

星期日, 2022-07-17 07:47 — adminshiping1

问题

violation 意思为侵权,违背,违反,也就是说明click函数执行违反了某些规则

原因测试

当click事件中执行的程序耗时过长,超过160ms左右的时候就会显示该信息,测试最低155ms
由于js本身是单线程运行,而click执行时间从函数放入调用栈到函数弹出调用栈的时间来计算
可以通过alert()函数测试,当快速按下回车的时候,不会显示该信息,当稍微慢一点的时候就会显示该信息,但是本身并不会导致程序运行异常,在js来看,click函数不应该执行过长时间,不然会导致线程阻塞,页面卡死的情况

<button onclick="alert(1122)">alert</button>

测试截图

来自 https://www.jianshu.com/p/7602ba4ff7b8

[Violation] ‘click’ handler took 1839ms 原因与解决方法

今天在项目调试的时候，发现有一段JavaScript代码有如下提示：

[Violation] 'click' handler took 1839ms 164-1.html:633

中文翻译

[违规] 'click' 处理程序耗时 1839 毫秒，文件是164-1.html第633行代码

原因：

既然知道了是哪一个文件哪一行的报错，我们只需要去看下代码即可！

重点如下图：

解决方法

我仔细去看了一下以上这段代码，这段JS代码只是一个原生的“JavaScript + Ajax”异步POST请求，而且返回的数据也是正常的。

JavaScript代码如下：

    document.getElementById("comment_submit").onclick =  function () {
        alert("表单已提交");
        //alert(document.getElementById("comment_submit"));
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                console.log(xmlhttp.responseText);
            }
        };
        var data = "&comment_id=120"  + "&content_id=<?php echo $id; ?>" + "&mode=oppose";
        console.log(data);
        xmlhttp.open("POST","/admin/comments-post.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(data);
    }

由于我对前端JS算不上精通，就我目前来看，我的此段JS代码是没有任何问题的。既然它只有一个提示，也没有像那种标红报错的error，返回的数据也是正常的，业务也是通的，由于时间关系，暂时先不管了。

有知道原因的朋友请评论区留言，非常感谢！

来自 https://www.fujieace.com/javascript/violation-click-handler-took.html

Vue项目中浏览器终端警告[Violation] ‘click‘ handler took 1137ms

出现这种问题怎么办呢?

1.首先理解报错的意思
2.找到出错的位置
3根据警告提示来找错

解决

这个警告说的是单击处理程序耗时太长了

然后去找报错的位置,一般在后面都会跟着位置在哪一行,但是我很幸运的没有,这就很难受,只能自己找,既然是单击事件,那肯定是在我做了单击之后报的错,看了一下代码如下

<el-button size="small" type="primary" @click="submitForm">确定</el-button>
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
alert('submit!')    // 就是这行代码的影响才会警告
} else {
console.log('error submit!!')
return false
}
})
},

但是我这段代码啥也没做,只有一个alert弹窗,试着把他隐藏了,发现问题解决了.....

至于原因呢,

我觉得应该是,单击事件本来就是点击一下就完成的事件,但是添加了一个alert弹窗之后,就延长了单击事件的时间,只有这个alert弹窗关闭之后单击事件才会结束,因为是单线程操作,这样就会严重影响后续代码的运行,所以才会警告

来自 https://blog.csdn.net/chai_tian/article/details/119777773

普通分类:

javascript

搜索表单

用户登录