登录查看更多内容

Last updated on 2024年5月17日

How can you manipulate the DOM with JavaScript without affecting performance?

由人工智能和领英社区提供技术支持

Manipulating the Document Object Model (DOM) is a common task in web development, but it's important to do so without negatively impacting performance. JavaScript allows you to interact with the DOM to create dynamic content and responsive user interfaces. However, inefficient DOM manipulation can lead to slow page rendering and a poor user experience. By understanding how the DOM works and using best practices in your JavaScript code, you can ensure that your web applications are both powerful and performant.

此文章中的业界达人

由社区从 2 条内容中精选。了解更多

Jonatas Santos

Freelancer, Front-End Developer, Creative Technologist, Creative Developer

1 Optimize Access

When you need to manipulate the DOM, it's crucial to access elements efficiently. Minimize the use of global queries like document.querySelectorAll and instead use more specific selectors. Also, store references to DOM elements you work with frequently. This reduces the need to repeatedly traverse the DOM, which can be a costly operation. By strategically caching elements and minimizing the scope of your searches, you can significantly boost performance.

添加您的观点

Jonatas Santos

Freelancer, Front-End Developer, Creative Technologist, Creative Developer
(已编辑)
举报内容
Usually, you can do this operation when the browser finishes the loading and parsing phase, which is the very beginning initialization of your page. As the users interact with the page, do not forget to "clean up" variables and event listeners to elements that no longer belong to the HTML, indicating to the garbage collector to free up the memory that is no longer needed.

已翻译

赞

2 Batch Changes

Performing multiple DOM updates individually can cause the browser to re-render the page repeatedly, which is inefficient. Instead, you should batch updates together. One approach is to use a DocumentFragment or a virtual DOM library, which allows you to construct a new set of DOM changes off-screen and then append them to the document in one operation. This minimizes the number of reflows and repaints, leading to better performance.

添加您的观点

3 Avoid Layout Thrashing

Layout thrashing occurs when JavaScript scripts force the browser to perform multiple reflows of the page layout. To avoid this, be cautious with properties that trigger reflows, such as offsetWidth and clientHeight . Batch read operations separately from write operations. This technique, known as "fastDOM," ensures that all reads are performed at once, followed by all writes, thus reducing the number of reflows.

添加您的观点

Jonatas Santos

Freelancer, Front-End Developer, Creative Technologist, Creative Developer
举报内容
"Layout Thrashing" is one of the worst enemies of interactive interfaces that aim to perform at +60 frames per second. To avoid this, I strongly recommend caching the most useful data at the beginning of the application or as soon as possible when an element is created, and then working only with these cached variables. As a rule of thumb, you can follow this tips: 1. Read data from DOM only one time 2. Perform math operations to calculate the new value 3. Then update the elements with the newest value 4. Save the calc product for the next iteration 5. Then repeat steps 2, 3, and 4 to compute the next frame The most useful data are: - DOMRect (getBoundingClientRect()) - Window dimensions (innerWidth/innerHeight) - Scroll positions

已翻译

赞

4 Use CSS Transitions

For animations and visual transitions, leverage CSS rather than manipulating the DOM with JavaScript. CSS is optimized for these tasks and can often use hardware acceleration. For instance, use transition and animation properties in CSS to handle visual changes, and then trigger these animations with JavaScript by adding or removing classes. This approach offloads the graphical heavy lifting to the browser's rendering engine.

添加您的观点

5 Delegate Events

Event delegation is a technique that takes advantage of event bubbling in the DOM. Instead of attaching event listeners to individual elements, attach a single listener to a parent element. This listener can then manage events for all of its child elements. This reduces the number of event listeners in your application, which can improve memory usage and performance, especially in complex applications with many interactive elements.

添加您的观点

6 Virtual DOM

Consider using a virtual DOM, which is a programming concept where an idealized or "virtual" version of a UI is kept in memory and synced with the "real" DOM by a library such as React. This process, known as reconciliation, can lead to significant performance improvements because it minimizes direct DOM manipulation. Changes are made to the virtual DOM first, and then the minimal set of alterations necessary is applied to the actual DOM.

添加您的观点

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Business Development

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How can you manipulate the DOM with JavaScript without affecting performance?

1

2

3

4

5

6

7

1 Optimize Access

2 Batch Changes

3 Avoid Layout Thrashing

4 Use CSS Transitions

5 Delegate Events

6 Virtual DOM

7 Here’s what else to consider

Business Development

给文章评分

感谢您的反馈

更多Business Development相关文章

更多相关阅读内容

How can you manipulate the DOM with JavaScript without affecting performance?

1

2

3

4

5

6

7

1 Optimize Access

2 Batch Changes

3 Avoid Layout Thrashing

4 Use CSS Transitions

5 Delegate Events

6 Virtual DOM

7 Here’s what else to consider

Business Development

给文章评分

感谢您的反馈

查看其他技能