Existe uma maneira de descobrir quanta memória está sendo usada por uma página da web ou pelo meu aplicativo jquery?
Esta é minha situação:
Estou construindo um webapp com muitos dados usando um front-end jquery e um back-end tranquilo que fornece dados em JSON. A página é carregada uma vez e tudo acontece via ajax.
A IU fornece aos usuários uma maneira de criar várias guias dentro da IU, e cada guia pode conter muitos e muitos dados. Estou pensando em limitar o número de guias que eles podem criar, mas acho que seria bom limitá-las apenas quando o uso de memória ultrapassar um determinado limite.
Com base nas respostas, gostaria de fazer alguns esclarecimentos:
- Estou procurando uma solução de tempo de execução (não apenas ferramentas de desenvolvedor), para que meu aplicativo possa determinar ações com base no uso de memória no navegador do usuário.
- Contar os elementos DOM ou o tamanho do documento pode ser uma boa estimativa, mas pode ser bastante impreciso, pois não incluiria associação de eventos, dados (), plug-ins e outras estruturas de dados na memória.
javascript
jquery
memory
memory-management
Tauren
fonte
fonte
Respostas:
Atualização de 2015
Em 2012, isso não era possível, se você quisesse oferecer suporte a todos os principais navegadores em uso. Infelizmente, no momento, esse ainda é um recurso exclusivo do Chrome (uma extensão não padrão do
window.performance
).window.performance.memory
Suporte do navegador: Chrome 6+
Resposta de 2012
A resposta simples, mas correta, é não . Nem todos os navegadores expõem esses dados para você. E acho que você deveria abandonar a ideia simplesmente porque a complexidade e imprecisão de uma solução "feita à mão" podem apresentar mais problemas do que resolver.
Se você realmente deseja manter sua ideia, deve separar o conteúdo fixo do dinâmico.
O conteúdo fixo não depende das ações do usuário (memória usada por arquivos de script, plug-ins, etc.)
Todo o resto é considerado dinâmico e deve ser seu foco principal ao determinar seu limite.
Mas não há uma maneira fácil de resumi-los. Você pode implementar um sistema de rastreamento que reúna todas essas informações. Todas as operações devem chamar os métodos de rastreamento apropriados. por exemplo:
jQuery.data
Método de embrulhar ou substituir para informar o sistema de rastreamento sobre suas alocações de dados.Enrole as manipulações html para que a adição ou remoção de conteúdo também seja rastreada (
innerHTML.length
é a melhor estimativa).Se você mantiver grandes objetos na memória, eles também devem ser monitorados.
Quanto à associação de eventos, você deve usar a delegação de eventos e, em seguida, também pode ser considerado um fator um tanto fixo.
Outro aspecto que torna difícil estimar seus requisitos de memória corretamente é que navegadores diferentes podem alocar memória de maneira diferente (para objetos Javascript e elementos DOM).
fonte
innerHTML.length
leva memória ou RAM ou CPU (ou qualquer outra coisa, não tenho ideia) para processar também?window.performance
objeto. As antigas entradas "suportado por" eram aplicáveis a esse padrão.window.performance.memory
é considerada uma extensão não padrão pelo Chrome.Você pode usar a API Navigation Timing .
window.performance.memory
dá acesso aos dados de uso de memória JavaScript.Leitura recomendada
fonte
Esta questão tem 5 anos, e tanto o javascript quanto os navegadores evoluíram incrivelmente nesta época. Já que isso agora é possível (em pelo menos alguns navegadores), e essa pergunta é o primeiro resultado quando você Google "javascript show memory useage", pensei em oferecer uma solução moderna.
memory-stats.js: https://github.com/paulirish/memory-stats.js/tree/master
Este script (que você pode executar a qualquer momento em qualquer página) exibirá o uso de memória atual da página:
fonte
Não conheço nenhuma maneira de descobrir quanta memória está sendo usada pelo navegador, mas talvez seja possível usar uma heurística baseada no número de elementos da página. Uinsg jQuery, você poderia fazer
$('*').length
e ele lhe dará a contagem do número de elementos DOM. Honestamente, porém, provavelmente é mais fácil apenas fazer alguns testes de usabilidade e chegar a um número fixo de guias para suportar.fonte
Use a ferramenta Chrome Heap Snapshot
Também existe uma ferramenta Firebug chamada MemoryBug, mas parece que ainda não está muito madura.
fonte
Se você deseja apenas ver para testes, há uma maneira no Chrome por meio da página do desenvolvedor para rastrear o uso de memória, mas não sabe como fazê-lo diretamente em javascript.
fonte
Gostaria de sugerir uma solução totalmente diferente das outras respostas, ou seja, observar a velocidade do seu aplicativo e, uma vez que ele caia abaixo dos níveis definidos, mostrar dicas para o usuário fechar abas, ou desabilitar a abertura de novas abas. Uma classe simples que fornece esse tipo de informação é, por exemplo, https://github.com/mrdoob/stats.js . Além disso, pode não ser sábio para um aplicativo tão intenso manter todas as guias na memória em primeiro lugar. Por exemplo, manter apenas o estado do usuário (rolar) e carregar todos os dados a cada vez que todas as guias, exceto as duas últimas, podem ser uma opção mais segura.
Por último, os desenvolvedores de webkit têm discutido a adição de informações de memória ao javascript, mas eles apresentaram uma série de argumentos sobre o que e o que não deve ser exposto. De qualquer forma, não é improvável que esse tipo de informação esteja disponível em alguns anos (embora essa informação não seja muito útil agora).
fonte
Momento de pergunta perfeito comigo começando em um projeto semelhante!
Não há uma maneira precisa de monitorar o uso de memória JS no aplicativo, pois isso exigiria privilégios de nível mais alto. Conforme mencionado nos comentários, verificar o número de todos os elementos etc. seria uma perda de tempo, pois ignora eventos vinculados etc.
Isso seria um problema de arquitetura se o manifesto de vazamentos de memória ou elementos não utilizados persistissem. Certificar-se de que o conteúdo das guias fechadas seja excluído completamente sem manipuladores de eventos remanescentes, etc. presumindo que está feito, você pode apenas simular o uso intenso em um navegador e extrapolar os resultados do monitoramento de memória (digite about: memory na barra de endereço)
Protip: se você abrir a mesma página no IE, FF, Safari ... e Chrome; e, em seguida, navegue até about: memory no Chrome, ele relatará o uso de memória em todos os outros navegadores. Arrumado!
fonte
O que você pode querer fazer é que o servidor controle sua largura de banda para aquela sessão (quantos bytes de dados foram enviados a eles). Quando eles ultrapassam o limite, em vez de enviar dados via ajax, o servidor deve enviar um código de erro que o javascript usará para informar ao usuário que utilizou muitos dados.
fonte
Você pode obter o document.documentElement.innerHTML e verificar seu comprimento. Daria a você o número de bytes usados por sua página da web.
Isso pode não funcionar em todos os navegadores. Portanto, você pode incluir todos os elementos do seu corpo em uma div gigante e chamar innerhtml nessa div. Algo como
<body><div id="giantDiv">...</div></body>
fonte
innerHTML
É improvável que o comprimento da string gerada seja corrigido de forma útil com a memória que o navegador usa (por exemplo, em seu modelo de objeto interno) para renderizar esse HTML.