Cuando HTML5 y CSS3 se han convertido gradualmente en la corriente principal, estoy muy acostumbrado a usar JS para hacer algunas animaciones simples. Porque en los navegadores de escritorio, no todos admiten CSS3. Los usuarios también son muy extraños. No todos los usuarios pueden ser cultivados. Siempre hay muchas personas que piensan que Win7.win8 no es tan útil como XP. Pero el teléfono móvil es muy diferente, y el navegador móvil admite muy bien HTML5 y CSS3. Sin embargo, la capacidad de procesamiento de hardware de los teléfonos móviles es muy limitada. Hoy, cuando los teléfonos móviles de cuatro núcleos y ocho núcleos son rampantes, todavía hay personas que usan teléfonos móviles de doble núcleo o de un solo núcleo como yo. Aunque JS es bueno, no tengo mucho contacto contigo, por lo que no puedo ajustar esa sensación bien. Un simple deslizamiento de página funciona muy bien en la PC i7, pero está atascado, tartamudeado, tartamudeado, tartamudeado y tartamudeado en mi teléfono de doble núcleo. Es muy deprimente. Por esta razón, también he buscado mucho tiempo y leí mucho. Finalmente, antes de establecer, encontré un método relativamente simple: usar CSS3 para ejecutar animaciones.
En el pasado, además de las funciones de animación de JQuery, como Animation, SetTimeout y SetInterval, se usaron para encender el margen, el ancho, la parte superior y otras propiedades de un elemento. Es precisamente esto lo que me confunde.
En primer lugar, SetTimeout, SetInterval no se puede ejecutar todo el tiempo simplemente configurando 0ms. Una vez descubrí accidentalmente este secreto mientras depuraba en un ISCROLL. Resulta que el cálculo del retraso del temporizador se basa en el reloj incorporado del navegador, y la precisión del reloj depende de la frecuencia de las actualizaciones del reloj. El intervalo de actualización entre IE8 y sus versiones de IE anteriores fue de 15.6 milisegundos. Se acabó, creo que realiza un desplazamiento de 1px en 10 ms, y no puede hacer esto a tiempo.
¿Y qué está pasando con la tarjeta? Tarjeta, porque el código no está bien escrito. Después de todo, JS es de un solo hilo, y una vez que hay acciones que llevan mucho tiempo, la interfaz de usuario puede no responder. Aunque usamos SetTimout, es precisamente porque SetTimeOut lo que nos hace parecer que la interfaz no está muerta, pero la acción no es fluida. Porque después de la ejecución de SetTimeout esta vez, antes de la próxima ejecución, se puede encontrar otra acción que consume mucho tiempo en el intervalo medio, por lo que la ejecución de SetTimeOut será ilimitada. Entonces que? ¡Tarjeta! Sin embargo, hay otra razón por la cual la tarjeta puede activar accidentalmente el diseño del navegador (es decir: Relayout) al cambiar el atributo original. Esta pregunta lleva mucho tiempo, pero lleva mucho tiempo. Lleva mucho tiempo, pero a menudo se puede ignorar. Pero muchas veces no se puede ignorar.
Además de los dos párrafos anteriores, hay otro problema, es decir, en muchos teléfonos móviles, siempre parece que es marco por marco, y también puede ser marco por marco largo y corto. Este es un ritmo que puede arruinar a todos. ¿Por qué está sucediendo esto? Todavía tiene algo que ver con la demora de SetTimeOut. Deseche los marcos. Este problema implica la frecuencia de actualización del monitor. Es realmente demasiado complicado.
Finalmente, se seleccionó CSS3, JS cambió dinámicamente los atributos del elemento y la transición se usó para controlar el tiempo de ejecución de la animación. Por ejemplo:
La copia del código es la siguiente:
<div id = "test" style = "Transición: todos 1s facilidad; ancho: 100px;" >/div>
JS:
La copia del código es la siguiente:
$ ("#prueba"). Ancho (200);
De esta manera, después de 1 segundo, el ancho de este div se convertirá en 200px. No es que Sun Wukong se haga más grande en un instante, y lentamente se apresura los pies sin atascarse o detenerse. Y hay una ventaja en el uso de la animación CSS, no se ve afectado por JS que requiere mucho tiempo. Aunque los hilos de interfaz de usuario y los hilos JS son mutuamente excluyentes en los navegadores, esto no es válido para las animaciones de CSS, y muchos navegadores también pueden habilitar la aceleración de hardware (como Chrome). Aunque el reinicio del navegador no es muy obvio en situaciones ordinarias, se debe evitar la reacción a gran escala. Entonces, agregue -webkit -transform: traducez (0); o -webkit -transform: traduce3D (0,0,0); para que el navegador renderice esta capa de forma independiente. Incluso si el reinicio es inevitable, el área es más pequeña. De hecho, es una decisión muy sabia de usar traducir para reemplazar el margen.
Finalmente, algunos cambios comunes activarán las propiedades de retransmisión:
La copia del código es la siguiente:
ancho
altura
relleno
margen
mostrar
ancho de la frontera
borde
mínimo
Lo anterior es todo el contenido descrito en este artículo. Espero que sea útil para todos aprender JavaScript y CSS3. Al mismo tiempo, agregue algunas deficiencias y comprenda.