Chrome 违规：[Violation] 处理程序花费了 83 毫秒的运行时间
Posted
技术标签:
【中文标题】Chrome 违规：[Violation] 处理程序花费了 83 毫秒的运行时间【英文标题】：Chrome violation : [Violation] Handler took 83ms of runtime 【发布时间】：2017-07-02 07:16:13 【问题描述】：我正在尝试在我的项目中实现 Facebook 的注销功能。登录工作得很好。但我正面临着在 javascript 控制台中使用注销代码收到以下消息。
[违规] 长时间运行的 JavaScript 任务耗时 318ms session.php:51 1 sdk.js:135
[Violation] 处理程序耗时 83 毫秒（允许 50 毫秒）
我已尝试搜索其他类似的主题，但这些解决方案对我来说并不奏效。我尝试删除部分代码，看看哪一部分出现问题。很明显，由于消息中看到的 Facebook 的 JS SDK，它得到了错误。我还禁用了我的所有 Chrome 扩展程序。
代码在 Firefox 中可以正常工作，但在 Chrome 和 Opera 中都不行。有什么方法可以延长这个超时时间吗？或任何其他在 chrome 中解决此问题的方法。这是我的注销代码。
<?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。任何帮助表示赞赏。 :)
【问题讨论】：
这只是一个警告，你不必关心它，你的代码仍然可以工作。 @NoNameProvided 但是注销功能在 Chrome 中不起作用。它无法重定向到 Chrome 中的 login.php 页面。 事件如果不起作用，则与违规消息无关。它们只是非正式的，对您的代码没有影响。 @NoNameProvided 那么代码为什么在 Firefox 中可以运行，而在 Chrome 中却不行呢？我检查了代码，它是正确的。你可以自己去看看。 好像是重复的：***.com/questions/41218507/… 【参考方案1】：这只是一个警告，它通知存在延迟或等待继续使用代码 a（未来）。正如他们在上面的评论中所说，这可以由一个简单的警报触发，您可以通过将其放置在 JS 代码中间等待用户响应来对其进行测试。
例如，如果您发出警报（“我等你”），您会看到您给出的速度越快，它会减少警告“[Violation]'change' handler took 1496ms”中的时间。
在您的情况下，这是因为您有一个连接检查“（response.status === 'connected'）”这应该等待连接响应。
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。【参考方案2】：要知道这种消息在你使用的时候也可以看到
alert("bla bla");
这件事发生在我身上，所以我与你分享。
【讨论】：
这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review【参考方案3】：我意识到我可以忽略这种违规行为。但是，当我尝试 Ray Foss 的答案时，违规行为消失了！
我借用了他的 sleep 函数，然后添加了“await sleep(1)”作为导致违规消息的函数的第一行。代码仍然运行良好，并且控制台中不再显示违规消息！
我不得不对 Ray 的例子做一点改动。被声明为异步函数的函数仍然需要“function”关键字。
因此，在 Ray 的示例中，“async timeoutHandler()”应该是“async function timeoutHandler()”。一旦我进行了更改，代码运行良好。
注意：从技术上讲，由于调用了 sleep(1) 函数，我的函数现在慢了一点。但是，这并不明显，而且在我看来，让违规消息消失的开销是值得的。
【讨论】：
这不是答案，更适合作为对您所指帖子的评论。 我还没有评论帖子的声誉。但是，我想说明需要稍作调整才能让其他用户的答案正常工作。我同意这将更适合作为评论，并且一旦我值得，将来会这样做。【参考方案4】：由于没有人回答如何让它消失...事实证明，如果您的处理程序是带有 await 方法的异步函数，它将抑制消息。
function sleep (ms)
return new Promise(resolve => setTimeout(resolve, ms))
async timeoutHandler()
await sleep(1)
... // heavy duty code here
setTimeout(timeoutHandler, 10000)
如果你经常这样做......最好用专用抑制器方法替换 sleep(1) 。我只是碰巧在我的实用程序中睡着了，用于调试竞争条件。
【讨论】：
长时间运行 JS 警告的目的是减少 UI 阻塞。使用setTimeout() 使您的代码异步是您的方法。网络请求和其他一些 API 本身也是异步的。【参考方案5】：
您似乎已经找到了解决方案，但它仍然会对其他人有所帮助，在基于 Chrome 59 的this page 上。
4.注意Animation Frame Fired 事件右上角的红色三角形。每当你看到一个红色三角形时，它就是一个警告，可能有 是与此事件相关的问题。
如果您将鼠标悬停在这些三角形上，您可以看到这些是违规处理程序错误，根据第 4 点。是的，存在与该事件相关的一些问题。
【讨论】：
【参考方案6】：“Chrome 违规”不代表 Chrome 或您自己的网络应用程序中的错误。相反，它们是帮助您改进应用程序的警告。在这种情况下，Long running JavaScript 和 took 83ms of runtime 会提醒您可能有机会加速您的脚本。
（“违规”不是最好的术语；这里使用它来暗示脚本“违反”预定义的准则，但“警告”或类似内容会更清楚。这些消息于 2017 年初首次出现在 Chrome 中，应该最好有一个“更多信息”提示来详细说明含义并向开发人员提供建议的操作。希望将来会添加这些内容。）
【讨论】：
【参考方案7】：也许有点离题，请注意，当您使用异步函数（如 setTimeout）内的断点调试代码时，也会看到此类消息，如下所示：
[Violation] 'setTimeout' handler took 43129ms
该数字 (43129ms) 取决于您在异步函数中停止的时间
【讨论】：
多亏了这条评论，我才能找到这个话题并得到答案，不管是否离题，这非常有用。 我在使用 webpack-dev-server 时遇到了这个警告，但这个问题只影响了开发环境。在生产版本中很好以上是关于Chrome 违规：[Violation] 处理程序花费了 83 毫秒的运行时间的主要内容，如果未能解决你的问题，请参考以下文章
CoreData multithreading_violation 调试
在解决控制台中的 [Violation] 警告时滚动 DIV 时防止页面滚动
React-Native = Invariant Violation：超过最大更新深度
Invariant Violation：文本字符串必须在 Text 组件中呈现