Página es demasiado tarjeta? Pruebe este método!

 

Se escribe el código hace que el navegador para funcionar Ben colapso, o páginas pegado, pegado, ¿cómo? Puede probar un método de temporizador, denominado bloque de matriz.

De larga ejecución de secuencias de comandos problemas son causados ​​generalmente por dos razones: 1. demasiado largo o demasiado profundas llamadas a funciones 2. una gran cantidad de ciclos de procesamiento.

长时间循环通常遵循下面模式
for(let i = 0,len = data.length; i < len; i ++) {
    process(data[i])
}

El problema con este modelo es que el número sea procesada antes de ejecutar el proyecto no se conoce, si desea completar el proceso () toma 100 ms, una serie de dos artículos no puede verse afectada, pero 10 de la serie puede ser 1 segundo el número de elementos de la matriz está directamente relacionada con la cantidad de tiempo para completar el ciclo, debido a la implementación de JS es una operación de bloqueo, el script se ejecuta más tarda, más largo será el usuario no puede interactuar con la página de tiempo.

Hay dos cuestiones que el lazo,

  • 1. si se ha completado el proceso deben estar sincronizados? (Si se procesan los datos, que hará que la obstrucción a otra marcha, es mejor no tocarlo es)
  • 2. ¿La información se les pedirá el fin? (Por lo general, sólo un simple conjunto de métodos iterativos y combinaciones de elementos y el orden no importa, si el orden de los artículos no es tan importante, entonces se puede tratar con algunos aplazado hasta más tarde)

Cuando encuentre un bucle ocupa una gran cantidad de tiempo y respuesta a ambas preguntas es no, entonces usted puede utilizar este ciclo de división temporizador. El bloque de matriz-art cruz

Para poner en práctica el bloque de matriz es muy simple, las siguientes funciones que tienen con

function chunk(array,process,context) {
    setTimeout(function(){
        //取出下一个条目并处理
        var item = array.shift();
        process(item);
        
        //若还有条目再使用另外一个计时器
        if(array.length > 0) { setTimeout(arguments.callee,100) } },100) } 

Matriz el método de trozo () toma tres parámetros, el artículo a ser procesada, una función para el procesamiento de artículos, y, opcionalmente, ejecutar el entorno de función

Por ejemplo, un valor de la salida de cada elemento de la matriz a cada div.

let data = [12,3,21,3,21,312,3,453,123,1232];
function printValue(item) {
    let div = document.getElementById("myDiv"); div.innerHTML += item + '<br/>' } chunk(data,printValue) 

Dado que el cambio de las entradas de la matriz de cambio, la matriz puede ser clonado que, tal como en el trozo de transmisión a:

chunk(data.concat(),printValue)

En el futuro, si hay una función que toma más de 50 ms para completar, lo mejor es ver si podemos dividir la tarea en una serie de pequeñas tareas puede utilizar un temporizador.

Escanear código plus grupo, actualiza a diario una tecnología de front-end artículo para crecer juntos.

 

Supongo que te gusta

Origin www.cnblogs.com/bbqq1314/p/12545441.html
Recomendado
Clasificación