luci-base: batch DOM updates to prevent slowdown

Signed-off-by: Olli Asikainen <olli.asikainen@gmail.com>

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index 22cbecc864b10f01a9f97f7936b6e13de17affc1..2fc2f0963271981ac0eee69824f49cffa0cba31c 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/cbi.js
+++ b/modules/luci-base/htdocs/luci-static/resources/cbi.js
@@ -752,7 +752,7 @@ function cbi_update_table(table, data, placeholder) {
                });
 
                if (Array.isArray(data)) {
-                       var n = 0, rows = target.querySelectorAll('tr, .tr');
+                       var n = 0, rows = target.querySelectorAll('tr, .tr'), trows = [];
 
                        data.forEach(function(row) {
                                var trow = E('tr', { 'class': 'tr' });
@@ -770,12 +770,16 @@ function cbi_update_table(table, data, placeholder) {
 
                                trow.classList.add('cbi-rowstyle-%d'.format((n++ % 2) ? 2 : 1));
 
-                               if (rows[n])
-                                       target.replaceChild(trow, rows[n]);
-                               else
-                                       target.appendChild(trow);
+                               trows[n] = trow;
                        });
 
+                       for (var i = 1; i < n; i++) {
+                               if (rows[i])
+                                       target.replaceChild(trows[i], rows[i]);
+                               else
+                                       target.appendChild(trows[i]);
+                       }
+
                        while (rows[++n])
                                target.removeChild(rows[n]);