前端处理后端返回的大量数据，该如何渲染？

假如后端返回1w条数据，如何渲染呢？本文提供两种方法

1. 分次加载数据
2. 滚动加载数据
3. 在线访问地址：http://www.gryns.cn:9201/（服务器慢的缘由，耗时不许，请在本地使用）

分次加载数据

    

var total = 10000; // 总条数
	var once = 1000; // 每次加载条数
	var loadCount = total / once; // 加载次数
	var recordCount = 0;
	var ulObj = document.querySelector("ul.async-load");
	function addLi(){
		// 性能优化，建立一个虚拟的dom节点
		var fragment = document.createDocumentFragment();
		for(var index = 0 ; index < once ; index ++){
			var li = document.createElement("li");
			li.innerText = `<li>这是第${recordCount}次加载</li> li${index}`;
			fragment.appendChild(li);
		}
		ulObj.appendChild(fragment);
		recordCount++;
		loop();
	}
	function loop(){
		if(recordCount < loadCount){
			window.requestAnimationFrame(addLi)
		}
	}
	loop();

滚动加载数据

// 滚动加载数据
	var scrollUl = document.querySelector("ul.scroll-load");
	var scrollRecordCount = 0;
	function scrollLoad(){
		var boxHeight = $(".scroll-load").height(),
		    total = 10000,
			once = 1000,
			loadCount = total / once;
			loadata(once , scrollRecordCount);
		$(".scroll-load").scroll(function(){
			var realHeight = $(".scroll-load")[0].scrollHeight;
			var scrollHeight = $(this).scrollTop();
			if(boxHeight+scrollHeight + 50 >= realHeight && scrollRecordCount < loadCount){
				// 加载数据
				loadata(once , scrollRecordCount);
			}
		})
	}
	// 加载数据
	function loadata(once , recordCount){
		console.log(recordCount);
		var fragment = document.createDocumentFragment();
		for(var index = 0 ; index < once ; index++){
			var li = document.createElement("li");
			li.innerText = `<li>这是第${recordCount}次加载 li${index}</li>`
			fragment.appendChild(li);
		}
		scrollUl.appendChild(fragment);
		scrollRecordCount++;
	}
	scrollLoad();

最后在页面加上监听页面耗时时间

window.onload = () => {
	    const load = Date.now() - performance.timing.navigationStart;
	    $("h1").html(`页面消耗了 ${load} ms`);
	}