Resuma um pouco da experiência de escrita CSS que aprendi, ouvi, assisti e perguntei, e escreva CSS eficiente - fale sobre a eficiência de renderização de CSS, que está relacionada à eficiência de renderização e aos recursos consumidos. Parte dele foi escrita com base no meu próprio entendimento. Não está descartado que possa haver erros e omissões. Você pode fornecer opiniões melhores.
1. Dígitos e maiúsculas de emparelhamento de valor de cor hexadecimal
Ao escrever valores de cores hexadecimais, você pode usar letras minúsculas ou omiti-las em 3 dígitos. Não há dados conclusivos que comprovem se este método de escrita tem impacto na eficiência de renderização do navegador, mas o padrão padrão para valores de cores hexadecimais. é É uma letra maiúscula e um número de 6 dígitos. Não querer correr riscos em situações desconhecidas reduz a eficiência da renderização.
* Reprovado - cor:#f3a;
* Recomenda-se usar - color:#FF33AA;
2. A diferença entre exibição e visibilidade
Eles são usados para definir ou recuperar se o objeto é exibido. A exibição de objetos ocultos não retém espaço físico e a visibilidade retém o espaço físico ocupado por objetos ocultos. Quando o navegador renderiza o espaço físico ocupado, os recursos são consumidos.
* Obsoleto - visibilidade:oculto;
* Recomenda-se usar - display:none;
3. A diferença entre border:none;
Semelhante à relação entre exibição e visibilidade, o espaço não é reservado e reservado respectivamente. Mais sobre border:0; Embora a borda possa ser ocultada, ela manterá o uso de border-color/border-style para você.
* Reprovado - borda:0;
* Recomenda-se usar - border:none;
4. Imagens de fundo muito pequenas não devem ser colocadas lado a lado.
Embora o tamanho do arquivo de uma imagem de fundo com largura e altura de 1px seja muito pequeno, renderizar um painel com largura e altura de 500px requer ladrilhos repetidos 2.500 vezes. A melhoria da eficiência da renderização da imagem de fundo está relacionada ao tamanho e volume da imagem. O maior tamanho do arquivo de imagem permanece em torno de 70 KB.
* Reprovado - imagens de fundo lado a lado abaixo de 8 px de largura e altura
* Recomendado para uso - uma imagem de fundo de tamanho e tamanho moderados
5. Filtros do IE
Além de consumir recursos, os filtros do IE também apresentam problemas de compatibilidade. Existe um filtro que torna o PNG transparente. Você pode evitar o uso desse filtro fazendo com que GIF ou JPG pareçam transparentes. Recomenda-se usar apenas transparência GIF no IE6, porque o IE7 e versões superiores já suportam transparência PNG.
* Desaprovação, abuso de filtros do IE não só consome recursos, mas também causa problemas de compatibilidade.
* Recomendado, é melhor escolher outros métodos para evitar o uso de filtros.
6. *{margin:0; padding:0;} para evitar diferenças de estilo do navegador
O curinga * inicializa todas as tags e a renderização do navegador consome determinados recursos. Algumas tags são quase iguais em navegadores diferentes ou algumas tags não são mais recomendadas (porque você não as usará). Elas não precisam de curingas para serem reinicializadas.
* Obsoleto, use * curinga
* Reprovado, tabela div span button b e outras tags devem ser incluídas em curingas para controlar estilos de preenchimento internos e externos
* Recomenda-se o uso seletivo de curingas para controlar os estilos de preenchimento interno e externo.
7. Não adicione tags adicionais para descrever classe ou id
Se você tiver um seletor que usa id como seletor de chave, não adicione nomes de tags extras. Como o ID é único, você não deve reduzir a eficiência da correspondência por um motivo inexistente.
* Obsoleto - button#backButton { }
* Obsoleto - .menu-left #newMenuIcon { }
* Recomenda-se usar - #backButton { }
*Recomenda-se usar - #newMenuIcon { }
8. Tente escolher a classe mais especial para armazenar o seletor
Uma das maiores razões para reduzir a eficiência do sistema é que usamos muitos seletores nas classes de tags. Ao adicionar classes aos elementos, podemos subdividir categorias em classes para não perdermos tempo combinando muitos seletores para uma tag.
* Obsoleto - treeitem[mailfolder="true"] > treerow > treecell { }
* Recomenda-se usar - .treecell-mailfolder { }
9. Evite seletores descendentes
O seletor descendente é o seletor que consome mais recursos em CSS. Realmente consome muitos recursos, especialmente quando o seletor usa uma classe de rótulo ou uma classe geral. Em muitos casos, o que realmente queremos é um subseletor. A menos que seja explicitamente declarado, o uso de seletores descendentes é estritamente proibido em UI CSS.
* Obsoleto - treehead treerow treecell { }
* Melhor, mas ainda não funciona (veja o próximo artigo) - treehead > treerow > treecell { }
10. Não inclua subseletores em classes de rótulos
Não use subseletores em classes de rótulos. Caso contrário, cada ocorrência de um elemento aumentará adicionalmente o tempo de correspondência. (Especialmente se o seletor parece corresponder)
* Obsoleto - treehead > treerow > treecell { }
* Recomenda-se usar - .treecell-header { }
11. Preste atenção ao uso de todos os subseletores
Use subseletores com cuidado. Se você consegue pensar em uma maneira de não usá-lo, então não use. Em particular, árvores e menus RDF frequentemente usam subseletores, como este.
* Obsoleto - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
Lembre-se que as propriedades RDF podem ser copiadas em templates! Usando isso, podemos copiar os atributos RDF nos elementos XUL filhos que queremos alterar com base nesse atributo.
* Recomenda-se usar - .tree-folderpane-icon[IsImapServer="true"] { }