Problemas de rendimiento con HTML to canvas, ¿dónde comenzar?

Question

He estado trabajando en un experimento para representar HTML en una imagen de lienzo, haciendo que javascript lea toda la información necesaria del DOM cargado. Como el lienzo carece de muchas de las partes estándar de CSS, especialmente en lo que se refiere al formato de texto, es necesario realizar muchos rodeos y procesos de rendimiento intensivo (letter-spacing para uno). La intención es y nunca será hacer un renderizador HTML a prueba de tontos, ya que simplemente no será posible, pero en su lugar intente hacerlo lo más preciso posible.

Para las páginas de muestra, Google Chrome generalmente las carga significativamente más rápido que FF. Sin embargo, para algunas páginas (generalmente las más grandes), Chrome se congela por completo, mientras que Firefox las carga bien. Ahora, he estado tratando de precisar dónde van exactamente las cosas, pero no han tenido mucha suerte, ya que no da como resultado algo en Chrome.

¿Tiene Chrome algún límite de cuántos sorteos de lienzo se pueden realizar dentro de un cierto lapso de tiempo, o cuántos recursos del sistema puede utilizar una página? ¿Cómo puedo comenzar a desentrañar el cuello de botella si no puedo obtener ningún tipo de comentario de la página (ya que simplemente cuelga)?

Ejemplos (lo que debería hacer, es renderizar una imagen de lienzo en la parte superior de la página, que debe parecer más o menos igual a la página HTML real. Puede alternar la imagen de lienzo (mostrar/ocultar) haciendo clic en ella. por favor, no abrirlos o bien si tienes trabajo no guardado en sus navegadores, ya que puede llegar a colgarlos también):.

simple test, works fine in FF/Chrome

another simple test, works fine in FF/Chrome

Complete page, works fine in FF/Chrome

Complete page, only works in FF < 4, Chrome freezes

Todos usan el mismo js que se puede encontrar here.

No estoy buscando una secuencia de comandos extremadamente rápida, ya que con el tipo de emulación que representa las imágenes, no creo que se pueda siquiera hacer. Simplemente tratando de encontrar formas de hacerlo quizás un poco más eficiente, sin perder ninguna de sus funcionalidades actuales.

Answer 1

El problema parecía ser con el atributo css background-repeat, y específicamente repeat-x.Comentando

for(bgx=(x+background_position_left);bgx<=w;){ 
          drawImage(image,bgx,(y+background_position_top)); 
          bgx = bgx+image.width; 
         } 

ha solucionado el problema, al menos para el cromo, y mirando a que lo más probable era un bucle sin fin como Kinlan propuso, pero ¿por qué exactamente se queda atascado sólo en las nuevas versiones de FF y el cromo es algo que yo' Necesitaré buscar más en detalle (lo más probable es que no tenga el ancho de imagen disponible todavía, o algo similar).

Answer 2

¿Por dónde comenzar?

Desglose.

Utilice el mismo ejemplo y reduzca la cantidad que lo hace (su código de representación) a la mitad. ¿Todavía no funciona? Por la mitad otra vez, etc. ¿Funcionó? Devuelve la mitad de lo que sacaste.

Al igual que en, deshágase de todos los intentos de representación de texto o de todos los códigos de borde/relleno. Solo comentenlo. ¿Funciona entonces?

O intente solo comentar ctx.drawImage(img,x,y); en la línea 199 y nada más. ¿Funciona entonces?

Si tiene suerte, podrá determinar un punto crítico en el que Chrome pasa mucho tiempo haciendo algo.

Answer 3

¿Ha intentado utilizar el perfilador de rendimiento incorporado de Chrome?