由于设计变更，需要把数据由分页展示改为全部展示（才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. Python中hash加密

    目录 简介 概念 特点 hash有哪些 算法碰撞 加盐防碰撞 加密 hashlib 主要方法 特有方法 使用方法 加盐 crypt 主要方法 使用说明 应用 密码加密 应用一致性校验 简介 概念 散列 ...

  2. linux中sed命令(全面解析)

    目录 一:linux中sed命令介绍 1.sed作用 2.sed命令格式 3.参数 4.sed的编辑模式 5.sed参数解析用法 二:sed 参数 -f 案例实战解析 1.前介 2.引入简介 3.方法 ...

  3. kubernetes之部署traefik-ingress分为http和https

    1 理解Ingress 简单的说,ingress就是从kubernetes集群外访问集群的入口,将用户的URL请求转发到不同的service上.Ingress相当于nginx.apache等负载均衡方 ...

  4. Hexo博客（Snail主题）搭建回顾概览

    Hexo博客(Snail主题)搭建回顾概览 笔者搭建博客地址:https://saltyfishyjk.github.io 目录 Hexo博客(Snail主题)搭建回顾概览 Part 0 前言 写作背 ...

  5. Network Kit与三七游戏共创流畅游戏体验，无惧网络延迟

    本文分享于HMS Core联盟论坛<[开发者说]无惧高网络吞吐量,HMS Core Network Kit与三七游戏共创流畅游戏体验>的采访整理. 三七游戏拥有<斗罗大陆·魂师对决& ...

  6. div 根据内容自适应内容

    转载请注明来源:https://www.cnblogs.com/hookjc/ #header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDT ...

  7. NSMutableArray基本概念

    1.NSMutableArray介绍 什么是NSMutableArray NSMutableArray是NSArray的子类 NSArray是不可变的,一旦初始化完毕后,它里面的内容就永远是固定的, ...

  8. Linux防火墙（iptables/firewalld）

    Linux防火墙(iptables/firewalld) 目录 Linux防火墙(iptables/firewalld) 一.iptables 1. iptables概述 2. netfilter和i ...

  9. 对于Web性能优化， 了解和经验

    我们在发布项目之前压缩CSS和JavaScript源代码,这样文件体积就变小了,用户加载必要资源所花的时间也就更短了. 压缩源码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件 ...

  10. 【Gym101137K】Knights of the Old Republic(生成树 DP)

    题目链接 大意 给定\(N\)个点\(M\)条边的一张图,其中: 每个点有两个属性\(A_i,B_i\),表示你需要至少\(A_i\)个士兵来攻占该点,而空投一个士兵至该点需要Bi的花费. 每条边都有 ...