Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to optimize the DOM operation in js. It is very detailed and has a certain reference value. Friends who are interested must finish it!

1. When you want to modify the Dom style, you should merge all the changes as much as possible and process them once to reduce the number of rearrangements and retransfers.

/ / before optimization, const el = document.getElementById ('test'); el.style.borderLeft =' 1pxarrangement; el.style.borderRight = '2pxarrangement; el.style.padding =' 5pxarrangement; / / after optimization, the style can be modified once, so that the three rearrangements can be reduced to one rearrangement const el = document.getElementById ('test'); el.style.cssText + ='; border-left: 1px; border-right: 2px; padding: 5pxscape'

2. When you want to modify DOM nodes in batches, you can hide the nodes, and then make a series of modifications to make them visible, so that you can only rearrange them twice at most.

/ / const ele = document.getElementById ('test') before optimization; / / A series of dom modification operations / / Optimization solution 1: set the modified node to not display, then modify it, and display the node after modification, so that only two rearrangements are needed: const ele = document.getElementById (' test'); ele.style.display = 'none' / / A series of dom modification operations ele.style.display = 'block'; / / Optimization II. First create a document fragment (documentFragment), then modify it, and then insert the document fragment into the document. Only when the document fragment is finally inserted into the document will cause rearrangement, so only one rearrangement will be triggered. Const fragment = document.createDocumentFragment (); const ele = document.getElementById ('test'); / / A series of dom modification operations ele.appendChild (fragment). The above is all the content of this article entitled "how to optimize DOM Operations in js". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.