jsのappend for文 高速化

append 複数回か、1回で行う、どっちが早い

DOMの操作を行う処理などを一度変数に格納して、1回で実行できるようにすれば、高速化することができる。

複数回に分けて append


var i = 100;
console.time();
while (--i) {
  $('body').append('
'); }; console.timeEnd(); // default: 11.1279296875ms // default: 16.380859375ms // default: 14.44921875ms

1回でappend

var i = 100;
var html = '';

console.time();
while (--i) {
  html += '
'; }; $('body').append(html); console.timeEnd(); // default: 2.3779296875ms // default: 3.600830078125ms // default: 2.7138671875ms

forで回すときは、array.lengthも変数格納

・・・僅かにだけど。

格納しない

var a = [];

console.time();
for (var i = 0; i < a.length; i++) {
  $('body').append('
'); } console.timeEnd(); // default: 17.2099609375ms // default: 18.39990234375ms // default: 9.84912109375ms

格納する

var a = [];
var b = a.length = 100;

console.time();
for (var i = 0; i < b; i++) {
  $('body').append('
'); } console.timeEnd(); // default: 8.31494140625ms // default: 12.162109375ms // default: 14.95703125ms

参考

JavaScript・jQueryの改修・高速化のためのメモ – Qiita

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。


  1. KATOON.NET
  2. TRASH
  3. jsのappend for文 高速化