Javascript Chrome 违规:[违规] 处理程序占用了 83 毫秒的运行时间

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/42218699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 00:59:25  来源:igfitidea点击:

Chrome violation : [Violation] Handler took 83ms of runtime

javascriptgoogle-chromefacebook-javascript-sdk

提问by FreeKrishna

I'm trying to implement the Facebook's logout functionality in my project. Login works just fine. But I'm facing the getting the following message in JavaScript console with the logout code.

我正在尝试在我的项目中实现 Facebook 的注销功能。登录工作正常。但是我面临着在带有注销代码的 JavaScript 控制台中收到以下消息。

[Violation] Long running JavaScript task took 318ms session.php:51 1 sdk.js:135

[Violation] Handler took 83ms of runtime (50ms allowed)

[违规] 长时间运行的 JavaScript 任务耗时 318 毫秒 session.php:51 1 sdk.js:135

[违规] 处理程序占用了 83 毫秒的运行时间(允许 50 毫秒)

I've tried to search for other similar threads and those solutions didn't work out for me. I tried removing parts of my code and see which part is giving problem. Its quite clear that its getting the error due to Facebook's JS SDK as seen in the message. I've also disabled all of my Chrome extensions.

我试图搜索其他类似的线程,但这些解决方案对我不起作用。我尝试删除部分代码并查看哪部分出现问题。很明显,如消息中所示,由于 Facebook 的 JS SDK 导致错误。我还禁用了所有 Chrome 扩展程序。

The code works fine in Firefoxbut not in Chrome, nor in Opera. Is there any method for me to extend this timeout duration? Or any other method to fix this issue in chrome. Here is my code for logout.

代码在 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>

For obvious reasons I've removed the App-Id from the code. Any help is appreciated. :)

出于显而易见的原因,我从代码中删除了 App-Id。任何帮助表示赞赏。:)

回答by mahemoff

"Chrome violations" don't represent errors in either Chrome or your own web app. They are instead warnings to help you improve your app. In this case, Long running JavaScriptand took 83ms of runtimeare alerting you there's probably an opportunity to speed up your script.

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

("Violation" is not the best terminology; it's used here to imply the script "violates" a pre-defined guideline, but "warning" or similar would be clearer. These messages first appeared in Chrome in early 2017 and should ideally have a "More info" prompt to elaborate on the meaning and give suggested actions to the developer. Hopefully those will be added in the future.)

(“违反”不是最好的术语;它在这里用来暗示脚本“违反”预定义的准则,但“警告”或类似的会更清楚。这些消息于 2017 年初首次出现在 Chrome 中,理想情况下应该有一个“更多信息”提示详细说明含义并为开发人员提供建议的操作。希望将来会添加这些内容。)

回答by Reza

Perhaps a little off topic, just be informed that these kind of messages can also be seen when you are debugging your code with a breakpoint inside an async function like setTimeoutlike below:

也许有点离题,只是被告知,当您使用异步函数内的断点调试代码时,也可以看到这些类型的消息,setTimeout如下所示:

[Violation] 'setTimeout' handler took 43129ms

That number (43129ms) depends on how long you stop in your async function

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

回答by Prafulla Kumar Sahu

It seems you have found your solution, but still it will be helpful to others, on this pageon point

似乎你已经找到了你的解决方案,但它仍然对其他人有帮助,在这个页面

4.Note the red triangle in the top-right of the Animation Frame Fired event. Whenever you see a red triangle, it's a warning that there may be an issue related to this event.

4.注意 Animation Frame Fired 事件右上角的红色三角形。每当您看到红色三角形时,即表示可能存在与此事件相关的问题的警告。

If you hover on these triangle you can see those are the violation handler errorsand as per point 4. yes there is some issue related to that event.

如果您将鼠标悬停在这些三角形上,您可以看到这些是违规处理程序错误,并且根据第 4 点。是的,存在与该事件相关的一些问题。