Domnoderemoved event here do not do too much introduction, there is a general understanding, will be used. The following code registers the domnoderemoved event handler function with the content object, triggering the Domnoderemoved event when a child element is deleted under the content .
<script>window.onload = function () {var dom = document.getElementById ("content");d Om.addeventlistener (" Domnoderemoved ", function (event) {});}; </script><body><div id= "Content" ><div></div><!--commet--><span></ Span></div></body>An HTML comment is generated when an array of ng-repeat traversal is empty or has a length of 0.
<!doctype html>ng-repeat generates a DOM element as follows, which is an HTML comment.<div id= "Content" ><!--ngrepeat:item in DataList--></div>
Track by Sub-statement is not used in 3.ng-repeatdue to the bidirectional binding characteristics of the ANGULARJS data, the interface is automatically refreshed when the data in scope changes.<!doctype html>When you click the first button, the DataList data in scope changes and the interface refreshes automatically. There are 2 ways to implement a DOM refresh:One way: Delete all the DOM that existed before, and then regenerate the DOM. method Two: Reuse the previous DOM element and simply update the DOM element's properties.
In the absence of track by , angular is using mode one, which can be confirmed by our registered Domnoderemoved event handler function. We know that Dom's frequent operation is very expensive, so why can't ng-repeat use the existing DOM elements to update the data? Because you don't tell it the identity attribute of the array element, Ng-repeat doesn't know how to replace it. Without using track by, we can see that Ng-repeat adds a $ $hashKey attribute to each element in the array:This key is generated by the Nextuid () method inside the Angular, similar to the database self-increment, but using a string. Now we understand that because each substitution of an array causes Ng-repeat to generate a new key for each element, there is no way to reuse an existing Dom element. So how do you solve this problem? is to use the track by child statement. Change the ng-repeat to the following mode 1 or Mode 2, you can find no DOM delete event.
<!--way 1--><div ng-repeat= "item in DataList track by Item.id" >{{item.name}}</div><!--Way 2--> <div ng-repeat= "item in DataList track by $index" >{{item.name}}</div>4. The array length has not changed, but the order has changed
In the above code, click the First button, DataList only the Name property value has changed, the array length and order have not changed.
[{"id": 1, "name": "A1"},{"id": 2, "name": "A2"},{"id": 3, "name": "A3"},{"id": 4, "name": "A4"}]; becomes [{"id": 1, "name": "B1"}, {"id": 2, "name": "B2"},{"id": 3, "name": "B3"},{"id": 4, "name": "B4"}];
What if we change the order of the elements in DataList?
[{"id": 1, "name": "A1"},{"id": 2, "name": "A2"},{"id": 3, "name": "A3"},{"id": 4, "name": "A4"}]; becomes [{"id": 4, "name": "B1"}, {"id": 2, "name": "B2"},{"id": 3, "name": "B3"},{"id": 1, "name": "B4"}];
in the following code, we change the order of the DataList and then use track by $index and track by Item.id to see what the effect is.<!doctype html>
you can see that the DOM Delete event does not occur when using the track by $index, which is to update the DOM element instead of deleting it and then creating it. Dom Delete events occur when you use track by Item.id. That is, when the order of elements in an array is changed, it is not very different to use track by Item.id with no track. Let's try to find out what Ng-repeat's performance looks like when the length of the array changes.Reference article:
Http://www.cnblogs.com/MigCoder/p/3930264.html
(13) Through DOM event domnoderemoved, see the performance of Ng-repeat and the role of track by
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
