給bootstrap-table填坑

 因爲設計變動,須要把數據由分頁展現改成所有展現(才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

相關文章
相關標籤/搜索