Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

Question

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

My JavaScript method works fine in Chrome, taking about 2000 ms to iterate over ~200 inputs, insert values, and trigger onchange events. However, it's a different story in IE where it takes about 10000 ms.

To show the progress of this process, I decided to implement a progress bar but encountered an issue - the browser wouldn't repaint the progress bar until the very end when it immediately jumps to 100%.

I tried three different methods I found during my research:

Running the progress bar update in a setTimeout with zero or non-zero timeout
Accessing the height property of the element or adjacent elements to force repaint
Show/hide the element and access the offsetHeight property simultaneously

Here is a snippet of my code:

    <div class="cg-progress-bar">
        <div class="cg-progress-bar-completed">
            &nbsp;
        </div>
        <div class="cg-inline-block cg-progress-bar-force-repaint">
            &nbsp;
        </div>
    </div>

JavaScript:

var progressBarCurrent = 0;
var progressBarTotal = 236;

$.each(sqlData, function(column, value){
        //performing some tasks to update input values

        //update progress bar
        progressBarCurrent++;
        if (progressBarCurrent % 22 === 0) {
            var percentageComplete = Math.floor( (progressBarCurrent/progressBarTotal)*100 ) + "%";    

            var bar = $(".cg-progress-bar-completed").width(percentageComplete)[0];

            //workarounds to force repaint
            bar.style.display = 'none';
            bar.offsetHeight;
            bar.style.display = '';

            setTimeout(function() { bar.style.display = 'block'}, 0);

            $(".cg-progress-bar-completed").animate({ width: percentageComplete }, 100).height();

            bar.appendChild(document.createTextNode(' '));
            $(bar).hide().show(0);
            bar.appendChild(document.createTextNode(' '));

            $(window).trigger("resize");
        }
    }
});

How can I effectively force the browser to repaint?

javascript jquery html css repaint

Answer 1

Answer №1

If your process is too heavy, it could be causing the execution thread to collapse. This can lead to the browser freezing momentarily while calculations are being carried out, making it impossible to interact with the UI during this time.

To prevent this from happening, HTML5 offers web workers technology. This technology allows you to simulate multitasking in browser environments and enables you to perform resource-intensive tasks without causing the browser to freeze.

Check out this informative article on web workers that I found helpful when creating a file uploader capable of uploading large files while displaying a live progress bar:

https://www.html5rocks.com/en/tutorials/workers/basics/

I hope this information proves useful to you.

Answer 2

If your process is too heavy, it could be causing the execution thread to collapse. This can lead to the browser freezing momentarily while calculations are being carried out, making it impossible to interact with the UI during this time.

To prevent this from happening, HTML5 offers web workers technology. This technology allows you to simulate multitasking in browser environments and enables you to perform resource-intensive tasks without causing the browser to freeze.

Check out this informative article on web workers that I found helpful when creating a file uploader capable of uploading large files while displaying a live progress bar:

https://www.html5rocks.com/en/tutorials/workers/basics/

I hope this information proves useful to you.

Answer 3

Answer №2

After my previous attempt failed, I have come up with a working solution:

index.html


        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>-</title>
            <style type="text/css" media="screen">
                div{
                    margin: 0px;
                    padding: 0px;
                    height: 30px;
                }
                #wrapper{
                    width: 300px;
                    border: solid 1px black;
                }
                #progressBar{
                    width: 0px;
                    background-color: black;
                    color: grey;
                }
            </style>
        </head>
        <body>
            <div id="wrapper"><div id="progressBar"></div></div>
            <script type="text/javascript">

                var progressBar = document.getElementById("progressBar")    
                var workerThread = new Worker('worker.js');

                function drawProgress(progress){
                    var percentageComplete = Math.floor( (progress.current/progress.maximum)*100 ) + "%";
                    progressBar.style.setProperty("width",percentageComplete)
                }

                workerThread.onmessage = function(e){
                    drawProgress(e.data)
                }
            </script>
        </body>
        </html>

worker.js


        var sqlData = new Array( 236 );
        var i = 0;
        for ( let entry of sqlData ) {
            console.log( 'iteration of each' );
            postMessage( {
                current: i,
                maximum: sqlData.length
            } )
            for ( var n = 0; n < 200000; n++ ) {
                for ( let entry of sqlData ) {
                    entry = Math.random()
                }
            }
            i++;
        }

This approach seems to be the most feasible option without any workaround. The only challenge is integrating JQuery into the worker thread. One possible solution is to fetch the SQL dataset entirely in the main thread before transferring it to the worker.

Answer 4

After my previous attempt failed, I have come up with a working solution:

index.html


        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>-</title>
            <style type="text/css" media="screen">
                div{
                    margin: 0px;
                    padding: 0px;
                    height: 30px;
                }
                #wrapper{
                    width: 300px;
                    border: solid 1px black;
                }
                #progressBar{
                    width: 0px;
                    background-color: black;
                    color: grey;
                }
            </style>
        </head>
        <body>
            <div id="wrapper"><div id="progressBar"></div></div>
            <script type="text/javascript">

                var progressBar = document.getElementById("progressBar")    
                var workerThread = new Worker('worker.js');

                function drawProgress(progress){
                    var percentageComplete = Math.floor( (progress.current/progress.maximum)*100 ) + "%";
                    progressBar.style.setProperty("width",percentageComplete)
                }

                workerThread.onmessage = function(e){
                    drawProgress(e.data)
                }
            </script>
        </body>
        </html>

worker.js


        var sqlData = new Array( 236 );
        var i = 0;
        for ( let entry of sqlData ) {
            console.log( 'iteration of each' );
            postMessage( {
                current: i,
                maximum: sqlData.length
            } )
            for ( var n = 0; n < 200000; n++ ) {
                for ( let entry of sqlData ) {
                    entry = Math.random()
                }
            }
            i++;
        }

This approach seems to be the most feasible option without any workaround. The only challenge is integrating JQuery into the worker thread. One possible solution is to fetch the SQL dataset entirely in the main thread before transferring it to the worker.

Answer 5

Answer №3

@J97 mentioned that compatibility with IE9+ is important. Thus, to ensure support for IE8+, here is a modified solution:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Enhanced IE8 Support</title>
    <style type="text/css">
        div{
            margin: 0px;
            padding: 0px;
            height: 30px;
        }
        #wrapper{
            width: 300px;
            border: solid 1px black;
        }
        #progressBar{
            width: 0px;
            background-color: black;
            color: grey;
        }
    </style>
</head>
<body>
    <div id="wrapper"><div id="progressBar"></div></div>
    <script type="text/javascript">
        var continueExecution = false;
        var progressBar = document.getElementById( "progressBar" );
        var i = 0;
        var sqlData = new Array( 236 );
        var lastDraw = (new Date).valueOf();

        function heavyloadFunction() {
            var entry = sqlData[ i ]

            // perform tasks on the entry
            for ( var n = 0; n < 2000; n++ ) {
                for ( var h = 0; h < sqlData.length; h++ ) {
                    var cEntry = sqlData[h]
                    cEntry = Math.random()
                }
            }

            // complete entry work

            if(i < sqlData.length){
                i++;
                continueExecution = true;
            }else{
                console.log("finished")
                continueExecution = false;
            }
        }

        function drawProgress( progress ) {
            var percentageComplete = Math.floor( ( progress.current / progress.maximum ) * 100 ) + "%";
            progressBar.style.width = percentageComplete
        }

        function shouldReDraw(){
            var dNow = (new Date).valueOf();
            if(dNow - lastDraw > 16){
                // aiming for around 60fps
                lastDraw = dNow;
                return true;
            }else{
                return false;
            }
        }

        function excutionLoop() {
            heavyloadFunction();

            if ( continueExecution ) {
                if(shouldReDraw()){
                    drawProgress({
                        current: i,
                        maximum: sqlData.length
                    })

                    window.setTimeout( excutionLoop, 0 )
                }else{
                    excutionLoop()
                }
            }else{
                drawProgress({
                    current: i,
                    maximum: sqlData.length
                })
            }           
        }

        excutionLoop();
    </script>
</body>
</html>

The concept is simple: pause execution during each loop iteration to allow for redrawing.

UPDATE: Implemented a minor enhancement to prevent drawing from causing performance issues.

Answer 6

@J97 mentioned that compatibility with IE9+ is important. Thus, to ensure support for IE8+, here is a modified solution:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Enhanced IE8 Support</title>
    <style type="text/css">
        div{
            margin: 0px;
            padding: 0px;
            height: 30px;
        }
        #wrapper{
            width: 300px;
            border: solid 1px black;
        }
        #progressBar{
            width: 0px;
            background-color: black;
            color: grey;
        }
    </style>
</head>
<body>
    <div id="wrapper"><div id="progressBar"></div></div>
    <script type="text/javascript">
        var continueExecution = false;
        var progressBar = document.getElementById( "progressBar" );
        var i = 0;
        var sqlData = new Array( 236 );
        var lastDraw = (new Date).valueOf();

        function heavyloadFunction() {
            var entry = sqlData[ i ]

            // perform tasks on the entry
            for ( var n = 0; n < 2000; n++ ) {
                for ( var h = 0; h < sqlData.length; h++ ) {
                    var cEntry = sqlData[h]
                    cEntry = Math.random()
                }
            }

            // complete entry work

            if(i < sqlData.length){
                i++;
                continueExecution = true;
            }else{
                console.log("finished")
                continueExecution = false;
            }
        }

        function drawProgress( progress ) {
            var percentageComplete = Math.floor( ( progress.current / progress.maximum ) * 100 ) + "%";
            progressBar.style.width = percentageComplete
        }

        function shouldReDraw(){
            var dNow = (new Date).valueOf();
            if(dNow - lastDraw > 16){
                // aiming for around 60fps
                lastDraw = dNow;
                return true;
            }else{
                return false;
            }
        }

        function excutionLoop() {
            heavyloadFunction();

            if ( continueExecution ) {
                if(shouldReDraw()){
                    drawProgress({
                        current: i,
                        maximum: sqlData.length
                    })

                    window.setTimeout( excutionLoop, 0 )
                }else{
                    excutionLoop()
                }
            }else{
                drawProgress({
                    current: i,
                    maximum: sqlData.length
                })
            }           
        }

        excutionLoop();
    </script>
</body>
</html>

The concept is simple: pause execution during each loop iteration to allow for redrawing.

UPDATE: Implemented a minor enhancement to prevent drawing from causing performance issues.

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to utilize OpenLayers to showcase various icons for distinct features all within one layer?

Using React Native to integrate a JSON string into a button

Remove the empty or null value from the Select dropdown using jQuery and automatically select the next option with a valid value

The 'userEvent.type' function in React Testing Library is failing to update the input value in a Material UI TextField component that has

Using Vue.js to invoke an external JavaScript function for search functionality

Node.js middleware for verifying required parameters

How to Programmatically Assign Bootstrap Class to an Element Using Angular 2

`The process of adding an element to the beginning of an array``

What is the best method for retrieving values from a FlexiGrid?

Enhancing AngularJS view rendering using ngshow

What are the steps for skipping, sorting, and limiting with dynamoose?

Using innerHTML in React to remove child nodes Tutorial

``Change the color of the sections in a 3D pie chart on a Highcharts

Eliminating the need for the horizontal scroll bar on the webpage

Updating an element within a for loop using Angular TypeScript

Issues with Vue Router functionality in Leaflet Popup are causing unexpected behavior

Looking to display the "loading....." message on a PHP page?

Encountering an issue with connecting nodejs to mqlight

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

Importing styles from an external URL using Angular-cli