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

【问题标题】：Chrome violation : [Violation] Handler took 83ms of runtimeChrome 违规：[Violation] 处理程序花费了 83 毫秒的运行时间
【发布时间】：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 中却不行呢？我检查了代码，它是正确的。你可以自己去看看。
好像是重复的：stackoverflow.com/questions/41218507/…

标签： javascript google-chrome facebook-javascript-sdk

【解决方案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 时遇到了这个警告，但这个问题只影响了开发环境。在生产版本中很好