因为设计变动,须要把数据由分页展现改成所有展现(才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