[Violation] Forced reflow while executing JavaScript took 50ms code example

Example 1: [violation] forced reflow while executing javascript took

Update: Chrome 58+ hid these and other debug messages by default. To display them click the arrow next to 'Info' and select 'Verbose'.

Chrome 57 turned on 'hide violations' by default. To turn them back on you need to enable filters and uncheck the 'hide violations' box.

suddenly it appears when someone else involved in the project

I think it's more likely you updated to Chrome 56. This warning is a wonderful new feature, in my opinion, please only turn it off if you're desperate and your assessor will take marks away from you. The underlying problems are there in the other browsers but the browsers just aren't telling you there's a problem. The Chromium ticket is here but there isn't really any interesting discussion on it.

These messages are warnings instead of errors because it's not really going to cause major problems. It may cause frames to get dropped or otherwise cause a less smooth experience.

They're worth investigating and fixing to improve the quality of your application however. The way to do this is by paying attention to what circumstances the messages appear, and doing performance testing to narrow down where the issue is occurring. The simplest way to start performance testing is to insert some code like this:

function someMethodIThinkMightBeSlow() {
    const startTime = performance.now();

    // Do the normal stuff for this function

    const duration = performance.now() - startTime;
    console.log(`someMethodIThinkMightBeSlow took ${duration}ms`);
}
If you want to get more advanced, you could also use Chrome's profiler, or make use of a benchmarking library like this one.

Once you've found some code that's taking a long time (50ms is Chrome's threshold), you have a couple of options:

Cut out some/all of that task that may be unnecessary
Figure out how to do the same task faster
Divide the code into multiple asynchronous steps
(1) and (2) may be difficult or impossible, but it's sometimes really easy and should be your first attempts. If needed, it should always be possible to do (3). To do this you will use something like:

setTimeout(functionToRunVerySoonButNotNow);
or

// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);
You can read more about the asynchronous nature of JavaScript here.

Example 2: [Violation] 'requestIdleCallback' handler took ms

<?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>

Tags:

Javascript Example

Recent Posts