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

Display elements on hover of thumbnails using CSS

Using Javascript to Manuever an Element via Arrow Inputs

Get Angular events in the proper order

Executing a message in Azure Service Bus using Javascript/Node.js

What causes the picturesArray to remain consistently void?

When an image is clicked, I would like it to redirect to a different page

The interval in the AJAX callback is causing the variable to not update as expected

Need to return false even though Jquery form check currently returns true

encountering a problem with permissions while attempting to update npm

Issue with implementing autocomplete using AJAX and PHP for multiple input fields

Creating a Vue.js component during the rendering process of a Laravel Blade partial view

What is the best way to manage a promise in Jest?

Every time I use my NodeJS MySQL Query function, the results I get are never

Problem with Onsen UI navigation: It is not possible to provide a "ons-page" element to "ons-navigator" when attempting to navigate back to the initial page

Posting several pictures with Protractor

Navigation through dots on a single page

Tips for increasing the size of a parent div when a child div is displayed with a set width?

Implement a redux-form within a react-bootstrap modal

"Performing validation on a number input by using the ng-change event

What could be causing my webpage to freeze every time a filter button is selected?