processamento do navegador CSS Sprites

Question

Todos nós sabemos que as imagens CSS sprites são grandes para reduzir a quantidade de solicitações e tal, mas que sobre o desempenho do navegador processamento da página com vários elementos usando uma imagem grande como um fundo?

Answer 1

em máquinas mais lentas equipados com navegadores mais antigos (como o IE6 / IE7) você pode notar queda de desempenho significativa quando você está usando muito grandes imagens muitas vezes na mesma página. É ainda mais grave, quando você estiver usando sprites para:. Estados pairar

Você tem que moderar a sua tentação no sentido de empurrar todos os seus sprites para uma imagem enorme - pensar sobre quais elementos são parte do site / webapp UI e colocá-los em um arquivo Sprite (aqueles será exibido o tempo todo, durante a navegação) . Em seguida, tente grupo restante dos sprites em imagens específicas de seção do site, e usá-los quando necessário. Desvantagem é ligeiramente alargado tempo de carregamento (solicitações HTTP adicionais), mas a experiência do usuário durante a visualização / rolagem página será muito maior.

Answer 2

Você precisa equilibrar as coisas. Se você está falando de uma imagem que incluirá dizer 1000 sprites, em seguida, a CSS será enorme. Além disso, há uma chance muito fina que você estará usando todos os sprites na mesma página de qualquer maneira.

Answer 3

Como podemos julgar pela nossa experiência YouTube, não há nenhum problema com isso.

Felizmente, o navegador armazena em cache uma imagem na memória e, em seguida, usa-lo para processar a saída sempre que esta imagem é necessária.

Answer 4

Você pode salvar uma quantidade significativa de solicitações HTTP, consolidando suas imagens em um ou mais compostos sprites e usando CSS para peças de exibição selectiva do sprite dentro de sua página web. Agora que os principais navegadores têm evoluído o suficiente para suportar CSS origens e posicionamento, mais sites estão adotando esta técnica de execução. Na verdade, alguns dos locais mais movimentados sobre os sprites uso da Web CSS para salvar solicitações HTTP.

Com milhões de usuários, Yahoo! e AOL fazer tudo o que podem para melhorar a experiência do usuário. Ambos AOL.com e Yahoo.com usar CSS sprites para salvar inúmeras solicitações HTTP para suas interfaces complexas. Ambos os sites usam sprites CSS para exibir ícones seletivamente dentro de seus diretórios de serviços, e Yahoo! utilizações sprites noutro local também.

Outra vantagem de sprites CSS é que a imagem combinada é muitas vezes menor em tamanho do arquivo do que as imagens individuais, apesar de adição de espaço em branco entre as imagens. O menor tamanho de sprites é devido à reduzida sobrecarga de várias tabelas de cores e as informações de formatação necessária por imagens separadas. Para maximizar a acessibilidade e usabilidade, sprites CSS são mais utilizados para ícones ou efeitos decorativos.