回答編集履歴
1
調整
test
CHANGED
|
@@ -2,3 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
フラグメントの有利なところは、文法上必要なコンテナを設定してなくてもまとめて投入ができることです。
|
|
4
4
|
たとえばliを復数生成した場合、ulに投入するにはひとつひとつappendChildしないといけませんが、フラグメントで処理する場合はliを並行投入しておいて最後にulに１回appendChildするだけですみます。DOM処理の速度の付加はDOM自体を投入する作業が大きいので適正にフラグメントを利用すると理論上はかなり高速に処理ができるはずです。
|
|
5
|
+
|
|
6
|
+
# 参考
|
|
7
|
+
```html
|
|
8
|
+
<script>
|
|
9
|
+
const max=100;
|
|
10
|
+
function insert1(){
|
|
11
|
+
for(let i=1;i<=max;i++){
|
|
12
|
+
ul1.appendChild(Object.assign(document.createElement('li'),{textContent:i}));
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
function insert2(){
|
|
16
|
+
const frg = document.createDocumentFragment();
|
|
17
|
+
for(let i=1;i<=max;i++){
|
|
18
|
+
frg.appendChild(Object.assign(document.createElement('li'),{textContent:i}));
|
|
19
|
+
}
|
|
20
|
+
ul2.appendChild(frg);
|
|
21
|
+
}
|
|
22
|
+
</script>
|
|
23
|
+
<input type="button" value="1" onclick="insert1()">
|
|
24
|
+
<input type="button" value="2" onclick="insert2()">
|
|
25
|
+
<ul id="ul1"></ul>
|
|
26
|
+
<ul id="ul2"></ul>
|
|
27
|
+
```
|