後端一次給你10萬條數據,如何優雅展現，面試官到底考察我什麼?

「本文已參與好文召集令活動，點擊查看:後端、大前端雙賽道投稿，2萬元獎池等你挑戰！

背景

面試題:後臺傳給前端十萬條數據,你做爲前端如何渲染到頁面上?

回答者A：我有句話不知當講不當講,這什麼鬼需求。

回答者B：滾，後端,我不要這樣的數據,你就不能分頁給我嗎。

回答C：10萬條數據這怎麼展現，展現了也看不完啊。

分析：

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

function loadAll(response) {
	    var html = "";
	    for (var i = 0; i < 100000; i++) {
	        html += "<li>title:" + '我正在測試'+[i] + "</li>";
	    }
            $("#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 += "<li>title:" + item.title + index + " content:" + item.content + index + "</li>";
    }
    //保證順序不錯亂
    while (index - currIndex == 1) {
        $("#content").append(html);
        currIndex = index;
    }
}

複製代碼

思考:

面試官爲啥會問這樣的問題呢?現實中會有這樣的需求嗎? 咱們從技術的角度思考,其實就是考察setTimetout的知識點。面試官就是換湯不換藥。固然，其實這道題還有其餘的解決方案，能夠在評論區討論學習。

往期熱門：

• HTML+CSS面試題：2021 6月份前端面試 | HTML +CSS
• js面試題：30道 js面試題助我衝刺「20k」，颯颯颯
• vue面試題：答對這些vue面試題,我是一個合格的中級前端開發工程師嗎？
• 鏈表系列：面試官:能不能手寫幾道鏈表的基本操做