由于设计变更，需要把数据由分页展示改为全部展示（才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. gorm声明模型

    模型定义 模型是标准的结构体,由go的基本数据类型.实现了Scanner和Valuer接口的自定义类型及其指针或别名组成 例如: type User struct { ID uint Name str ...

  2. 关于new Date总结及注意事项

    记录关于 new Date() 的一些常用方法及问题 new Date()基本方法: 创建一个日期对象的几种方法 注意: 由于浏览器差异和不一致性,强烈建议不要使用Date构造函数(和Date.par ...

  3. ☕【Java深层系列】「并发编程系列」深入分析和研究MappedByteBuffer的实现原理和开发指南

    前言介绍 在Java编程语言中,操作文件IO的时候,通常采用BufferedReader,BufferedInputStream等带缓冲的IO类处理大文件,不过java nio中引入了一种基于Mapp ...

  4. 【转】Python 并行分布式框架 Celery

    原文链接:https://blog.csdn.net/freeking101/article/details/74707619 Celery 官网:http://www.celeryproject.o ...

  5. Apache——网页优化与安全

    Apache--网页优化与安全 1.Apache 网页优化概述 2.网页压缩 3.网页缓存 4.隐藏版本信息 5.Apache 防盗链 1.Apache 网页优化概述: 企业中,部署Apache后只采 ...

  6. 节点流和处理流（BufferedReader和BufferedWriter，BufferedInputStream和BufferedOutputStream，ObjectlnputStream和objectOutputStream）

    一.基本介绍: 1.节点流可以从一个特定的数据源读写数据,如FileReader. FileWriter 如图:字节流是直接对数据源(文件,数组之类存放数据的地方)进行操作 2.处理流(也叫包装流)是 ...

  7. Flask初探之WSGI

    Flask是一个使用 Python 编写的轻量级 Web 应用框架.较其他同类型框架更为灵活.轻便.安全且容易上手.它可以很好地结合MVC模式进行开发,小型团队在短时间内就可以完成功能丰富的中小型网站 ...

  8. Linux目录结构详细

    今日内容 解析映射文件 在 window 和 Linux 系统中都有解析文件,一般名为 host,存放在配置目录 etc 中 在本地机访问网络输入域名时,首先会解析 host 文件,如果域名有对应的i ...

  9. Solution -「ZJOI 2013」「洛谷 P3337」防守战线

    \(\mathcal{Description}\)   Link.   有 \(n\) 个位置,从左至右编号 \(1\sim n\).在第 \(i\) 个位置放一座塔的代价为 \(c_i\),一个位置 ...

  10. kubeadm + containerd 部署 k8s-v1.23.3(含证书升级)

    文章目录 前言 环境准备 答应我,所有节点都要关闭防火墙 答应我,所有节点都要关闭selinux 答应我,所有节点都要关闭swap 答应我,所有节点都要开启内核模块 答应我,所有节点都要开启模块自动加 ...