Steps to reproduce
These demonstrations use a DOM Fragment Construction Performance Test page at:
When this page loads it builds a DOM fragment based on options set in the URL.
The default is 5 repetitions of an outer element x 1000 repetitions of an inner element.
All up this (default setting) adds around 15000 elements to the DOM Fragment.
The time to build the fragment is measured and displayed.
After building and measuring, the DOM fragment is inserted into the page.
Different build options can be selected in the FORM at the top of the page and will be used on the next page-load after the FORM is submitted.
- Navigate to http://playground.meekostuff.net/test/dom/perf/domassembly.html?outerRepeat=5&innerRepeat=1000
On Firefox/Chrome this completes in around 300ms. On IE9,10,11 it takes around 3s.
- Navigate to http://playground.meekostuff.net/test/dom/perf/domassembly.html?outerRepeat=5&innerRepeat=1000&inlineStyle=on&liValue=on&customElement=on
This modifies the build process to add a few "problem-elements". On most browsers the build time is barely affected, but on IE11 / Edge it takes around 60s.
Inserting DOM nodes into DOM fragments - either DocumentFragment or an Element with no parentNode - should be very fast since the fragment is inert and does not require any style lookups or layout.
Dev Channel specific:
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Rico M.”
Changed Status to “Confirmed”
Changed Assigned To from “Rico M.” to “Justin R.”
Changed Assigned To from “Justin R.” to “Bryan”
Changed Assigned To from “Bryan” to “Raji S.”
Changed Title from “IE11 / Edge performance regression with DOM fragments” to “Edge performance with DOM fragments is 7x slower than Chrome”
Changed Assigned To to “Travis L.”
Changed Assigned To from “Travis L.” to “IE S.”
Changed Status from “Confirmed” to “External”
Particular elements / attributes are significantly more detrimental to Edge DOM performance. See the original issue report -