JavaScript innerHTML和createElement效率对比

阅读量：105 次

发布时间：2019-02-26

本文共 562 字，大约阅读时间需要 1 分钟。

DOM节点操作中的innerHTML与createElement效率比较

在DOM操作中，innerHTML和createElement都是创建元素的常用方法，但它们的效率存在显著差异。本文通过测试三种方法创建1000个元素所需的时间，来比较它们的性能表现。

测试方法

本次测试选用了三种常见的DOM操作方式：

innerHTML字符串拼接：通过将每个元素的HTML字符串直接追加到页面中。

innerHTML数组拼接：将所有元素的HTML字符串收集到数组中，最后一次性拼接到页面中。

createElement方法：逐个创建元素并添加到页面中。

测试结果

通过实际测试，三种方法的时间差异较为明显：

innerHTML字符串拼接：所需时间为1245ms。

innerHTML数组拼接：所需时间为421ms。

createElement方法：所需时间为587ms。

性能对比

从时间数据可以看出：

innerHTML字符串拼接的效率最低，耗时1245ms。

createElement方法的效率次之，耗时587ms。

innerHTML数组拼接的效率最高，耗时421ms。

结论

在实际项目中，可以根据具体需求选择合适的DOM操作方式。对于需要频繁创建元素的场景，建议使用innerHTML数组拼接方式，以获得最佳性能表现。

转载地址：http://zfsu.baihongyu.com/

你可能感兴趣的文章

Python Slice How-to，我知道Python Slice，但我怎么才能使用内置的Slice对象呢？

python socket分包发送数据

python socket模块_Python socket模块实现TCP服务端客户端

Python SOCKS5代理客户端HTTPS

Python Soc网络分析：通过使用函数迭代列表来计算机会网络

Python SQL和NoSQL数据库操作实战

python stdout flush_sys.stdout.flush（）方法的用法

python string 运算

Python str与bytes之间的转换

Python subprocess ffmpeg

python subprocess Permission denied Errno 13

Python subprocess.call - 将变量添加到 subprocess.call

Python Subprocess.Popen 从一个线程

Python subprocess.Popen 作为 Windows 上的不同用户

Python subprocess.Popen() 等待完成

Python Sympy模块NoConversion：收敛到根失败；请尝试n＜；15或MaxSteps＞；50

python time模块

Python Tkinter Multiple Windows 教程

Python tkinter 中的多处理

Python tweepy写入到sqlite3 db