前端處理後端返回的大量數據，該如何渲染？

假如後端返回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`);
	}