Problemas de desempenho com HTML para tela, por onde começar?

9

Eu tenho trabalhado em um experimento para renderizar HTML em uma imagem de tela, fazendo com que o javascript leia todas as informações necessárias do DOM carregado. Como a tela não possui muitas partes padrão do CSS, especialmente quando se trata de formatação de texto, muitos trabalhos e processos intensos de performance precisam ser feitos ( letter-spacing para um). A intenção é, e nunca será, fazer um renderizador HTML à prova de erros, já que isso simplesmente não será possível, mas tente e torne o mais preciso possível.

Para as páginas de amostra, o Google Chrome normalmente as carrega de maneira significativamente mais rápida que o FF. No entanto, para algumas páginas (geralmente as maiores), o Chrome congela completamente, enquanto o Firefox as carrega bem. Agora, tenho tentado identificar exatamente onde as coisas ficam malucas, mas não tive muita sorte, pois não produz nada no Chrome.

O Google Chrome tem algum limite de quantos sorteios de tela podem ser executados dentro de um determinado período ou quantos recursos do sistema uma página pode usar? Como posso começar a desemaranhar o gargalo se eu não conseguir qualquer tipo de feedback da página (como ele simplesmente desliga)?

Exemplos (o que deve ser feito, é renderizar uma imagem de tela na parte superior da página, que deve parecer mais ou menos igual à página HTML real. Você pode alternar a imagem da tela (mostrar / ocultar) clicando nela. não abra-os também se tiver trabalhos não salvos em seus navegadores, pois eles podem acabar pendurando-os também.):

teste simples, funciona bem em FF / Chrome

outro teste simples, funciona bem em FF / Chrome

Página completa, funciona bem em FF / Chrome

Página completa, só funciona em FF < 4, o Chrome congela

Todos usam o mesmo js, que pode ser encontrado aqui .

Eu não estou procurando um script rápido, como no tipo de emulação que isso representa, eu acho que nem poderia ser feito. Simplesmente tentando encontrar maneiras de torná-lo talvez um pouco mais eficiente, sem perder suas funcionalidades atuais.

    
por Niklas 29.05.2011 в 18:02
fonte

3 respostas

0

O problema parecia ser o atributo css background-repeat e especificamente repeat-x . Comentando

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

Corrigido o problema pelo menos para o chrome, e vendo que provavelmente era um loop infinito como o Kinlan propôs, mas por que exatamente ele fica preso apenas nas versões mais novas do FF e o chrome é algo que eu precisarei procurar mais detalhe (provavelmente não tendo a image.width disponível ainda, ou algo similar).

    
por Niklas 29.05.2011 / 19:49
fonte
4

Por onde começar?

Divida-o.

Use o mesmo exemplo e corte o quanto você faz isso (seu código de renderização) pela metade. Ainda não funciona? Na metade novamente, etc. Funcionou? Coloque de volta metade do que você tirou.

Como em, livre-se de todas as tentativas de renderização de texto ou de todos os códigos de borda / preenchimento. Apenas comente. Funciona então?

Ou tente apenas comentar ctx.drawImage(img,x,y); na linha 199 e nada mais. Funciona então?

Se tiver sorte, você poderá determinar um ponto crítico em que o Chrome está gastando muito tempo fazendo algo.

    
por Simon Sarris 29.05.2011 / 18:33
fonte
1

Já tentou usar o profiler de desempenho integrado do Chrome?

    
por hplbsh 29.05.2011 / 19:48
fonte