El backend le proporciona 100.000 datos a la vez, ¿cómo mostrarlos de forma elegante? ¿Para qué me estás probando exactamente?

fondo

Pregunta de la entrevista: [El backend pasa 100.000 datos al front-end, ¿cómo usted, como front-end, los representa en la página? 】

Entrevistado A: Tengo algo que no sé si decir o no, ¿qué tipo de necesidad es esta?

Encuestado B: Vete, backend, no quiero este tipo de datos, ¿no puedes simplemente buscarlos por mí?

Respuesta C: ¿ Cómo puedo mostrar 100.000 datos? Ni siquiera puedo verlos todos.

analizar:

Como él puede hacer esto, exploremos esta pregunta desde una perspectiva técnica y comencemos:

function loadAll(response) {
	    var html = "";
	    for (var i = 0; i < 100000; i++) {
	        html += "<li>title:" + '我正在测试'+[i] + "</li>";
	    }
            $("#content").html(html);
}

Es muy lento en el navegador Chrome. La actualización de datos de la página es muy lenta. Se necesitan unos 10 segundos para renderizar la página. El retraso es muy obvio. El cuello de botella en el rendimiento es el proceso de insertar cadenas HTML en documentos, es decir. El cuello de botella en el rendimiento está en el proceso de insertar cadenas html en los documentos, es decir, la ejecución de $("#content").html(html);. Después de todo, hay 100.000 elementos li para insertar en el documento. En el interior, está Es comprensible que la velocidad de renderizado de la página sea lenta.

solución

Dado que renderizar 100.000 datos a la vez hará que la página se cargue lentamente, no podemos renderizar tantos datos a la vez, sino renderizarlos en lotes, como 10.000 datos a la vez y completarlos en 10 veces. la renderización de la página. La velocidad ha mejorado. Sin embargo, si estas 13 operaciones se ejecutan en el mismo proceso de ejecución de código, parece que no solo no podrá resolver el problema de la página defectuosa atascada, sino que complicará el código. La mejor solución para problemas similares en otros idiomas es utilizar subprocesos múltiples. Aunque JavaScript no tiene subprocesos múltiples, las dos funciones setTimeout y setInterval pueden tener efectos similares al subproceso múltiple. Por tanto, para solucionar este problema, puede entrar en juego setTimeout. La función de la función setTimeout puede verse como iniciar un nuevo hilo para completar la tarea después del tiempo especificado.

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;
    }
}

pensar:

¿Por qué haría tal pregunta? ¿Existe tal demanda en realidad? Cuando lo pensamos desde una perspectiva técnica, en realidad estamos examinando los puntos de conocimiento de setTimetout. El entrevistador simplemente cambió la sopa sin cambiar el medicamento. Por supuesto, en realidad existen otras soluciones a este problema, que se pueden discutir y conocer en el área de comentarios.