37

Eu andei pesquisando bastante na web e nas comunidades stackoverflow, e estou chegando no ponto de acreditar que SPAs não tiram quase nenhuma vantagem do algoritmo GC dos navegadores atuais.

Nossa equipe de desenvolvimento se preocupou em destruir objetos inúteis em transições de estado que poderiam estar causando algum memory-leak,remover listeners, eventos atrelados a DOMs destruídos e todas as possibilidades que encontramos na internet. Mas ainda assim tem um tipo de memory-leak na nossa plataforma de SPA, que pode ser usado por várias horas continuamente. O gráfico abaixo representa o uso de memória em 2 horas de navegação SPA :

2 hours of SPA navigation graph

Foi um salto de 40mb para 700mb em 2 horas. Obviamente, há realmente alguns recursos como mapas e gráficos que justificam o consumo elevado de memória, porém mesmo retornando para tarefas mais simples, a memória continua lá, por muito tempo até que o GC venha e remova a memória não utilizada.

Existem alguma coisa além das coisas que listei acima que podem melhorar o GC em uma single-page application?

Sabemos que o GC não pode ser controlado pelo cliente (javascript), embora existam alguns eventos que acionam esta condição. Algumas ações do usuário como: navegação, troca de páginas, fechamento de janelas e abas, entre outros, que em alguns casos não acontecem em um SPA.

Como posso obter um resultado satisfatório com o gerenciamento de memória em um SPA sendo que não tenho tantos "gatilhos" para ativação do GC como numa aplicação multi-page?

14
  • 6
    Pergunta muito interessante (+1) e que foi/é alvo de muita discussão na internet. Muitas das melhorias foram feitas nas bibliotecas, lembro-me que o Backbone.js teve muitos problemas e depois corrigiu-os. Qual é a biblioteca com que tens este problema? estão atualizados em relação a versões? Este problema acontece em todos os browsers ou é específico de um ou outro? qual é o tipo de lógica na aplicação? muitas instancias criadas? carregam ficheiros externos? dependencias etc... tudo isso seria interessante saber.
    – Sergio
    28/04/2017 às 16:45
  • 2
    Já analizaram no dev-tools para ver a memória usada e onde, e qual pode ser o problema maior? têm problemas em todos os browsers? Se fizeres um refresh à página o problema persiste ou o browser consegue ver-se livre da "memória antiga"?
    – Sergio
    28/04/2017 às 16:51
  • 4
    Uma ideia para debug é rodar o google chrome com a flag --js-flags="--expose-gc" o que disponibiliza a função window.gc que força o garbage collector a rodar. Caso você rode e a quantidade de memória usada continue alta é forte indício de que o problema não é o coletor de lixo mas sim a aplicação vazando memória (o que pode ser culpa das bibliotecas usadas).
    – BrunoRB
    14/05/2017 às 17:03
  • 1
    Vocês estão usando html5Mode? 28/07/2017 às 15:49
  • 1
    @RafaelBernard sim, sem prefixo. 31/07/2017 às 13:11

3 Respostas 3

7
+50

(Obs.: a resposta do próprio OP é uma ótima alternativa, até melhor eu diria. =D Não deixem de conferir!)

Refreshes programados com um Service Worker

Dá refresh de 1 em 1 hora, e usa um service worker para servir o refresh da página tão rápido como um raio. Se a página estiver bem implementada, com tudo carregando na ordem certa, não vai nem piscar.

De quebra, você pode começar a usar o service worker para implementar uma experiência offline para seus usuários. =D

Para manter dados entre refreshes você vai precisar guardar todos os dados relevantes de navegação do usuário logo antes de dar o refresh. Em uma aplicação React com Redux por exemplo, poderia salvar o JSON do estado da aplicação em um sessionstorage, e recarregá-lo quando a página recarregar... se a chave não estiver lá, é porque não é um refresh programado, então foi o usuário que deu refresh mesmo, ou seja, tem como manter o comportamento default do F5.

Infelizmente, procurei pela compatibilidade, e hoje (2017-08-03) você vai ter que dar tchau pro IE, Edge, Safari e Opera Mini.

Também tem uns requisitos para usar service worker:

  • a página tem que ser servida via HTTPS (ou é só o js do service worker? tenho que testar)
  • a página da MDN diz que o FF não roda service worker em modo anônimo

Refreshes em background

Uma outra ideia é tentar inferir o nível de atividade do usuário, ou as atividades que ele estiver fazendo para achar o melhor momento de dar o refresh. Por exemplo:

  • impedir refresh se o usuário estiver digitando
  • impedir refresh se houver texto selecionado na tela
  • etc.

Ainda poderia permitir refresh só se a página não estiver ativa: window.onfocus e window.onblur.

Dá para combinar essa ideia com a ideia do service worker também, para acelerar o processo.

3
  • Já usamos nesta aplicação o service worker para implementar a experiência offline. A idéia é boa e pode sim funcionar. Como o service worker trabalha para todo o domínio talvez seja possível atualizar todas as páginas ao mesmo tempo e dessa forma liberar a memória acumulada nos limbos. Talvez seja necessário apenas trocar depois de um tempo o atributo target dos links para self e dessa forma na próxima navegação um Full reload acontecer dentro das espectativas do controle do usuário, já que um refresh durante o uso seria uma péssima experiência pra o usuário. 4/08/2017 às 0:20
  • Sim, durante o uso o usuário vai acabar percebendo, por mais que se tente manter textos selecionados, e o estado o mais fiel quanto der. Por isso a segunda ideia de dar refresh quando o usuário estiver em outra aba, ou quando o usuário estiver quieto por muito tempo, algo do tipo. Essa ideia de fazer os links de vez em quando serem um full load também parece promissora. =D 4/08/2017 às 0:24
  • Fazendo com target="_self" eu obtive um resultado similar e mais compatível com os navegadores "Legados" pt.stackoverflow.com/a/226540/7130 Porém atendeu mais expecificamente ao angularjs e em teoria o react . O serviceworker seria algo mais idependente de framework, por isso ainda é a minha resposta favorita :) 7/08/2017 às 14:03
5

Refreshs após algum gatilho programável.

O grande problema do SPA é que ele nunca atualiza o documento de fato, as alterações são feitas em memória de maneira virtual. É comum programadores desenvolverem códigos e não se preocupar com o despejo de memória, e como consequência pode causar memory leaks, como por exemplo aquela função executada em um determinado ´state´ "sequestrar" a memória indefinidamente.

Embora o target="_self" seja padrão do navegador que tem como comportamento principal abrir um link na mesma janela de um iframe com frame ou frameset /janela. Como as tags frame e frameset são obsoletos em HTML5 não usamos mais o target="_self" para essa finalidade, ele agora força que um link abra num novo documento na mesma janela. Forçando assim o total carregamento da página, recriando todas as instâncias e todas as variáveis.

No SPA esse comportamento é ignorado, e ele apresenta uma comportamento interessante que é forçar o reload quando se navega por um link de state ou navegação virtual, não tenho certeza quanto aos termos técnicos corretos. Sendo assim, dentro dos frameworks atuais é possível medir o tempo que a navegação SPA está ocorrendo e isso então disparar um gatilho que fará com que a próxima navegação ocorra renovando o documento. Abaixo criei uma função simples em javascript que faz a troca do target dentro de algumas condições:

function alteraTarget() {
  var regex = /(^mailto:|^javascript:|#)/g;
  var links = document.querySelectorAll('a');
  var alterados = 0;
  for (var i in links) {
    var a = links[i];
    if (typeof a === "function" || regex.test(a.href) || a.target == "_blank") {
      continue;
    }
    a.target = "_self";
    alterados++
  }
  console.log(alterados, " Links alterados ");
}
<!DOCTYPE html>
<html>

<body>

  <h1>My First Heading</h1>

  <p><a href="mailto:[email protected]"> Não altera </a></p>
  <p><a href="javascript:void(0)"> Não altera </a></p>
  <p><a href="#id-elemento"> Não altera </a></p>
  <p><a href="#"> Não altera </a></p>
  <p><a href="http://google.com" target="_blank"> Não altera </a></p>
  <p><a href="/state"> Altera </a></p>
  <p><a href="!/state2"> Altera </a></p>
  <p><a href="http://google.com"> Altera </a></p>

  <button type="button" onclick="alteraTarget()">Alterar target!</button>
</body>

</html>

A solução é muito similar a proposta pelo @MiguelAngelo, e pode inclusive ser usada em conjunto com o ServiceWorker para promover uma melhor experiência de usuário, porém pode ser aplicada em diversas situações, como:

Cada framework e projeto deverá implementar uma regra, mas a forma de simular essa atualização e que consequentemente limpará a memória é com o atualizações programadas do estado(state) SPA.

3

Desculpe se eu parecer ignorante em relação a esse tema,

mas para se ter um alto desgaste em mémoria, acredito eu que deve também analisar a forma com que está sendo escrito tudo isso, vou dar um exemplo, utilizando var em javascript vc cria uma variavel de escopo global, sendo assim vai ocupar mais memoria, etc. Bom vcs obviamente sabem disso muito melhor do que eu. Mas o ponto que eu quero chegar é: O quanto está sendo gasto a memoria para guardar informações em relação as paginas.

Eu trabalhava com SPA e a gnt sempre procurava guardar informações grandes em web storage.

Todas variaveis e objetos são melhores tratados com o es2015 ou seja, usando const e let, assim ele fica preso a escopo por bloco ou função. mesmo que utilize vardentro de um bloco (o uso de 'use stritcs' se eu não me engano ajuda tbm), ele inicia antes de todo o block de código dentro das functions. Enfim, dá uma olhada se existe muito vare como vc guarda as informações maiores,e tenta colocar em web storage, MAS ACREDITO EU que isso é mais problema do angular do que o seu código. só dar uma olhada no código fonte e vc vai ver muito isso que eu comentei a cima. Enfim se eu entendi bem a pergunta, acho que isso ajuda, senão, me desculpem ahahha. Abraços e boa sorte

3
  • Sim, interessante sua colocação. Usamos strict, pouquíssimas variáveis são declaradas globalmente. E grandes dados são armazenados em Sessions storage. Após o uso por uma função as memórias alocadas nessa função são descartadas pelo GC correto? Mesmo que algumas instâncias ficassem em memória não há nada que justifique este comportamento. Não tenho como aceitar como correta mas darei +1 pelas suas colocações 1/08/2017 às 18:47
  • 1
    Eu deveria ter colocado como comentario ao inves de resposta kk mas enfim, olha uma vez eu tive uma sobrecarga no sistema. No caso a gnt usava o Asp.NET WebApi , e como o iis aguenta só 10 requisições no seu pool por padrão. Descobrimos que havia um loop infinito dentro de uma chamada a ajax(era muito especifico, nao era toda hora), que aumentava demais a carga em cima da api. Assim que resolvemos, deixamos a pagina 70 a 80% mais rapida (algo assim) é um sistema muito grande, mas no final das contas. Era um loop no ajax. 1/08/2017 às 23:06
  • Imagino, mas a ideia seria explorar formas de obter o comportamento do uso de memória em aplicações que não dão reload. 2/08/2017 às 21:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .