因爲設計變動,須要把數據由分頁展現改成所有展現(才3500條數據),結果chrome瀏覽器頁面卡頓,火狐瀏覽器直接卡死!html
console.time分析以後,居然是bootstrap-table插件的坑chrome
主要是2個問題:bootstrap
1. 使用了 this.$body[0].html(html.join('')) 來替換table加載內容.(平均耗時900ms) 【】瀏覽器
改成原生方法: this.$body[0].innerHTML = html.join(''); (改完後耗時250ms)this
[ps] IE9及如下的瀏覽器中,innerHTML只讀插件
2. 綁定事件代碼是先查詢全部元素再進行的綁定:this.$body.find('> tr[data-index] > td').off('change').on('change', ... (平均耗時200ms)設計
改成直接對 this.$body的父元素 綁定: this.$container.off('click dblclick').on('click dblclick', ' tr[data-index] > td', ... (改完後耗時25ms)htm