由于设计变更，需要把数据由分页展示改为全部展示（才3500条数据），结果chrome浏览器页面卡顿，火狐浏览器直接卡死！

console.time分析之后，竟然是bootstrap-table插件的坑

主要是2个问题：

1. 使用了 this.$body[0].html(html.join('')) 来替换table加载内容.（平均耗时900ms）  【】

改为原生方法： this.$body[0].innerHTML = html.join('');  （改完后耗时250ms）

　 [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)

给bootstrap-table填坑的更多相关文章

  1. Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法

    今天设置了Bootstrap Table的复杂表头,设置了多级表头(两行列名),但是只能显示第一级表头(第一行的列名),第二级的表头被第一级的表头覆盖.但是我仿照其他网上的其他设置复杂表头例子都能正常 ...

  2. bootstrap-table填坑之旅<一>认识bootstrap-table

    应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大, ...

  3. css 填坑常用代码分享

    以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 因为提交比较麻烦,后来转置github:https://github.com/jsfront/src/blob/mast ...

  4. Node学习笔记（四）：gulp+express+io.socket部署angularJs2（填坑篇）

    这篇就先暂停下上篇博客--你画我猜的进度,因为在做这个游戏的时候,想采用最新的ng2技术,奈何坑是一片又一片,这边就先介绍下环境部署和填坑史 既然要用ng2,首先要拿到资源,我这边用的是angular ...

  5. 前端系列——jquery前端国际化解决方案“填坑日记”

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...

  6. jquery.i18n.properties前端国际化解决方案“填坑日记”

    但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...

  7. 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...

  8. bootstrap table使用参考

    https://www.cnblogs.com/landeanfen/p/5821192.html  转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  9. bootStrap table 和 JS 开发过程中遇到问题汇总

    1..bootStrap-table表头固定 在table定义的时候给高度属性就可以自动生成滚动条,并且固定表头[height: 220,] 2.为动态生成的DOM元素绑定事件 on("cl ...

  10. css 填坑常用代码分享[居家实用型]

    原文地址 http://www.cnblogs.com/jikey/p/4233003.html 以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 一. css 2.x ...

随机推荐

  1. 🏆【Alibaba中间件技术系列】「Nacos技术专题」服务注册与发现相关的原理分析

    背景介绍 前几篇文章介绍了Nacos配置中心服务的能力机制,接下来,我们来介绍Nacos另一个非常重要的特性就是服务注册与发现,说到服务的注册与发现相信大家应该都不陌生,在微服务盛行的今天,服务是非常 ...

  2. 强化学习实战 | 自定义Gym环境之扫雷

    开始之前 先考虑几个问题: Q1:如何展开无雷区? Q2:如何计算格子的提示数? Q3:如何表示扫雷游戏的状态? A1:可以使用递归函数,或是堆栈. A2:一般的做法是,需要打开某格子时,再去统计周围 ...

  3. 字节跳动Web Infra发起 Modern.js 开源项目，打造现代 Web 工程体系

    10 月 27 日举办的稀土开发者大会上,字节跳动 Web Infra 正式发起 Modern.js 开源项目,希望推动现代 Web 开发范式的普及,发展完整的现代 Web 工程体系,突破应用开发效率 ...

  4. 学习JAVAWEB第十四天

    ## JSP:入门学习 1. 概念: * Java Server Pages: java服务器端页面 * 可以理解为:一个特殊的页面,其中既可以指定定义html标签,又可以定义java代码 * 用于简 ...

  5. c#开方，平方，sin函数计算

    平方运算 private double m; private double n=Math.Pow(m,2.0); 开平方运算 System.Math.Sqrt(数字); double保留两位小数 Ma ...

  6. Request与Response

    前言 request和response对象是由服务器创建的.我们来使用它们: request对象是来获取请求消息,response对象是来设置响应消息. Request 定义 服务器进行创建,通过该对 ...

  7. Redis 分布式锁使用不当，酿成一个重大事故，超卖了100瓶飞天茅台！！！(转)

    基于Redis使用分布式锁在当今已经不是什么新鲜事了. 本篇文章主要是基于我们实际项目中因为redis分布式锁造成的事故分析及解决方案.我们项目中的抢购订单采用的是分布式锁来解决的,有一次,运营做了一 ...

  8. Java中class的前面添加public和不添加public有什么区别？

    需要知道的是修饰类和变量的用来控制这个被修饰的类和变量的适用范围的修饰词有: 1.public:表示公开的类和变量,既所有的类都可以引入使用的. 2.protected:表示受保护的类,只有子孙类和本 ...

  9. FLink迟到数据的处理之三

    Flink迟到的数据更新窗口计算结果,窗口销毁后的迟到数据输出到测输出流 主程序: //TODO 使用迟到的数据更新窗口的计算结果 public static void main(String[] a ...

  10. MATLAB基础学习（2）

    function result=mysum(a,b)%创建函数以及外部接口 s=0; for i=a:b s=s+i; end result=s; disp(s); end Matlab中ones() ...