最快的DOM插入 [英] Fastest DOM insertion

问题描述

进行DOM插入的最佳做法是什么？

• 一次插入大块html vs元素的速度更快一个循环？


• 你插入什么html或者块大小有多重要？


• 插入表格速度更快， / />>
  

解决方案

innerHTML插入比DOM更加快速操纵1：1，并在您实际插入多个节点和属性等的情况下获得更多，但它更容易出错，因为它本质上是一个伪装的eval语句。

$ b $根据我的经验，JS这些天来的速度非常快，innerHTML的速度增长并不足以证明除了最大的插入/重复批次之外的任何东西的风险。

很长的故事，你想做最少的DOM操作是可能的，所以一个提示，当创建一个层次结构插入是cre在内存中将它们彼此抵抗，然后在最后一刻将最高元素插入到DOM中。这为浏览器留下最少的渲染更新。再说一遍我们正在说几毫秒的分数...

What are the best practices for doing DOM insertion?

• Is it faster to insert large chunks of html vs element at a time in a loop?
• Does it matter what html you are inserting, or only how big the chunk is?
• It it faster to insert a table, vs inserting just the rows using the table hack?

解决方案

innerHTML insertion is marginally faster than DOM manipulation 1:1 and gains more for cases where you're actually inserting multiple nodes and attributes etc.., but it's more error prone and dangerous given it's essentially an eval statement in disguise.

In my experience JS is so fast these days that the speed gains of innerHTML do not justify the risks for anything but the largest of insertions/iteration batches.

Long story short, you want to do the fewest DOM manipulations possible, so one tip when creating a hierarchy for insertion is to create them against each other in memory and then insert the highest element into the DOM at the last possible moment. That leaves the fewest render updates for the browser. Course again we're talking fractions of milliseconds...

这篇关于最快的DOM插入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！