appendChild,innerHTML,join性能大比拼

最新推荐文章于 2023-06-28 12:42:04 发布

原创最新推荐文章于 2023-06-28 12:42:04 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#join #button #date #function #div #input

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

本文通过实验对比了在Web开发中使用appendChild、innerHTML以及利用Array的join方法来批量添加DOM元素的性能差异。通过设置不同的循环次数，可以观察到不同方法在处理大量DOM节点时的时间消耗，为开发者提供实际场景下的性能参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>appendChild,innerHTML,join</title> <mce:script type="text/javascript"></mce:script> </head> <body> <input type="text" id="tbText" value="ws_hgo " /><br /> <input type="text" id="tbTimes" value="1000" /><br /> <input type="text" id="TbDate" /><br /> <input id="Button1" type="button" value="Append" onclick="AppendDiv();" /> <input id="Button2" type="button" value="innerHTML" onclick="InnerHTML();" /> <input id="Button3" type="button" value="Join" onclick="Join();" /> <div id="div1"> </div> </body> </html>