【JavaScript入門】appendChild vs insertBefore

前回の記事で、要素の追加方法についてまとめましたが、親要素の子要素の最後に要素を追加できる、appendChild と insertBefore は、どちらが処理速度が早いか？が、気になったので調べてみました。

結果

結果だけ知りたい方へ

要素を連続で、100回、1000回追加するケースでは、appendChild の方が若干早いです。

10000回追加するケースでは、insertBefore の方が早い結果になりました。

興味のある方は、次の計測内容の詳細をご覧ください。

計測方法

1. 親要素（div）に、子要素（p）をひたすら（100回、1000回、10000回）追加します。

2. 計測単位は、ミリ秒で少数第5位まで使用（切り捨て）。

3. 計測結果（ミリ秒）は、同じ計測を5回繰り返した平均値を使用します。

4. 次のhtmlとjavascriptを使用します。

html

<div id='parent-div'></div>

1	<div id='parent-div'></div>

javascript

// 追加先の親要素の参照を取得
var parentDiv = document.getElementById("parent-div");

// 実行回数
var execNum = 100; // 100, 1000, 10000, を指定

// 開始時間を取得
var startTime = performance.now();

for(i=0; i<execNum; i++){

  // 子要素pを作成
  var newElementP = document.createElement("p");
  newElementP.setAttribute("id", "child-p" + i);

  // 子要素pを追加（appendChild）
  parentDiv.appendChild(newElementP);

  // 子要素pを追加（insertBefore）
  // parentDiv.insertBefore(newElementP, null);

}

// 終了時間を取得
var endTime = performance.now();

// 処理時間を表示
console.log(endTime - startTime);

// 追加先の親要素の参照を取得

var parentDiv = document.getElementById("parent-div");

// 実行回数

var execNum = 100; // 100, 1000, 10000, を指定

// 開始時間を取得

var startTime = performance.now();

for(i=0; i<execNum; i++){

// 子要素pを作成

var newElementP = document.createElement("p");

newElementP.setAttribute("id", "child-p" + i);

// 子要素pを追加（appendChild）

parentDiv.appendChild(newElementP);

// 子要素pを追加（insertBefore）

// parentDiv.insertBefore(newElementP, null);

}

// 終了時間を取得

var endTime = performance.now();

// 処理時間を表示

console.log(endTime - startTime);

appendChild と insertBefore は、それぞれコメントアウトして、それ以外は同じコードを使用します。

appendChild

ブラウザ：chrome（ver 74.0.3729.169）

計測回数	100回	1000回	10000回
1	1.80499	6.22499	87.66000
2	0.90999	7.08499	62.12000
3	0.67000	6.00000	66.46499
4	0.94000	6.17500	64.44499
5	1.50500	9.57000	79.08999
平均	1.165996	7.010996	71.95599

ブラウザ: safari（ver 12.0）

計測回数	100回	1000回	10000回
1	0.99999	2.99999	35.00000
2	1.00000	4.00000	22.00000
3	1.00000	3.00000	22.00000
4	0.99999	1.99999	29.00000
5	1.00000	1.99999	23.00000
平均	0.999996	2.799994	26.20000

ブラウザごとの平均処理時間（ミリ秒）

ブラウザ	1000回	10000回	100000回
chrome	1.165996	7.010996	71.95599
safari	0.999996	2.799994	26.20000

insertBefore

ブラウザ：chrome（ver 74.0.3729.169）

計測回数	100回	1000回	10000回
1	0.75000	8.83999	60.63999
2	1.20999	6.05999	67.24499
3	1.24999	10.7250	60.98000
4	1.42000	7.02500	51.03000
5	1.94999	8.27500	66.82000
平均	1.315994	8.184996	61.342996

ブラウザ: safari（ver 12.0）

計測回数	100回	1000回	10000回
1	0.99999	3.00000	20.00000
2	0.99999	2.00000	32.00000
3	1.00000	4.00000	22.00000
4	1.00000	3.99999	24.00000
5	1.00000	2.00000	25.00000
平均	0.999996	2.999998	24.60000

ブラウザごとの平均処理時間（ミリ秒）

ブラウザ	100回	1000回	10000回
chrome	1.315994	8.184996	61.342996
safari	0.999996	2.999998	24.60000

appendChild vs insertBefore

それぞれの計測結果を比べてみます。

chrome

メソッド	100回	1000回	10000回
appendChild	1.165996	7.010996	71.955994
insertBefore	1.315994	8.184996	61.342996

safari

メソッド	100回	1000回	10000回
appendChild	0.999996	2.799994	26.20000
insertBefore	0.999996	2.999998	24.60000

上記の結果から、100、1000回までは、chrome、safari共にappendChild の方が若干が早く、10000回の場合は、逆に insertBefore が早い結果となりました。

おそらく、普段の処理では連続して、10000回も要素を追加するケースは少ないと思うので、appendChild を使用する方が、処理が早い可能性があります。

また、副産物として、今回のような、”要素を追加する処理” では safari の方が chromeより早いことが分かりました。
この辺は、処理の内容（今回は単純にp要素を追加）で変わってくる可能性があるので、実際に実装する処理で測定してみるのもいいかもしれません。