Uso eficiente seletores CSS
Visão geral
Evitando ineficiente seletores chave que correspondem a um grande número de elementos pode acelerar a renderização de páginas.
Detalhes
Como o browser interpreta HTML, ele constrói uma árvore de documentos internos que representam todos os elementos para ser exibido. Em seguida, encontrados elementos para estilos especificados em várias folhas de estilo, de acordo com a cascata CSS padrão, herança e regras de ordenação. Na implementação da Mozilla (e provavelmente outros também), para cada elemento, o motor de buscas através de regras de estilo CSS para encontrar uma correspondência. O motor avalia cada regra da direita para a esquerda, a partir do selector da direita (chamado de "chave") e movendo-se através de cada um seletor até encontrar uma correspondência ou descarta a regra. (O selector "é o elemento do documento a que a regra deve ser aplicada.)
Segundo este sistema, as regras menos o motor tem que avaliar a melhor. Assim, naturalmente, removendo CSS utilizado é um passo importante para melhorar o desempenho de renderização. Depois disso, as páginas que contêm um grande número de elementos e / ou grande número de regras de CSS, otimizando as definições das regras em si pode melhorar o desempenho também. A chave para a otimização de regras consiste em definir as regras que são tão específicos quanto possível e que evitar a redundância desnecessária, para permitir que o motor de estilos para encontrar rapidamente partidas sem gastar tempo avaliando as normas não se aplicam.
As seguintes categorias de regras são consideradas ineficientes:
- Regras com seletores descendentes
- Por exemplo:
- Regras com o seletor universal como a chave
-
corpo * {...}
. esconder-scrollbars * {...}
- Regras com um seletor de tag como a chave
ul li um {...}
# footer h3 {...}
* Html # atticPromo ul li um {...]
Seletores descendentes são ineficazes porque, para cada elemento que corresponde à chave, o navegador também deve percorrer a árvore DOM, avaliando cada elemento ancestral, até que encontra uma correspondência ou atinge o elemento raiz. A menos específica a chave, maior será o número de nós que precisam ser avaliados.
- Regras seletores com criança ou adjacente
- Por exemplo:
- Regras com o seletor universal como a chave
corpo> * {...}
. esconder-scrollbars> * {...}
- Regras com um seletor de tag como a chave
ul li>> um {...}
# footer> h3 {...}
Criança e seletores adjacentes são ineficientes porque, para cada elemento correspondente, o navegador tem de avaliar outro nó. Torna-se duplamente caro para cada um seletor filho na regra. Novamente, a menos específica a chave, maior será o número de nós que precisam ser avaliados. No entanto, embora ineficiente, eles ainda são preferíveis aos seletores descendente em termos de desempenho.
- Regras com seletores excessivamente qualificada
- Por exemplo:
ul # top_blue_nav {...}
form # UserLogin {...}
Seletores de ID são únicos, por definição. Incluindo tag ou qualificadores de classe apenas acrescenta informação redundante que precisa ser avaliado desnecessariamente.
- Regras que se aplicam
:hoverpseudo:hoverpara não ligar os elementos - Por exemplo:
h3: hover {...}
. foo: hover {...}
# foo: hover {...}
div.faa: hover {...}
:hoverpseudo:hoverselector de elementos não-âncora é conhecido por fazer IE7 e IE8 lento em alguns casos *.Quando um doctype strict não é utilizado, IE7 e IE8 irá:hoverem qualquer outro elemento de âncoras. Quando um doctype Strict é:hoversobre a não-âncoras podem causar degradação de desempenho.
* Veja um relato de bug no http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=391387.
Recomendações
- Evite um seletor universal chave.
- Permitir elementos para herdar dos antepassados, ou usar uma classe para aplicar um estilo de vários elementos.
- Faça as suas regras tão específico quanto possível.
- Prefiro classe e seletores ID sobre seletores de tag.
- Remover qualificadores redundante.
- Estes qualificadores são redundantes:
- ID selectors qualificados por classe e / ou seletores de tag
- Classe seletores qualificado por seletores de tag (quando uma classe é utilizada apenas para uma marca, que é uma boa prática de design de qualquer maneira).
- Evite o uso de seletores descendentes, especialmente aqueles que especificam antepassados redundante.
- Por exemplo, o
body ul li a {...}regrabody ul li a {...}especifica um seletorbodyredundante, uma vez que todos os elementos são descendentes da tagbody - Use seletores de classe em vez de seletores descendentes.
- Por exemplo, se você precisa de dois estilos diferentes para um item da lista ordenada e um item da lista ordenada, em vez de usar duas regras:
ul li (color: blue;)
ol li (color: red;)
Você pode codificar os estilos em dois nomes de classe e usar aquelas nas suas regras, por exemplo:
. unordered-list-item (color: blue;)
. condená-list-item (color: red;)
Se você deve usar seletores descendentes, prefere seletores filho, que, pelo menos, só exigem avaliação de um nó adicional, nem todos os nós intermediários até um antepassado.
- Evite o
:hoverselector para não-elementos de ligação para os clientes do IE. - Se você
:hoverem elementos não-âncora, testar a página no IE7 e IE8 para ter certeza de sua página é utilizável. Se você acha:hoverestá causando problemas de desempenho, considere condicionalmente usando um JavaScript manipulador de eventosonmouseoverpara clientes IE.
Recursos adicionais
- Para mais detalhes sobre as regras CSS eficiente com o Mozilla, consulte Escrevendo CSS eficiente para uso no Mozilla UI.
- Para informações completas sobre CSS, veja a Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. Para obter informações sobre seletores CSS especificamente, consulte o Capítulo 5.
Evite expressões CSS
Visão geral
Expressões CSS degradar o desempenho de renderização, substituindo-os por alternativas irão melhorar o processamento para os usuários do navegador IE.
Nota: Esta melhores práticas nesta seção se aplicam apenas para Internet Explorer 5 a 7, que suportam expressões CSS.Expressões de CSS são preteridos no Internet Explorer 8, e não é suportado por outros navegadores.
Detalhes
Internet Explorer 5 apresenta expressões CSS, ou "propriedades dinâmicas", como um meio de alterar dinamicamente as propriedades do documento em resposta a vários eventos. Elas consistem em expressões JavaScript incorporado como os valores das propriedades CSS em declarações CSS. Para a maior parte, eles são usados para os seguintes fins:
- Para emular as propriedades CSS padrão apoiado por outros navegadores, mas ainda não implementado pelo IE.
- Para proporcionar um estilo dinâmico e gestão avançada de eventos de uma forma mais compacta e conveniente do que a escrita full-blown JavaScript injetado estilos.
Infelizmente, a pena imposta pelo desempenho expressões CSS é considerável, como o navegador reavalia cada expressão sempre que qualquer evento é acionado, como redimensionar uma janela, um movimento do mouse e assim por diante. O fraco desempenho das expressões CSS é uma das razões que são agora substituídas no IE 8. Se você já usou expressões CSS em suas páginas, você deve fazer todos os esforços para removê-los e utilizar outros métodos para alcançar a mesma funcionalidade.
Recomendações
- Use as propriedades CSS padrão, se possível.
- IE 8 é totalmente CSS-standards-compliant, que suporta expressões CSS somente se for executado em "compatibilidade" mode, mas não apoiá-los no "padrão" de modo. Se você não precisa manter compatibilidade com versões mais antigas do IE, você deve converter todas as instâncias de expressões usadas no lugar de propriedades padrão CSS para suas contrapartes padrão CSS. Para obter uma lista completa das propriedades CSS e versões do IE que apoiá-los, consulte o MSDN CSS Atributos Índice. Se você precisa de suporte a versões mais antigas do IE em que as propriedades desejadas CSS não estiver disponível, utilize o JavaScript para obter a funcionalidade equivalente.
- Utilize o JavaScript para estilos de script.
- Se você estiver usando expressões de CSS para estilo dinâmico, que faz sentido reescrevê-las como JavaScript puro para melhorar o desempenho tanto no IE e obter o benefício de suportar a mesma funcionalidade em outros browsers ao mesmo tempo. Neste exemplo dado na página do MSDN sobre propriedades dinâmicas, CSS é uma expressão usada para centralizar um bloco de HTML, cujas dimensões podem mudar em tempo de execução e de re-center que bloqueiam toda vez que a janela é redimensionada:
<div id = "oDiv" style = "background-color: # CFCFCF; position: absolute;
left: expression (document.body.clientWidth/2-oDiv.offsetWidth/2);
top: expression (document.body.clientHeight/2-oDiv.offsetHeight/2) "> Exemplo DIV </ div>
Aqui está um exemplo equivalente usando JavaScript e CSS padrão:
<style>
# oDiv (position: absolute; background-color: # CFCFCF;)
</ style>
<script type="text/javascript">
/ / Check for suporte do browser capacidade de manipulação de eventos
if (window.addEventListener) (
window.addEventListener ( "load", centerDiv, false);
window.addEventListener ( "resize", centerDiv, false);
) Else if (window.attachEvent) (
window.attachEvent ( "onload", centerDiv);
window.attachEvent ( "onresize", centerDiv);
) Else (
centerDiv window.onload =;
centerDiv window.resize =;
)
centerDiv function () (
myDiv var = document.getElementById ( "oDiv");
MyBody var = document.body;
bodyWidth var = myBody.offsetWidth;
/ / Necessário para o Firefox, que não suporta offsetHeight
bodyHeight var;
if (myBody.scrollHeight)
myBody.scrollHeight bodyHeight =;
else bodyHeight myBody.offsetHeight =;
divWidth var = myDiv.offsetWidth;
if (myDiv.scrollHeight)
divHeight var myDiv.scrollHeight =;
else divHeight var myDiv.offsetHeight =;
myDiv.style.top = (bodyHeight - divHeight) / 2;
myDiv.style.left = (bodyWidth - divWidth) / 2;
)
</ script>
Se você estiver usando expressões CSS para emular as propriedades CSS que não estão disponíveis em versões anteriores do IE, você deve fornecer um código JavaScript para os casos com uma versão de teste para desativá-lo para navegadores que não suportam CSS. Por exemplo, o
max-widthde propriedademax-widtho que força o texto seja moldado à volta de um certo número de pixels, não foi apoiado até o IE 7. Como solução, esta expressão CSS prevê que a funcionalidade para o IE 5 e 6:
p (width: expression (document.body.clientWidth> 600? "600px": "auto");)
Para substituir a expressão CSS com JavaScript equivalente para as versões do IE que não suporta esta propriedade, você poderia usar algo como o seguinte:
<style>
p (max-width: 300px;)
</ style>
<script type="text/javascript">
if ((navigator.appName == "Microsoft Internet Explorer") & & (parseInt (navigator.appVersion) <7))
window.attachEvent ( "onresize", setMaxWidth);
setMaxWidth function () (
n = document.getElementsByTagName ( "p");
for (var i = 0; i <paragraphs.length; i + +)
pontos [i]. style.width = (document.body.clientWidth> 300? "300px": "auto");
</ script>
Coloque CSS no cabeçalho do documento
Visão geral
Movendo blocos estilo inline e <link> elementos do corpo do documento para a cabeça melhora o desempenho de renderização de documentos.
Detalhes
Especificando folhas de estilo externas e os blocos estilo embutido no corpo de um documento HTML pode afetar negativamente o desempenho do navegador de processamento. Navegadores bloco de renderização de uma página web até que todas as folhas de estilo externas foram baixados. Blocos estilo inline (especificado com a tag <style> pode causar refluxo e mudança de conteúdo. Portanto, é importante colocar referências a folhas de estilo externas, bem como blocos de estilo inline, no cabeçalho da página. Ao garantir que as folhas de estilo são transferidos e analisados em primeiro lugar, você pode permitir que o navegador progressivamente processar a página.
Recomendações
- Conforme requerido pela especificação HTML 4.01 (secção 12.3), sempre coloque folhas de estilo externas na seção
<head>usando o no tag<link>Não use@importCertifique-se também que você especifique o estilo na ordem correta no que diz respeito aos scripts. - Coloque
<style>blocos na seção<head>
Dimensões da Imagem Especificar
Visão geral
Especificando uma largura e altura de todas as imagens permite um processamento mais rápido, eliminando a necessidade de reembolsos desnecessários e redesenha.
Detalhes
Quando o navegador estabelece a página, ela precisa ser capaz de fluir em torno dos elementos substituíveis, como imagens.Pode começar a compor uma página antes mesmo de as imagens são transferidas, desde que se sabe as dimensões de envolver elementos não substituível por aí. Se não as dimensões estão especificadas no documento que contém, ou se as dimensões especificadas não coincidem com aqueles das imagens reais, o navegador irá exigir um refluxo e redesenhar uma vez que as imagens são baixadas. Para evitar reembolsos, especificar a largura ea altura de todas as imagens, tanto no HTML<img> tag, ou CSS.
Recomendações
- Especificar dimensões que correspondem às das imagens de si mesmos.
- Não use as especificações de largura e altura para as imagens em tempo real. Se um arquivo de imagem é realmente 60 x 60 pixels, não defina as dimensões de 30 x 30 no HTML ou CSS. Se a imagem tem de ser menor, a escala-lo em um editor de imagem e defina as suas dimensões de jogo (ver Optimize imagens para detalhes.)
- Certifique-se de especificar as dimensões do elemento de imagem ou de nível de bloqueio dos pais
- Certifique-se de definir as dimensões no
<img>elemento em si, ou um bloco de pais nível. Se o pai não é bloco de alto nível, as dimensões serão ignorados. Não definir as dimensões de um ancestral que não é um pai imediato.
Especificar um conjunto de caracteres cedo
Visão geral
Especificando um conjunto de caracteres cedo para os seus documentos HTML permite que o navegador para começar imediatamente a execução de scripts.
Detalhes
Os documentos HTML são enviados através da Internet como uma seqüência de bytes acompanhado de codificação de caracteres de informação. Informações codificação de caracteres é especificado no cabeçalho de resposta HTTP enviada com o documento, ou na marcação HTML do próprio documento. O navegador usa a codificação de caracteres de informação para converter o fluxo de bytes em caracteres que torna a tela. Porque um navegador não consegue processar corretamente uma página sem saber como construir personagens da página, a maioria dos navegadores reserva um certo número de bytes antes de executar qualquer JavaScript ou desenho da página, enquanto eles buscam as informações conjunto de caracteres na entrada. (A exceção notável é o Internet Explorer versões 6, 7 e 8.)
Navegadores diferem com o respeito ao número de bytes no buffer e codificação padrão assumido se nenhum conjunto de caracteres é encontrado. Entanto, depois de terem protegido o número necessário de bytes e começou a processar a página, se encontrar um conjunto de caracteres especificação que doesn Não encontraram seu padrão, eles precisam de nova análise da entrada e redesenhar a página. Às vezes, eles podem até ter os recursos rerequest, se o desencontro afeta as URLs dos recursos externos.
Para evitar esses atrasos, você sempre deve especificar a codificação de caracteres o mais cedo possível, para qualquer documento HTML maior que 1 KB (1024 bytes, para ser mais preciso, que é o limite máximo do buffer usado por qualquer um dos navegadores que temos testado).
Recomendações
- Prefiro HTTP sobre parâmetros metatag.
- Existem várias maneiras para especificar o conjunto de caracteres para um documento HTML:
- Do lado do servidor: Você pode configurar seu servidor web para especificar o parâmetro
charsetcom a codificação de caracteres correcta, noContent-Typede todos os documentos que são detext/htmltipotext/htmlpor exemplo,Content-Type: text/html; charset=UTF-8 - Client-side: Você incluir o
http-equiv="content"atributo na meta tag no código HTML, e especificar o parâmetrocharsetpor exemplo,<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Se possível, configure o seu servidor web para especificar o conjunto de caracteres em cabeçalhos HTTP. Alguns navegadores (Firefox, por exemplo) usam um atraso curto buffer antes de executar JavaScript se o charset está presente no cabeçalho, ou seja, eles podem ignorar o atraso adicional buffering necessários para verificar a marcação HTML. - Do lado do servidor: Você pode configurar seu servidor web para especificar o parâmetro
- Especifique a meta tag no topo da cabeceira.
- Se você não controlar a sua configuração de servidor web, ea necessidade de definir o charset na meta tag, certifique-se de especificar a marcação na parte superior da seção
<head>do documento. Browsers olhar para o parâmetro charset no primeiro 1024 bytes do documento, de modo a evitar penalidades de desempenho, é fundamental que o parâmetro aparece tão cedo quanto possível no cabeçalho do documento. - Sempre especificar um tipo de conteúdo.
- Antes de navegadores podem começar a buscar por um conjunto de caracteres, eles devem primeiro a determinar o tipo de conteúdo do documento que está sendo processado. Se isto não é especificado no cabeçalho HTTP ou a meta tag HTML, que tentará "farejar" o tipo, utilizando vários algoritmos. Este processo pode causar atrasos adicionais, além de representar uma vulnerabilidade de segurança. Para ambos os motivos de desempenho e segurança, você deve sempre especificar um tipo de conteúdo de todos os recursos (o texto não só / html).
- Certifique-se de especificar a codificação de caracteres correcta.
- É importante que o conjunto de caracteres que você especificar em um cabeçalho HTTP ou HTML tag meta coincidir com a codificação de caracteres efectivamente utilizados ao autor os seus documentos HTML. Se você especificar um parâmetro charset, tanto no cabeçalho HTTP e HTML meta tag, certifique-se que eles se combinam. Se o navegador detecta uma codificação incorreta ou errada, ele vai processar a página incorretamente e / ou incorrer em atrasos adicionais enquanto ele redesenha a página. Para mais informações sobre conjuntos de caracteres válidos, consulteCharacter Encodings Seção 5.2, na especificação HTML 4.01.
Recursos adicionais
Para mais detalhes sobre o comportamento do navegador que diz respeito à presença / ausência de tipo de conteúdo e especificações charset, veja:
- Speed Wiki Page
- Navegador problemas de desempenho com charsets
- Implicações de desempenho de "charset"
3. Vão ao site 
5. Seleccionem a última linha de código que aparece e façam "Copy" ou "Copiar". 
6. Venham à SDP e coloquem esse código dentro das seguintes Tags 
.png "English"){kind=small}
Postagens
