一般如果我们有多个dom原生需要通过js添加到html中，如果一个dom添加一次，会造成页面多次重绘。所以我通常是两种解决方法。
-
通过拼接好字符串后添加到html中
-
通过 创建DocumentFragment节点接受dom元素，最后添加到html中https://www.jianshu.com/p/f02542f1f828
但是两种方式的性能比较，哪个更好呢？今天在同一浏览器，同一工作条件下，相差几秒钟试验了一下；
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>比较createDocumentFragment与字符串拼接速度</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon-precomposed" href="https://res.zhen.com/mzhenpin/statics/image/apple_logo.png" />
<style>
html,
body {
padding: 0;
margin: 0;
}
img {
width: 100%;
}
</style>
</head>
<body>
</body>
<script>
var len = 10000;
init()
// DocumentFragment 方式
function init() {
console.time()
var fragment = document.createDocumentFragment();
for (var i = 0; i < len; i++) {
var img = new Image();
img.src = "./images/toy117.jpg";
fragment.appendChild(img)
}
document.body.innerHTML = fragment;
console.timeEnd()
}
// 字符串方式
function init2() {
console.time()
var str = ''
for (var i = 0; i < len; i++) {
str += '<img src="./images/toy117.jpg">';
}
document.body.innerHTML = str;
console.timeEnd()
}
</script>
</html>
-
都刷新页面10次，比较结果如下
| DocumentFragment | 字符串|
| ------------- | ------------- |
| 102| 108 |
| 109| 92|
| 105 | 96|
| 114| 96 |
| 109 | 86 |
| 105| 89|
| 106 | 101 |
| 99 | 93 |
| 105 | 91|
| 97 | 88| -
从结果可以看出通字符串拼接渲染dom性能更高。
网友评论