How to Avoid DOM Blocking by localStorage and Other Culprits

Key Points

• Synchronizing JavaScript operations such as computing, DOM updates, storing and retrieving data using localStorage or IndexedDB blocks DOM updates and affects front-end performance.
• Web Workers can be used to handle long-running processes. They allow the main browser application to launch background scripts and communicate using message events, but they do not have direct access to the DOM or localStorage.
• Hardware-accelerated CSS animations run in their own layers, which improves the smoothness of the animation and is not blocked by most modern browsers.
• Memory storage provides faster data updates than disk-based storage mechanisms. It is recommended to use memory objects to improve performance and to store data permanently when it is convenient.

JavaScript programs in running environments such as browsers and Node.js run on a single thread. When the code is executed in the browser tab, all other operations stop: menu commands, downloads, renderings, DOM updates and even GIF animations.

Users rarely notice this because the processing proceeds quickly in small blocks. For example: Clicking a button, throwing an event, running a function, performing calculations and updating the DOM. Once completed, the browser can freely process the next item in the queue.

JavaScript code can't wait for something to happen; imagine how frustrating it would be if the application freezes every time it makes an Ajax request. Therefore, JavaScript code uses events and callbacks to operate: instructs a browser or operating system level process to call a specific function after the operation is completed and the result is ready.

In the following example, when a button click event occurs, a handler function is executed that animates the CSS class. When the animation is completed, the anonymous callback will delete the class:

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

ES2015 provides Promise, ES2017 introduces async/await to simplify encoding, but still uses callbacks under the surface. For more information, see "Process Control in Modern JS".

Obstructing factor

Unfortunately, some JavaScript operations will always be synchronized, including:

• Run the calculation
• Update DOM
• Storage and retrieve data using localStorage or IndexedDB.

The following example shows an intruder that uses CSS animation for movement and JavaScript to waving the limb. The image on the right is the basic animated GIF. Click the "Write" button using the default 100,000 sessionStorage operation:

[CodePen sample link - CodePen embed code should be inserted here]

During this operation, DOM updates are blocked. In most browsers, intruders stop or get stuck. Certain animations of animated GIFs will be paused. Slower devices may display a "Script Unresponsive" warning.

This is a complex example, but it demonstrates how basic operations affect front-end performance.

Web Workers

One solution for long-running processes is Web Workers. These allow the main browser application to start background scripts and communicate using message events. For example:

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

Web Worker Script:

// main.js
// 是否支持 Web Workers？
if (!window.Worker) return;

// 启动 Web Worker 脚本
let myWorker = new Worker('myworker.js');

// 从 myWorker 接收消息
myWorker.onmessage = e => {
  console.log('myworker sent:', e.data);
}

// 向 myWorker 发送消息
myWorker.postMessage('hello');

A worker can even generate other workers to simulate complex threaded operations. However, the functionality of the worker is intentionally limited, and the worker cannot directly access the DOM or localStorage (doing so will actually multi-thread JavaScript and disrupt the browser's stability). Therefore, all messages are sent as strings, which allows passing JSON-encoded objects, but does not allow passing DOM nodes.

Workers can access certain window properties, WebSockets, and IndexDB, but they do not improve the examples shown above. In most cases, workers are used for long-running calculations—such as ray tracing, image processing, bitcoin mining, and more.

(Node.js provides child processes, which are similar to Web Workers, but have the option to run executables written in other languages.)

Hardware Acceleration Animation

Most modern browsers do not block hardware-accelerated CSS animations running in their own layers.

By default, the above example moves the intruder by changing the left margin. This property and similar properties such as left and width cause the browser to re-stream and re-draw the entire document in each animation step.

Animal efficiency is more efficient when using transform and/or opacity properties. These actually put elements into separate composition layers so that the GPU can animate them individually.

Click the "Hardware Acceleration" check box and the animation will immediately become smoother. Now try another sessionStorage write; the intruder continues to move even if the animation GIF stops. Note that limb movements will still be paused because this is controlled by JavaScript.

Memory storage

Updating objects in memory is much faster than using the storage mechanism written to disk. In the example above, select the Object storage type and click Write. The result will be different, but it should be about 10 times faster than the equivalent sessionStorage operation.

Memory is volatile: closing the tab or leaving the navigation will cause all data to be lost. A good tradeoff is to use memory objects to improve performance and then permanently store data when it is convenient - for example when page uninstallation:

// myworker.js
// 接收消息时启动
onmessage = e => {
  console.log('myworker received:', e.data);
  // ...长时间运行的进程...
  // 发送回消息
  postMessage('result');
};

Game or single page application may require more complex options. For example, the time point when data is saved:

No user activity (mouse, touch or keyboard event) for a period of time
Game pause or application tag in the background (see page visibility API)
There are natural pauses—such as player death, completing levels, moving between home screens, etc.

Web performance

Web performance is a hot topic. Developers are less restrictive by browser restrictions, and users expect fast, operating system-like application performance.

Do as little processing as possible, the DOM will never be noticeably blocked. Fortunately, there are some options when long-running tasks cannot be avoided.

Users and clients may never notice your speed optimization, but they always complain when the application slows down!

FAQs about DOM blocking (FAQ)

What is DOM blocking and why is it a problem?

DOM blocking means that the browser cannot render the web page because it is waiting for the script to complete loading. This will greatly reduce the loading speed of the web page, resulting in poor user experience. The browser must build the DOM tree by parsing the HTML tag. During this process, if a script is encountered, it must be stopped and executed to continue. This is because the script may change the DOM tree structure and the browser needs to make sure it has the latest view.

How to avoid DOM blocking?

There are several ways to avoid DOM blocking. One of the most effective ways is to use asynchronous loading scripts. This means that the script will load in the background, while the rest of the page will continue to load. Another approach is to postpone scripts, which means they will only be executed after the HTML document is fully parsed. Finally, you can also move the scripts to the bottom of the HTML document so that they are the last loaded content.

What is the difference between synchronous scripts and asynchronous scripts?

Synchronous scripts block DOM constructs until they are fully loaded and executed. This means that if the script loads for a long time, it delays the entire webpage. On the other hand, asynchronous scripts do not block DOM construction. They load in the background and can be executed once they are ready, even if the DOM is not fully built.

What is the "defer" attribute in the script tag?

The "defer" property in the script tag is used to indicate that the script should be executed after the HTML document is fully parsed. This means that the script does not block the DOM construct, thus speeding up web page loading time. However, this also means that the script may not be ready when the DOM is constructed, so it can only be used with scripts that do not change the DOM structure.

How is it helpful to move the script to the bottom of the HTML document?

Moving scripts to the bottom of the HTML document ensures that they are the last content loaded. This means that the rest of the web page can be rendered without waiting for the script to complete loading. However, this method can only be used with scripts that do not change the DOM structure, because they may not be ready when the DOM is constructed.

What is the "async" attribute in the script tag?

The "async" attribute in the script tag is used to indicate that the script should be loaded asynchronously. This means that the script will load in the background, while the rest of the web page will continue to load. The script can be executed immediately when ready, even if the DOM is not fully built. This can greatly improve web page loading time, but it can only be used for scripts that do not change the DOM structure.

What is the impact of DOM blocking on SEO?

DOM blocking can greatly reduce the loading speed of the web page, which will negatively affect its SEO ranking. Search engines like Google regard web page loading speed as one of the ranking factors. Therefore, avoiding DOM blocking is very important to ensure that your page ranks high in search engine results.

What is a virtual DOM and how does it help?

Virtual DOM is a concept used in modern JavaScript frameworks such as React. It is a copy of the actual DOM, and the changes are made first in the virtual DOM, not in the actual DOM. Once all changes are completed, the virtual DOM will be synchronized with the actual DOM through a process called coordination. This reduces the number of direct operations on the actual DOM, thus speeding up web page loading time.

How to check if my web page has DOM blocking problems?

You can use tools such as Google's PageSpeed ​​Insights to check whether your web pages have DOM blocking problems. This tool analyzes your web pages and provides detailed reports on their performance, including any potential issues such as DOM blocking.

Does CSS also cause DOM blocking?

Yes, CSS can also cause DOM blocking. When the browser encounters a CSS file, it must stop and load it to continue rendering the web page. This is because the CSS file may contain styles that change the appearance of the web page. To avoid this, you can use methods such as inline critical CSS and postpone non-critical CSS.

The above is the detailed content of How to Avoid DOM Blocking by localStorage and Other Culprits. For more information, please follow other related articles on the PHP Chinese website!