.innerHTMLの代わりに.insertAdjacentHTML()
JS歴1年にして初めて知ったのでメモしておきます。
いままで要素を追加したり、要素の中身を書き換えるときには、.innerHTMLや、jQueryの.append()、.prepend()などを利用していました。
ところが実は私の大好きなVanilla.jsにも「要素の前後、要素の中身の前後」を選んで挿入できる.insertAdjacentHTML()というメソッドがあるらしい(ﾟдﾟ)！
.innerHTMLの代わりというよりは、jQueryの.append()便利だなぁと思ってやっていたことの代わりになる感じですね。
このあたりの記事を見ると、.innerHTMLよりも高速だよ！ということです。
.innerHTML／.insertAdjacentHTML()／.append()を比較する
じゃあせっかくなので、どのくらい違うのか見てみたいですね！
というわけでこちら。
See the Pen insertAdjacentHTML by natsumi (@mayo31) on CodePen.18228
新規タブで開く場合はこちら
ボタンをクリックするとそれぞれ下記の処理をしてから、
0. .innerHTML-A
li要素を10万回連結する。
最後にul要素に対して、連結したli要素を.innerHTMLに代入する。
1. .innerHTML-B
ul要素に対して、li要素を10万回.innerHTMLに代入する。
2. .insertAdjacentHTML()
ul要素に対して、li要素を10万回.insertAdjacentHTML()する。
3. .append()
ul要素に対して、li要素を10万回.append()する。
処理が終わった時点での実行時間をconsoleに表示します。
1.の場合、毎回書き換えるのでレンダリングにはほとんど影響がなさそうです。
対して、要素を追加していくものは10万行ものリストを表示するので、実行時間が表示されたあともレンダリングが終わってなかったりしますね(´ﾍ｀；)ｳｰﾑ…
そして特筆すべきはjQueryの.append()の速さ！
あ、あれ・・・・・
私のVanilla神話は･･･
結論
どういう順序でどのような処理をしていてこれだけの時間がかかる、っていうことがわかれば、書き方を変えることで改善できるかもしれませんが、このままでは･･･
卒業できない／(^o^)＼