This article analyzes the JavaScript document fragmentation operation method. Share it for your reference, as follows:
Using document fragmentation can improve page efficiency in some cases.
JavaScript operation of dom is a very performance-consuming process. In some cases, dom loop operation has to be performed. Every time we operate on dom, we trigger "reorder", which seriously affects energy consumption. Generally, the practice is to reduce dom operations as much as possible to reduce "reorder".
Facing the process of looping dom, we choose to use document fragments (creatDocumentFragment), add content that needs to be added to the dom at one time, and then add document fragments to the dom tree, so that the number of times the dom is operated effectively is reduced.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Document fragments</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
</head>
<body>
<script>
var temp = ();//Document fragment (When the document fragment is paid to a node, the child node in the document fragment is paid to a node, and it itself is not inserted into this node) for (var i=0; i<100; i++) {
var test =('div');//Create a node = 'aaa' + i;//Add content to the node (test);//Insert the created node into the temp document }
(temp);//Insert the temp document to the end of the body</script>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.