面試官既然能這么問，我們從技術的角度出發，探索一下這道題，上手操作了一下：

function loadAll(response) {

var html = "";

for (var i = 0; i < 100000; i++) {

html += "

title:" + '我正在測試'+[i] + "";

}

$("#content").html(html);

}

在chorme瀏覽器下面 非常卡頓，刷新頁面數據非常卡頓，渲染頁面大概花掉10秒左右的時間,卡頓非常明顯,性能瓶頸是在將html字符串插入到文檔中這個過程上， 也就是性能瓶頸是在將html字符串插入到文檔中這個過程上，也就是$("#content").html(html); 這句代碼的執行， 畢竟有10萬個li元素要被挺入到文檔里面， 頁面渲染速度緩慢也在情理之中。

解決方案

既然一次渲染10萬條數據會造成頁面加載速度緩慢，那么我們可以不要一次性渲染這么多數據，而是分批次渲染， 比如一次10000條，分10次來完成， 這樣或許會對頁面的渲染速度有提升。 然而，如果這13次操作在同一個代碼執行流程中運行，那似乎不但無法解決糟糕的頁面卡頓問題，反而會將代碼復雜化。 類似的問題在其它語言最佳的解決方案是使用多線程，JavaScript雖然沒有多線程，但是setTimeout和setInterval兩個函數卻能起到和多線程差不多的效果。 因此，要解決這個問題， 其中的setTimeout便可以大顯身手。 setTimeout函數的功能可以看作是在指定時間之后啟動一個新的線程來完成任務。

ajax 請求。。。。

function loadAll(response) {

//將10萬條數據分組， 每組500條，一共200組

var groups = group(response);

for (var i = 0; i < groups.length; i++) {

//閉包， 保持i值的正確性

window.setTimeout(function () {

var group = groups[i];

var index = i + 1;

return function () {

//分批渲染

loadPart( group, index );

}

}(), 1);

}

}

//數據分組函數(每組500條)

function group(data) {

var result = [];

var groupItem;

for (var i = 0; i < data.length; i++) {

if (i % 500 == 0) {

groupItem != null && result.push(groupItem);

groupItem = [];

}

groupItem.push(data[i]);

}

result.push(groupItem);

return result;

}

var currIndex = 0;

//加載某一批數據的函數

function loadPart( group, index ) {

var html = "";

for (var i = 0; i < group.length; i++) {

var item = group[i];

html += "

title:" + item.title + index + " content:" + item.content + index + "";

}

//保證順序不錯亂

while (index - currIndex == 1) {

$("#content").append(html);

currIndex = index;

}

}

總結

以上是生活随笔為你收集整理的ajax一次输出1万条数据库,后端接口一次给出100万条数据，请问你前端怎么分页处理...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。