Menu
Menu Sheet Overlay
Search
Search Sheet

Task-splitting

    How does Task-splitting work?

    Browser interactivity (responsiveness to user input) depends on the browser’s main execution thread being available to respond to user events. Long-running Javascript tasks block the main thread while they execute, reducing interactivity.

    The task-splitting code provides a function called defer, which takes a function as its argument and will execute that function when the main thread is available. It maintains a queue of functions waiting to be executed, and executes them in order, releasing the browser’s main thread between functions. This makes the browser more responsive to user input.

    When task-splitting is enabled, Promise handlers (functions passed to then and catch) are executed using defer, so that they don’t block the main thread.

    You can also use defer for your own code, if needed. It operates like setTimeout or requestIdleCallback. You can use defer without enabling task-splitting.

    Enabling Task-splitting

    Task-splitting uses the Bluebird Promise library.

    Here’s an example of how you would enable task-splitting in the main.jsx file of your PWA:

    import {PerformanceManager} from 'progressive-web-sdk/dist/utils/performance-manager'
    
    const performanceManager = PerformanceManager.getManager()
    
    // setTaskSplitting returns a Promise that uses task-splitting, if configured,
    // so you can chain tasks from it.
    performanceManager.setTaskSplitting(true)
        .then(myFirstTask)
        .then(mySecondTask)
    

    Using defer for your own functions

    import {PerformanceManager} from 'progressive-web-sdk/dist/utils/performance-manager'
    

    Then, to execute a function when the browser thread is available:

    const myFunction = () => {
        // do work...
    }
    
    PerformanceManager.defer(myFunction)
    

    Development options

    The Bluebird Promise implementation supports a number of configuration options. You can pass an options object as the second parameter to setTaskSplitting when enabling task-splitting. For example:

    performanceManager.setTaskSplitting(
        true,
        {
            // Assumes that DEVELOPMENT is true for a dev build, false in production
            longStackTraces: DEVELOPMENT
        }
    )