枫祺玥的小客栈

今天在项目代码中看到同事在一处 dom 插入用了 js 原生的 insertAdjacentHTML，于是突然好奇这个原生的方法在速度方面和 jQuery 相比有什么不同（要是这个真的很快的话，我以后也用这个啦），于是做个简单的测试

insertAdjacentHTML 描述：

insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。
来自MDN

语法

element.insertAdjacentHTML(position, text);

position是相对于元素的位置，并且必须是以下字符串之一：
'beforebegin' 元素自身的前面。
'afterbegin' 插入元素内部的第一个子节点之前。
'beforeend' 插入元素内部的最后一个子节点之后。
'afterend' 元素自身的后面。
text是要被解析为HTML或XML,并插入到DOM树中的字符串。

如此看来，insertAdacentHTML方法的四个参数基本上就对应 jQuery的 before() preappend() append() after() 四个方法了，那么我们来比较一番：

比较