Red de conocimiento informático - Material del sitio web - Cómo usar requestanimationframe para optimizar el rendimiento del navegadorEscribí una función jog requestAnimationFrame. Aprendí un poco sobre ella antes, pero siempre sentí que no la entendía muy bien, así que la traduje. un artículo del extranjero. Artículos antiguos para compartir y aprender. ¿Qué es requestAnimationFrame? En el pasado, necesitábamos un temporizador para realizar animaciones y hacíamos algunos cambios cada milisegundo. Ahora hay buenas noticias: los proveedores de navegadores decidieron proporcionar una forma especial de hacer animaciones, requestAnimationFrame(), que permite una mejor optimización a nivel del navegador. Sin embargo, esta es solo una API básica para realizar animaciones, es decir, no se basa en cambios de estilo de elementos DOM, lienzo o WebGL, por lo que debemos escribir nuestros propios detalles de animación. ¿Por qué usarlo? Para n animaciones al mismo tiempo, el navegador puede optimizar el trabajo de optimización que originalmente requería N reflujos y redibujados a 1 vez, logrando así efectos de animación de alta calidad. Por ejemplo, ahora hay animaciones basadas en JS, animaciones de transición basadas en CSS y SVG SMIL. Además, si una pestaña del navegador ejecuta dicha animación y cambia a otra pestaña, o simplemente la minimiza, o en cualquier caso ya no puede verla, el navegador detendrá la animación. Esto significa un menor consumo de CPU, GPU y memoria, y una mayor duración de la batería. ¿Cómo utilizar? Copie el código de la siguiente manera // capa de cuña con setTimeout fallback window.requestAnimFrame = (function(){ return window.requestAnimationFrame window.webkitRequestAnimationFrame window.mozRequestAnimationFrame window.oRequestAnimationFrame window.msRequestAnimationFrame function(/*) function */ callback, /* DOMElement * /elemento){ ventana.setTimeout(devolución de llamada, 1000/60 } })(); // uso: // en lugar de setInterval(render, 16) ....(función animloop(){ render()); ; requestAnimFrame (animloop, elemento); })(); Nota: uso "requestAnimFrame" aquí porque la especificación aún está evolucionando y no quiero estar a merced de la especificación.

Cómo usar requestanimationframe para optimizar el rendimiento del navegadorEscribí una función jog requestAnimationFrame. Aprendí un poco sobre ella antes, pero siempre sentí que no la entendía muy bien, así que la traduje. un artículo del extranjero. Artículos antiguos para compartir y aprender. ¿Qué es requestAnimationFrame? En el pasado, necesitábamos un temporizador para realizar animaciones y hacíamos algunos cambios cada milisegundo. Ahora hay buenas noticias: los proveedores de navegadores decidieron proporcionar una forma especial de hacer animaciones, requestAnimationFrame(), que permite una mejor optimización a nivel del navegador. Sin embargo, esta es solo una API básica para realizar animaciones, es decir, no se basa en cambios de estilo de elementos DOM, lienzo o WebGL, por lo que debemos escribir nuestros propios detalles de animación. ¿Por qué usarlo? Para n animaciones al mismo tiempo, el navegador puede optimizar el trabajo de optimización que originalmente requería N reflujos y redibujados a 1 vez, logrando así efectos de animación de alta calidad. Por ejemplo, ahora hay animaciones basadas en JS, animaciones de transición basadas en CSS y SVG SMIL. Además, si una pestaña del navegador ejecuta dicha animación y cambia a otra pestaña, o simplemente la minimiza, o en cualquier caso ya no puede verla, el navegador detendrá la animación. Esto significa un menor consumo de CPU, GPU y memoria, y una mayor duración de la batería. ¿Cómo utilizar? Copie el código de la siguiente manera // capa de cuña con setTimeout fallback window.requestAnimFrame = (function(){ return window.requestAnimationFrame window.webkitRequestAnimationFrame window.mozRequestAnimationFrame window.oRequestAnimationFrame window.msRequestAnimationFrame function(/*) function */ callback, /* DOMElement * /elemento){ ventana.setTimeout(devolución de llamada, 1000/60 } })(); // uso: // en lugar de setInterval(render, 16) ....(función animloop(){ render()); ; requestAnimFrame (animloop, elemento); })(); Nota: uso "requestAnimFrame" aquí porque la especificación aún está evolucionando y no quiero estar a merced de la especificación.

requestAnimationFrame Código de copia de API: window.requestAnimationFrame(function(/* time */ time){ // time ~= new Date // the unix time }, /* elem delimitador opcional */ elem se proporcionan las versiones de Chrome y Firefox); primero El código copiado es el siguiente: mozRequestAnimationFrame([callback]); // Ventana de Firefox. webkitRequestAnimationFrame(callback[, elemento]); // Parámetros de Chrome: devolución de llamada: (FF opcional, se requiere Chrome) La siguiente llamada de redibujo es una función. Su primer parámetro es el tiempo actual: esencialmente el lienzo y "dibujo" es la animación. (un elemento que rodea visualmente toda la animación). Para lienzo y WebGL es el elemento , para nodos DOM se puede ignorar. ¿Es confiable? Ahora, existen algunas diferencias entre la implementación de Webkit (disponible en Nightly Safari y Chrome Dev Channel) y la implementación de Mozilla (disponible en FF4), y también hay un error en la implementación de Mozilla. De hecho, la velocidad de cuadros de la animación FF se calcula así: 1000/(16 N) fps, donde N es el tiempo de ejecución de la devolución de llamada en milisegundos. Si el tiempo de ejecución de su devolución de llamada es de 1000 ms, entonces la velocidad de fotogramas máxima es de solo 1 fps. Si el tiempo de ejecución de su devolución de llamada es de 1 ms, entonces la velocidad de cuadros es de casi 60 fps. Actualmente, FF no tiene parámetros de elementos. Miré el error de Firefox y significa aproximadamente: Incluso si el tiempo de ejecución de su devolución de llamada es inferior a 1000/60 milisegundos, mozRequestAnimationFrame() de FF nunca alcanzará los 60 fps. Por ejemplo: copie el código de la siguiente manera: function callback(time) { window.mozRequestAnimationFrame(callback()); doWork(); si doWork() tarda 1000/60 milisegundos, entonces la velocidad de cuadros es de aproximadamente 30 fps, si setTimeout(callback, 16), la misma velocidad de cuadros de animación es 60 fps. Parece que la devolución de llamada siempre comienza a ejecutarse nuevamente aproximadamente 16 ms después de que la devolución de llamada haya terminado de ejecutarse, en lugar de 16 ms después de que la devolución de llamada comenzó a ejecutarse, lo que daría como resultado fotogramas de 60 fps si fuera lo último y los cálculos fueran lo suficientemente rápidos.
上篇: ¿Cómo utilizar VC para escribir aplicaciones que se ejecutan en la red? 下篇: Cómo comprobar el tiempo de activación de tu teléfono móvil

Artículos populares