Página "Pesada"

Marcelo Boeira

unread,

Jan 8, 2013, 7:06:23 AM1/8/13

to jque...@googlegroups.com

Galera, estou usando diversas bibliotecas em um sistema web que estou criando. O sistema é realmente grande, precisa de todas as libs que declaro.

O que eu fiz foi pegar todas as versoes minificadas tanto de CSS e JS e juntar em um arquivo. E o resto, o css e js que eu crio é adicionado depois, no final do arquivo, eu criei uma função PHP que concatena os arquivos em um só, criando no html só uma request, o arquivo em média fica 700KB, com TODO JS e o TODO CSS em média fica 300KB.

O problema é que minha página, pelo menos no Chrome esta consumindo horrores de memória, tem picos de 500MB ( se usado mais de 20 minutos seguidos ),

achei ridículo, pois visualmente esta fluindo super bem a página, poucas vezes acontece das fontes do FontAwesome demorarem a carregar, mas é osso do ofícion pois é melhor usar o fontAwesome do que ter imagens carregando, ou sprites css para os icones....

Se alguém souber algo sobre controle de memória, consumo, diminuição de consumo, ou práticas para melhorar o desempenho em front-end agradeço!

Vou citar algumas das Libs que estou usando :

JavaScript:

jQuery (Claro) - 1.8.3

jQueryUI - 1.8.16

Twitter Bootstrap - 2.2.2

Pines Notify - 1.2

DataTables - 1.9.4

HighCharts - 2.3.5

Bootbox.js - 2.0

CSS:

Twitter Bootstrap - 2.2.2

jQueryUI - 1.8.16

FontAwesome - 3.0

Ruan Carlos

unread,

Jan 8, 2013, 7:16:15 AM1/8/13

to jquery-br

O que ocupa memória não são os scripts carregados e sim problemas de codificação, algum while, timeout, scroll infinito, ações no body/document, falta de otimização no css. Quantidade de nós no DOM, muitas variáveis no js sem uso. e etc.

-----------------------------------------------------------------
Ruan Carlos
@ruanltbg
www.ruancarlos.com.br

www.jquerybrasil.org
Bacharel em Sistemas de Informação - Desenvolvedor web

--
Grupo de jQuery Brasil.

REGRAS: https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit

USE O JSBIN.COM / JSFIDDLE.NET PARA CÓDIGOS.

Email: jque...@googlegroups.com
Biba: jquery-br+...@googlegroups.com
Site: http://groups.google.com/group/jquery-br?hl=pt-BR

Marcelo Boeira

unread,

Jan 8, 2013, 7:19:16 AM1/8/13

to jque...@googlegroups.com

Até concordo, mas de alguma forma os objetos das libs, tipo Higcharts é um objeto se olhar nos elementos DOM, acaba por estar na memória com todos seus métodos e propriedades...

Flávio Granato

unread,

Jan 8, 2013, 7:22:28 AM1/8/13

to jque...@googlegroups.com

Marcelo,

Este ïŋ― o custo de querer ter todas as ferramentas( highcharts,
fontawesome, pine ) ïŋ― mïŋ―o.

Acho uma boa vocïŋ― otimizar as chamadas, onde vai ser necessïŋ―rio ter cada
lib... acho que este ïŋ― um caminho...

abraïŋ―os,

Flïŋ―vio Granato

Em 08-01-2013 10:19, Marcelo Boeira escreveu:
> Atïŋ― concordo, mas de alguma forma os objetos das libs, tipo Higcharts ïŋ―
> um objeto se olhar nos elementos DOM, acaba por estar na memïŋ―ria com
> todos seus mïŋ―todos e propriedades...

>
>
> --
> Grupo de jQuery Brasil.
>
> REGRAS:
> https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit
>

> USE O JSBIN.COM / JSFIDDLE.NET PARA Cïŋ―DIGOS.

>
> Email: jque...@googlegroups.com
> Biba: jquery-br+...@googlegroups.com
> Site: http://groups.google.com/group/jquery-br?hl=pt-BR

--
Flïŋ―vio Alves Granato
gpg: 968F:A938:70B9:82C7:5198:2C74:13CB:2C25:EF1E:726D

Cadmiel Jorge

unread,

Jan 8, 2013, 7:27:22 AM1/8/13

to jque...@googlegroups.com

$Flavio concordo com você, tive o mesmo problema e consegue resolver otimizando essas lib, dessa maneira minhas paginas carregão maus rapido. porem @Marcelo acho que você deveria dar uma olhada e otimizar o script por que vamos concordar essas bibliotecas vem com muitas function que a gente não usa e se fizer um controle delas acabam consumindo memoria. abçs.

2013/1/8 Flávio Granato <flavio....@gmail.com>

Marcelo,

Este é o custo de querer ter todas as ferramentas( highcharts, fontawesome, pine ) à mão.

Acho uma boa você otimizar as chamadas, onde vai ser necessário ter cada lib... acho que este é um caminho...

abraços,

Flávio Granato

Em 08-01-2013 10:19, Marcelo Boeira escreveu:

Até concordo, mas de alguma forma os objetos das libs, tipo Higcharts é

um objeto se olhar nos elementos DOM, acaba por estar na memória com

todos seus métodos e propriedades...

--
Grupo de jQuery Brasil.

REGRAS:
https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit

USE O JSBIN.COM / JSFIDDLE.NET PARA CÓDIGOS.

Email: jque...@googlegroups.com
Biba: jquery-br+unsubscribe@googlegroups.com
Site: http://groups.google.com/group/jquery-br?hl=pt-BR

--
Flávio Alves Granato

gpg: 968F:A938:70B9:82C7:5198:2C74:13CB:2C25:EF1E:726D

--
Grupo de jQuery Brasil.

REGRAS: https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit

USE O JSBIN.COM / JSFIDDLE.NET PARA CÓDIGOS.

Email: jque...@googlegroups.com
Biba: jquery-br+unsubscribe@googlegroups.com
Site: http://groups.google.com/group/jquery-br?hl=pt-BR

Ruan Carlos

unread,

Jan 8, 2013, 7:27:08 AM1/8/13

to jquery-br

Marcelo, mas ele só existe se vc criar um objeto, a lib por si só estando apenas o JS não vai ocupar memória já que ela é simplesmente texto. Agora se vc inicializar ela é outra história.

-----------------------------------------------------------------
Ruan Carlos
@ruanltbg
www.ruancarlos.com.br

www.jquerybrasil.org
Bacharel em Sistemas de Informação - Desenvolvedor web

Em 8 de janeiro de 2013 10:19, Marcelo Boeira <marcel...@gmail.com> escreveu:

Até concordo, mas de alguma forma os objetos das libs, tipo Higcharts é um objeto se olhar nos elementos DOM, acaba por estar na memória com todos seus métodos e propriedades...

--
Grupo de jQuery Brasil.

REGRAS: https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit

USE O JSBIN.COM / JSFIDDLE.NET PARA CÓDIGOS.

Email: jque...@googlegroups.com

Biba: jquery-br+...@googlegroups.com
Site: http://groups.google.com/group/jquery-br?hl=pt-BR

André Santos

unread,

Jan 8, 2013, 7:43:33 AM1/8/13

to jque...@googlegroups.com

Sei lá, não sei se vale muito a pena economizar requests ao preço de carregar uma série de dependências que você não irá utilizar o tempo todo.

O que já vi fazerem é gerar pelo backend um script único apenas com o que será usado em cada página. Aí você tem apenas um request e o arquivo não fica tão grande. Mas o grande problema é que você acaba perdendo o cache dos scripts.

O que eu costumo fazer, é carregar apenas a library (no meu caso, jQuery) e um arquivo com as functions em todas as páginas, e dentro desse functions eu carrego dinamicamente as demais dependências conforme for utilizar.

Abs,

2013/1/8 Ruan Carlos <ruan...@gmail.com>

--
- André O. Santos -

"Os eruditos são aqueles que leram nos livros; mas os pensadores, os gênios, os iluminadores do mundo e os promotores do gênero humano, são aqueles que leram diretamente no livro do mundo." (Arthur Schopenhauer)

Marcelo Boeira

unread,

Jan 8, 2013, 8:05:49 AM1/8/13

to jque...@googlegroups.com

Eu uso esquema de Bundle, eu concateno o que vou usar na página, como eu uso MVC ...

O esquema de concatenar é feito pelo PHP, e é por página que ele cria o CACHE, isso eu não posso mudar, e o esquema de carregar só o que eu preciso por página não me adianta, pois em quase todas as páginas eu tenho algum gráfico, alguma tabela, se tornaria inviável a nível de backend criar isso, eu teria que declarar tudo que uso toda vez, minha ideia é de alguma forma otimizar o uso de código, melhorar o meu código que chama as bibliotecas....

Reply all

Reply to author

Forward