Introdução aos Sprites CSS
Geralmente é traduzido como "costura de imagem CSS" ou "posicionamento de textura CSS". CSS Sprites não é uma tecnologia nova. Ele se desenvolveu de forma relativamente madura no desenvolvimento web. A sombra dos CSS Sprites pode ser encontrada em todas as páginas da web das subsidiárias do Alibaba. Mas CSS Sprites não é uma regra de ouro, mas em muitos casos tem certas vantagens. O mais importante é que pode reduzir a carga no servidor e melhorar a velocidade de carregamento das páginas web. À medida que o web design se desenvolve em uma direção mais sofisticada e engenhosa, os designers começam a considerar o uso de métodos não Javascript para criar efeitos de mouse e menu suspenso. Nessa época, o CSS Sprite surgiu.
Para ser franco, CSS Sprites na verdade integra algumas imagens de fundo da página da web em um arquivo de imagem e, em seguida, usa a combinação de CSS "imagem de fundo", "repetição de fundo" e "posição de fundo" para posicionar o fundo. A posição pode usar números para localizar com precisão a posição da imagem de fundo.
Quando a página é carregada, em vez de carregar cada imagem individual, toda a imagem combinada é carregada de uma só vez. Esta é uma grande melhoria, pois reduz bastante o número de solicitações HTTP, reduz a pressão do servidor e reduz o tempo de atraso necessário para carregar imagens ao passar o mouse, tornando o efeito mais suave e sem pausas.
Artigos relacionados a CSS Sprites
Aplicativo CSS Sprites
Nesse sentido, o Taobao se sai melhor. Deixe-me tomar o Taobao como exemplo.
Exemplo 1: navegação na página do canal Taobao
Renderização:
diagrama de sprites:
