[javascript] Chrome 위반 : [위반] 핸들러 실행 시간이 83ms 걸렸습니다.

내 프로젝트에서 Facebook의 로그 아웃 기능을 구현하려고합니다. 로그인이 잘 작동합니다. 하지만 로그 아웃 코드와 함께 JavaScript 콘솔에서 다음 메시지가 표시됩니다.

[위반] 장기 실행 자바 스크립트 작업은 318ms 소요 session.php : 51 1 sdk.js : 135

[위반] 처리기가 83ms의 런타임 소요 (50ms 허용)

다른 유사한 스레드를 검색하려고 시도했지만 해당 솔루션이 작동하지 않았습니다. 내 코드의 일부를 제거하고 어떤 부분이 문제를 일으키는 지 확인했습니다. 메시지에서 볼 수 있듯이 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를 제거했습니다. 도움을 주시면 감사하겠습니다. 🙂



답변

‘Chrome 위반’은 Chrome 또는 자체 웹 앱의 오류를 나타내지 않습니다. 대신 앱을 개선하는 데 도움이되는 경고입니다. 이 경우, Long running JavaScripttook 83ms of runtime스크립트 속도를 높일 수있는 기회가 거기에 아마 당신을 경고하고 있습니다.

( ‘위반’은 최고의 용어가 아닙니다. 여기에서 스크립트가 사전 정의 된 가이드 라인을 ‘위반’한다는 것을 암시하는 데 사용되지만 ‘경고’또는 이와 유사한 것이 더 명확합니다. 이러한 메시지는 2017 년 초 Chrome에 처음 나타 났으며 이상적으로는 의미를 자세히 설명하고 개발자에게 제안 된 작업을 제공하는 “추가 정보”프롬프트. 향후 추가 될 예정입니다.)


답변

아마도 약간 벗어난 주제 일 수 있습니다 setTimeout. 아래와 같은 비동기 함수 내부에서 중단 점을 사용하여 코드를 디버깅 할 때 이러한 종류의 메시지를 볼 수도 있습니다 .

[Violation] 'setTimeout' handler took 43129ms

이 숫자 (43129ms)는 비동기 함수에서 중지하는 시간에 따라 다릅니다.


답변

해결책을 찾은 것 같지만 Chrome 59를 기반으로 한이 페이지 에서 다른 사람들에게 여전히 도움이 될 것 입니다.

4. Animation Frame Fired 이벤트의 오른쪽 상단에있는 빨간색 삼각형을 확인합니다. 빨간색 삼각형이 표시 될 때마다이 이벤트와 관련된 문제가있을 수 있다는 경고입니다.

이 삼각형 위로 마우스를 가져 가면 위반 처리기 오류 임을 알 수 있으며, 4 번 지점에 따라 해당 이벤트와 관련된 몇 가지 문제가 있습니다.


답변