¿Desempeño de configuración de img src a valor sin cambios?

Si tengo una etiqueta img como¿Desempeño de configuración de img src a valor sin cambios?

<img src="example.png" />

y lo fijo a través de

myImg.src = "example.png";

al mismo valor de nuevo, ¿será un no-op, o será navegadores redibujar innecesariamente la imagen? (Estoy interesado principalmente en el comportamiento de IE6-8, FF3.x, Safari 4-5 y Chrome.)

Necesito cambiar muchas (cientos de) imágenes a la vez, y comparar manualmente el atributo src podría ser un poco superfluo - como supongo, que el navegador ya hace esto por mí?

Fuente

2010-08-28 Chris Lercher

¿Qué tan grandes son las imágenes (en términos de tamaño de descarga)? ¿Con qué frecuencia va a cambiar la propiedad src? – Tim

@Tim: las imágenes tienen un tamaño de descarga pequeño (solo son iconos de estado), pero normalmente no se descargarán, ya que en su mayoría ya están en la memoria caché. Las imágenes se intercambiarán en un lote, cuando el usuario realice una determinada acción; la actualización debería ser lo más rápida posible. –

No asuma que el navegador lo hará por usted. Estoy trabajando en un proyecto de escala similar que requiere cientos de imágenes (de carga dinámica), y la velocidad es la máxima prioridad.

Se recomienda encarecidamente guardar en caché la propiedad 'src' de cada elemento. Es caro de leer y configurar cientos de propiedades de elementos DOM, y configurando incluso src con el mismo valor puede causar eventos de reflujo o pintura.

[Editar] La mayoría de la lentitud en la interfaz se debió a todos mis bucles y procesos. Una vez optimizados, la interfaz de usuario fue muy ágil, incluso cuando se cargaban continuamente cientos de imágenes.

[Editar 2] A la luz de su información adicional (las imágenes son iconos pequeños de estado), tal vez debería considerar simplemente declarar una clase para cada estado en su CSS. Además, es posible que desee examinar el uso de cloneNode y replaceNode para un intercambio muy rápido y eficiente.

[Editar 3] Prueba a posicionar completamente los elementos de tu imagen. Limitará la cantidad de reflujo que debe producirse, ya que elementos totalmente posicionados están fuera del flujo.

Fuente

2010-08-28 21:36:02 Tim

Para ser más precisos: es costoso acceder a cientos de ** elementos DOM ** en JavaScript, ese sigue siendo el cuello de botella de muchos programas. –

Muy cierto; He actualizado la respuesta. – Tim

@Tim: ¡Gracias, muy interesante! He pensado en almacenar en caché la propiedad src (o en mi caso: usar un número entero para recordar el estado) - Preferiría evitarlo (es una complejidad adicional), pero si es cierto que establecer el src en un valor inalterado puede causar un ** reflujo **, entonces definitivamente lo haré. ¿Estás seguro del reflujo? –

Cuando cambia un grupo de elementos a la vez, generalmente está bloqueando el subproceso de interfaz de usuario de todos modos, por lo que solo se realiza un redibujado después de que JavaScript se complete, lo que significa que el redibujado por imagen no es un factor.

No verificaría nada aquí, deje que el navegador se encargue de ello, los nuevos son lo suficientemente inteligentes como para hacer esto de una manera eficiente (y de todos modos nunca ha sido un gran problema).

El caso verá aquí es nuevas imágenes de carga y volver a fluir la página, ya que la carga, que es lo que es caro aquí, las imágenes existentes son muy menor en comparación con el costo.

Fuente

2010-08-28 21:27:14

@Marcel - No ... "dp" debería haber sido "cargar", no estoy seguro de cómo lo hice FUBAR ... pero gracias por la captura. –

Recomiendo usar la técnica CSS Sprite. Más información en: http://www.alistapart.com/articles/

Puede usar una imagen que contenga todos los iconos. Luego, en lugar de cambiar el atributo src, actualiza la propiedad de fondo.

Fuente

2010-08-28 22:18:16 Zafer

@ Zafer: Gracias por la sugerencia. Me temo que no puedo usar eso, porque las imágenes de fondo no se escalan cuando el usuario cambia el tamaño del texto (las imágenes siempre deben tener exactamente 1em de altura). Las imágenes de fondo no se pueden escalar de ninguna manera (con CSS 2.1). –

@chris - No es cierto, al menos no en Firefox 3.6.8; las imágenes de flecha en esta página * son * imágenes de fondo y se escalan al acercar y alejar. –

@Marcel: Un zoom de página amplía todo por supuesto. Pero marque la opción "Ver -> Zoom -> Texto de zoom solamente". Algunos usuarios tienen esa opción marcada (y para algunos navegadores es la predeterminada). –

¿Desempeño de configuración de img src a valor sin cambios?

Respuesta

Cuestiones relacionadas