Chrome 违规: [违规]处理程序花费了83毫秒的运行时间

我试图在我的项目中实现 Facebook 的注销功能。登录没问题。但是我面对的是在 JavaScript 控制台中使用注销代码得到以下消息。

[违规]长时间运行 JavaScript 任务耗时318毫秒 session. php: 511 Sdk.js: 135

处理程序需要83毫秒的运行时间(允许50毫秒)

我曾试图搜索其他类似的线程，但这些解决方案并不适合我。我尝试删除部分代码，看看哪一部分出了问题。很明显，这个错误是由于 Facebook 的 JS SDK 造成的，就像在消息中看到的那样。我还关闭了所有的 Chrome 扩展。

代码 在 Firefox 中运行良好但是 Chrome 和 Opera 都没有。有什么方法可以延长这个超时时间吗？或任何其他方法，以解决这个问题在铬。这是我的注销代码。

<?php
session_start();
//echo $_SESSION["current_user"];
//echo $_COOKIE["current_user"];
session_destroy();
unset($_COOKIE["current_user"]);
setcookie("current_user","",time() -3600, "/","", 0);
//header("location: login.php");
?>


<!doctype html>


<html>
<head>
</head>
<body>


<script>


// Default settings
window.fbAsyncInit = function() {
FB.init({
appId      : '<app-id>',
cookie     : true,
xfbml      : true,
version    : 'v2.8'
});
FB.AppEvents.logPageView();
};


(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));


window.onload = function(){
logout();
}
function logout(){
console.log("1");
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.logout();
console.log("2");
window.location="login.php";
console.log("3");
}
else{
console.log("4");
window.location="login.php";
console.log("5");
}
});
}
</script>
</body>
</html>

出于显而易见的原因，我已经从代码中删除了 App-Id

364320 次浏览
小开

“ Chrome 违规”并不代表 Chrome 或你自己的网络应用程序中的错误。相反，它们是帮助您改进应用程序的警告。在这种情况下，Long running JavaScript和 took 83ms of runtime会提醒您可能有机会加快脚本的速度。

(“违反”不是最好的术语; 这里使用它来暗示脚本“违反”预定义的指导原则，但是“警告”或类似的词语会更清楚。这些信息最早出现在2017年初的 Chrome 浏览器上，理想的情况下应该有一个“更多信息”提示，详细说明其含义，并向开发者提供建议行动。希望这些将来会被添加进来。)

小开

看来你已经找到了你的解决方案，但仍然会对其他人有所帮助，在 这一页的点基于 Chrome 59。

4.注意 AnimationFrameFired 事件右上角的红色三角形。每当你看到一个红色的三角形，这是一个警告，有可能 与此事件有关的问题。

如果你悬停在这些三角形上，你可以看到这些是 违规处理程序错误和每点4。是的，有一些与那件事有关的问题。

小开

也许有点跑题了，但是这些消息也可以在使用异步函数(如 setTimeout)中的断点调试代码时看到，如下所示:

[Violation] 'setTimeout' handler took 43129ms

这个数字(43129ms)取决于您在异步函数中停止的时间

小开

由于没有人回答如何使它消失... 结果是，如果您的处理程序是一个带等待方法的异步函数，它将抑制消息。

const sleep = (s) =>
new Promise((p) => setTimeout(p, (s * 1000) | 0))


async function timeoutHandler() {
await sleep(1)
... // heavy duty code here
}


setTimeout(timeoutHandler, 10000)

如果你经常这样做... 最好用一种专门的抑制方法来代替睡眠。我只是碰巧有睡眠躺在我的实用程序调试比赛条件。

小开

我意识到我可以忽略这个违规行为。但是，当我尝试雷 · 福斯的答案时，违规行为消失了！

我借用了他的 sleep 函数，然后添加了“ waiting sleep (1)”作为导致违规消息的函数的第一行。代码仍然运行良好，并且违规消息不再显示在控制台中！

我不得不对雷的例子做一个修改。声明为异步函数的函数仍然需要“ function”关键字。

因此，在 Ray 的示例中，“异步 timeoutHandler ()”应该是“异步函数 timeoutHandler ()”。我做了这个更改之后，代码运行良好。

注意: 从技术上讲，由于调用 sleep (1)函数，我的函数现在有点慢。但是，这并不明显，而且在我看来，为了消除违规信息，花费一些开销是值得的。

小开

这只是一个警告，它通知有一个延迟或等待继续代码 a (未来)。正如他们在上面的注释中所说，这可以由一个简单的警报触发，您可以通过将它放在 JS 代码的中间等待用户的响应来测试它。

例如，如果你发出一个警告(“我等你”) ，你会发现你发出的越快，它会减少警告“[违规]‘更改’处理程序花费了1496ms”的时间。

在您的情况下，这是因为您有一个连接检查“(response. status = = = ‘ connect’)”，这应该等待连接响应。

小开

这只能回答 why we see this message.

通过 default，详细的是 off。

Verbose is on

当 Verbose设置为 On时，我们看到这条消息。

因此，除非你有严重的性能问题，我们可以把它回到其默认设置的 Off，在这种情况下，我没有看到消息了，不再阻碍我自己的日志消息。

小开

这个警告: [Violation] 'setTimeout' handler took 126ms正是它所说的，你有一个处理程序，从大多数同步调用，它需要 126毫米为您的计算机处理它。

由于 JavaScript 不是多线程的，并且每个同步任务都会阻塞 UI，因此 100毫米同步任务是非常明显的。(60 FPS是 16毫秒)

所以你必须认真对待这个警告，因为它意味着你的 UI 是滞后的。

要解决这个问题，必须将有问题的任务分成多个小任务。您可以通过启动异步作业来实现这一点，因为每个异步作业都将转到队列的末尾，所以它们将在稍后处理，从而为 UI 留出计算空间。


提交答案