How would you use DocumentFragment to optimize adding 1,000 list items?
Tests DOM reflow/repaint costs and off-DOM batching. A strong answer: create a DocumentFragment, build the 1,000 nodes off-DOM, then append once to trigger a single reflow. Red flag: claiming it saves memory or confusing it with innerHTML batching.
Tests whether you understand the browser rendering pipeline and reflow costs. A strong answer covers four steps in order: create a DocumentFragment, generate all 1,000 li elements and append them to the fragment off-DOM, perform one insertion into the live document, and explain that the fragment empties as its children move into the DOM. Red flag: saying it reduces memory usage rather than layout thrashing, or suggesting innerHTML without acknowledging parser overhead and security implications.
Read the original → developer.mozilla.org
- #dom
- #performance
- #documentfragment
- #browser-rendering
- #typescript
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.