小细节导致的bootstrap table append的性能问题

相羽六

于 2016-03-18 14:25:28 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：编程

本文链接：https://blog.youkuaiyun.com/moest/article/details/50923133

32 篇文章

订阅专栏

本文介绍了一种优化方案，用于解决在BootstrapTable中大量数据导入导致浏览器卡顿的问题。通过一次性追加所有数据而非逐条添加，显著提高了操作效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景很简单，在一个bootstrap table里选择好数据之后，导入到另外一个bootstrap table里，因为要判断ID相同，所以用了个循环

$.each (selected,functioon(index,item){
	if (! 相同)
	{
		$('#table2").bootstrapTable("append",item);
	}
})

但是数据量较多的时候，就出现了灾难性的速度问题，导致浏览器卡死

优化思路：先创建一个空数据，数据塞进去，然后调用一次append方法

var added=[]
$.each (selected,functioon(index,item){
	if (! 相同)
	{
		added.push(item);
	}
})
$('#table2").bootstrapTable("append",added);

补充1 @2016年3月24日13:42:44

貌似这跟bootstrap没关系，而是循环访问dom本身会带来的结果。参考了文章

高性能JavaScript之DOM编程 http://blog.youkuaiyun.com/i10630226/article/details/50960735?ref=myread