Leaving presentation mode.

TPAC Breakout:
Web Worker
Quality of Service

Rijubrata Bhaumik, Zhibo Wang [Intel]

★ W3C TPAC 2023, Seville, 13 September ★

Surma on the Chrome Dev Summit 2019 talk.

Web Workers

In video conference, audio processing (noise suppression, echo cancellation) and video processing (background blur/replacement) is widely used. Zoom use a WASM backend for background blur. Google MediaPipe can also be run in web workers.
Web workers has now been supported by all mainstream browsers.

Workloads characteristics

Web workers are default to be normal thread priority, default thread quality of service. However, workloads have characteristics and can be optimized for performance or efficiency, on modern CPUs. In online conference audio glitches has a worse user experience than video latency, so audio processing thread should be prioritized.

Windows

SetThreadPriority()

SetThreadInformation() (ThreadPowerThrottling verion)

Windows SetThreadInformation API allow us to set High/Eco QoS. Other QoS level are decided by Windows according to the status of the UI window.

MacOS

pthread_attr_set_qos_class_np(3)

_np = non-portable

QoS Class

Apple's qos.h

MacOS use an universal management over priority, frequency control, and core selection, using its QoS API. Windows SetThreadInformation(ThreadPowerThrottling) mentioned before only do the latter two.

Linux and ChromeOS

  • Per thread EPP (Energy performance preference)
  • Task placement decisions
  • Preemption
  • Energy Aware Scheduler
  • Coming Soon 2024

sched_setattr(2)

  • QOS_MEDIA
  • QOS_INTERACTIVE
  • QOS_DEFAULT
  • QOS_UTILITY
  • QOS_BACKGROUND
Right now there is an Enegry Aware scheduler in Linux kernel, but community is working on bringing a new Linux upstream scheduler for heterogeous architecture, sometime early next year.

API

Of course there is other enum options to be added. Like "important" for above normal priority and their combinations. The naming of enum values is also under discussion.

Example code

Make the worker run with efficiency

let worker = new Worker('worker.js', 
  { qualityOfService: 'low' });

Make the worker run with performance

let worker = new Worker('worker.js', 
  { qualityOfService: 'high' });
Behavior definition: 'low' means the worker may be run with efficiency, 'high' means performance, 'important' means priority. The final implementation is decided by browser and operating system.

Power & perf. analysis (1/2)

Video conference with background blur

21% power saving, without losing FPS and delay

Power

Baseline
100%
qualityOfService: 'low'
79%

FPS

Baseline
100%
qualityOfService: 'low'
100%
In video conference we do video encode/decode/render in a 33ms period (30fps). As long as we meet the 33ms deadline, the FPS would not be affected. So such workload are allowed to be run slower to get more energy efficiency. Efficient cores of modern generation Intel laptop processors can easily perform a common 720p decode render tasks at 30fps. By utilizing efficient core as much as possible via web worker quality of service API, we can extend the battery life in video conference. In case on a mobile device where there is fps dropping, application may detect this and switch the qos back to default or even high.

Power & perf. analysis (2/2)

Squoosh.app webp image encoding

10% power saving, 2.7x execution time (37% FPS)

Power

Baseline
100%
qualityOfService: 'low'
90%

FPS

Baseline
100%
qualityOfService: 'low'
37%
When we want the procedure be background and not concerning its latency, like webp image encoding (if user is not doing nothing but waiting), we may also use the "low" option. Note the 10% power saving is at the cost of ~3x execution time. The saving is up to the processors' architecture and the machine code it executes. So it varies from workload to workload.

Try our Chromium PoC

  1. Download Chromium patch (support Windows only for now)
    https://chromium-review.googlesource.com/c/chromium/src/+/4551463
  2. Compile and install Checking out and Building Chromium
  3. Add options in the worker constructor 
    let worker = new Worker('worker.js', 
    { qualityOfService: 'low' });
  4. Run on the supported CPUs
See the path description for more implementation detail. If you are not familiar with Chromium compiling, it may takes time.

Choice

Considered Alternatives

Worklets

are for limited specific purpose(audio, CSS painting), controlled by browser

HTML Priority Hints

are for resource fetching priorities

Conclusion