Skip to content

Latest commit

 

History

History
50 lines (32 loc) · 1.98 KB

BP_4020_en.md

File metadata and controls

50 lines (32 loc) · 1.98 KB

Avoid blocking times caused by long running JavaScript processes

Identifiers

GreenIT V2 V3 V4

Categories

Life cycle Tiers Responsible
3. Implementation User/Device Software Architect/Developer

Indications

Priority Implementation difficulty Ecological impact
4 3 4
Saved resources
Processor

Description

Web browsers have processes that turn code into web pages. They must perform several tasks before being able to display the page:

  • parsing the HTML script
  • building web pages structure and content (DOM)
  • executing pages CSS and JavaScript code.

However, executing JavaScript code can use terminals' processors up to more than 90%, blocking other processes or user interactions. This heavily uses the device, leading to two issues:

  • excessive resource use, directly impacting batteries recharging cycles
  • main thread blocking, which degrades users experience and can be correlated with processors power (especially on mobile devices)

These two problems can lead users to renew their devices because of perceived obsolescence.

To avoid this, break up your JavaScript into small tasks executed at the required time and not beforehand.

Example

Total Blocking Time (TBT) measures main Javascript thread activity long tasks total time. A Long Task is a process that lasts more than 50ms and monopolizes web browsers. It is necessary to ensure that the TBT is below 200 ms. Lighthouse or Web Page Test can be used as measurement tools.

Validation rule

The number of ... is equal to or less than
tasks lasting more than 200 ms 0