- From: Michail Schwab <notifications@github.com>
- Date: Wed, 25 Nov 2020 07:59:13 -0800
- To: whatwg/dom <dom@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <whatwg/dom/issues/895/733795242@github.com>
Thanks for following up! > The example in a comment, #895 (comment), shows that each attribute's value is different for each node. So unless the API supports passing-in a set of attributes for each node, the script will still have to loop over each node, and bulk set its attributes. The performance benefit will be not needing to loop over each attribute for a given node. > > Is this analysis correct, or have I misunderstood the API shape? I think you might have misunderstood slightly. I propose that the API allows passing in a set of attribute values so that the JS no longer has to loop over each node for DOM access. Currently, the D3.js `attr` function has to loop over all the nodes, e.g. like this: ``` selection.attr = function(attrName, attrValFct) { for(const element of selection.elements) { const value = attrValFct(element['__data__']); // Fast: No DOM. element.setAttribute(attrName, value); // Slow: Traverses the bindings layer for each element. } } ``` With the proposed change, the code could be updated to look like this: ``` selection.attr = function(attrName, attrValFct) { const values = selection.elements.map(element => attrValFct(element['__data__'])); // Fast: No DOM. Element.setAttributes(selection.elements, values); // Faster: Only traverses the bindings layer once. } ``` The JS would still loop over the elements to get the different values. But the JS would no longer have to access the DOM, and traverse the JS bindings layer, for each element, which is the slow part. -- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/whatwg/dom/issues/895#issuecomment-733795242
Received on Wednesday, 25 November 2020 15:59:28 UTC