xm-select/docs/mds/XM17.md

性能测试

数据渲染耗时测试

:::demo 事实证明分页是好使的 ^_^

<div id="demo1" class="xm-select-demo"></div>
<button class="btn" id="demo1-test1">测试1000条</button>
<button class="btn" id="demo1-test2">测试10000条</button>
<button class="btn" id="demo1-test3">测试10000条+分页</button>
<pre id="demo1-result"></pre>

<script>
function run(count, paging){
	//生成数据
	var data = [];
	for(var i = 0; i < count; i++){
		data.push({
			name: '测试数据' + i,
			value: i,
		})
	}
	
	//记录开始渲染时间
	var startTime = Date.now();
	
	var demo1 = xmSelect.render({
		el: '#demo1', 
		paging,
		data
	})
	
	//记录结束时间
	var endTime = Date.now();
	
	document.getElementById('demo1-result').innerText = `渲染耗时: ${endTime - startTime} ms`
}

document.getElementById('demo1-test1').onclick = function(){
	run(1000, false)
};

document.getElementById('demo1-test2').onclick = function(){
	run(10000, false)
};

document.getElementById('demo1-test3').onclick = function(){
	run(10000, true)
};

run(1000, false);

</script>

:::