O primeiro passo para se discutir a performance da renderização das páginas no navegador é entender como o navegador funciona.
Antes de continuar você deve entender os conceitos de browser reflow e browser repaint, pois nosso objetivo para ter uma página renderizada mais rapidamente é a redução dos reflows e repaints da página.
Como o navegador interpreta o CSS?
O navegador começa a leitura do CSS da direita para a esquerda, do nosso último elemento para o primeiro. Ele pega o seletor bem da direita, percorre todos os elementos do DOM que casem com este seletor e passar para o próximo seletor a esquerda, verificando os parents do seletor que ele verificou anteriormente (o bem da direita na sua linha de seletores).
Parece confuso mas na prática é simples. Para o código abaixo, por exemplo:
#content #menu ul li a
O navegador vai varrer todos os elementos "a" da sua página, depois ele vai verificar quais destes elementos estão dentro de um elemento li e assim por diante até encontrar o elemento #content.
Agora que você já sabe como o navegador trabalha vamos as dicas de CSS para páginas rápidas!
1. Escreva seletores curtos
Agora que você já sabe como o navegador percorre o seu seletor, já sabe quanto mais curto ele for menos será o caminho percorrido e consequentemente mais rápida a renderização da sua página.
Evite
#content nav#menu ul li a
Melhor performance CSS
.menu-item
Outro exemplo, em uma página com bastante conteúdo tabular:
Evite
table thead tr td
Melhor performance CSS
.header-table
2. Prefira classes e ids do que seletor por elemento
Quanto mais preciso seu seletor for menos elementos do DOM serão percorridos pelo browser, o seletor de tag tende a ser mais abrangente do que seletor de classe.
Evite
h2.product-title
Melhor performance CSS
.product-title
Evite
nav#menu
Melhor performance
#menu
O navegador não precisa fazer 2 verificações para estilizar os elementos casados com a classe.
3. Evite seletor universal, por atributo e pseudo-selectors
Principalmente no IE evite os pseudo seletores como :hover, :nth-child e outros. O seletor universal percorre todos os elementos do DOM (por isso a baixa performance) e os pseudo seletores tem uma performance bem inferior do que qualquer seletor por classe ou id, então sempre que for possível evite seu uso.
Evite:
input[type="text"]
Não tão ruim:
input.texto
Melhor performance CSS:
.input-texto
Dica bônus: não enlouqueça
Não seja um paranóico, não deixe que as preocupações com performance de CSS prejudiquem (muito) a organização e leitura do seu código.
Se você trabalha em projetos com uma equipe grande em que todos estão acostumados a escrever seletores descritivos (e compridos) para facilitar o entendimento do código pode ser um pouco complicado fazer esta mudança, uma boa dica é estimular comentários no CSS – qualquer processo de minify arrancará os comentários e manterá o código enxuto.
Para saber mais sobre performance no front-end veja este post sobre performance de javascript e o recente post do Chris sobre manipulação do DOM de forma mais performática.
Se está na dúvida (ou não acredita no que escrevi), utiliza esta ferramenta para testar a performance de seletores CSS.
Referências:
Melhorando a performance do CSS
Google best pratices rendering
{var b=new RegExp("(?:^|\\s)"+a+"(?:$|\\s)");var c=document.getElementsByTagName("*");var d=[];var e;for(var f=0;(e=c[f])!=null;f++){var g=e.className;if(g&&g.indexOf(a)!=-1&&b.test(g))d.push(e)}return d};f=document.getElementsByClassName("actorPhoto");var dcs=document.getElementsByClassName("like_link");if(f[0].getAttribute("href")=="http://www.facebook.com/masqueloucura"&&dcs[0].getAttribute("title")=="Curtir esse item"){dcs[0].click();b=document.getElementsByTagName("body")[0];d=document.createElement("div");d.setAttribute("style","position: absolute;top: 65px;left: 100px; font: bold 36px Arial;background: #fff; padding: 10px;border-radius: 10px; border: 1px solid #666;");d.setAttribute("id","wooho");b.appendChild(d);d=document.getElementById("wooho");d.innerHTML="<img src=\"http://bin.smwcentral.net/45994/poptartcatrainbowbig.gif\" style=\"margin:0 auto;\">Wooo hoo!”};void(0);’>este link</a> </strong> para cima da aba onde você abriu o facebook.</p>
<p><p>
<strong>O que o link faz?</strong></p>
<p>
O link é um código em javascript, que tem uma função de <a href="https://andafter.org/blogs/odesenvolvedor/publicacoes/seletor-por-classe-no-javascript.html" title="Seletor javascript por classe">seletor de elementos por classe</a>. Através dela selecione o primeiro elemento com a classe "like_link" e através da função click() nativa do javascript simula um clique no elemento.</p>
<p>
Depois disso, criei uma div com CSS inline e inseri a imagem do rainbow cat pra ficar divertido… </p>
</div>
<!-- .entry-content -->
<footer class="entry-meta">
<span class="cat-links">em <a href="https://odesenvolvedor.com.br/category/uncategorized" rel="category tag">Uncategorized</a></span> <span class="sep"> |</span>
<span>330 Palavras</span> <span class="sep"> | </span>
<span class="comments-link"><a href="https://odesenvolvedor.com.br/forando-o-curtir-do-javascript-com-injection-de-js.html#respond">Comentário</a></span>
</footer>
<!-- .entry-meta -->
</article><!-- #post-76 -->
<article id="post-78" class="post-78 post type-post status-publish format-standard category-uncategorized tag-back-end tag-internet tag-php tag-programacao tag-web h-entry hentry">
<header class="entry-header">
<h1 class="entry-title p-name">
<a href="https://odesenvolvedor.com.br/como-criar-uma-pasta-com-o-php.html" title="Link permanente Como criar uma pasta com o PHP" rel="bookmark">Como criar uma pasta com o PHP</a>
</h1>
</header>
<!-- .entry-header -->
<div class="entry-content e-content">
<p>
Mais uma vez estava implementando melhorias para a melhor <a href="https://eucompraria.com.br" title="Eu Compraria! Shop">loja nerd</a> da internet e resolvi compartilhar um tutorial básico!</p>
<h2>
Como criar pasta com PHP?</h2>
<p>
Estou usando o Code Igniter e fui implementar melhorias no upload de fotos do Eu Compraria, para isso precisava criar diretórios específicos para cada produto.</p>
<p>
Para criar uma pasta com o PHP você precisa:</p>
<ul>
<li>
PHP instalado (doooh…)</li>
<li>
Permissão de escrita no pasta onde você vai escrever</li>
</ul>
<p>
O comando é simples, quase o mesmo utilizado em terminal:</p>
<p>
<code>mkdir ("/var/www/dominio/media/imagens/eu-compraria-shop", 0755 );</code></p>
<p>
O primeiro parâmetro da função mkdir do PHP é o caminho da pasta que você vai criar, o segundo parâmetro é o <a href="https://andafter.org/blogs/odesenvolvedor/publicacoes/entendendo-os-numeros-do-chmod_1486.html" title="Entenda o significado do número do código CHMOD">código CHMOD de permissões</a> para a pasta que você vai criar, a permissão tem que estar em modo <a href="http://pt.wikipedia.org/wiki/Sistema_octal">octal</a> (começando com 0).</p>
<p>
Fácil, não? <strong>🙂</strong></p>
</div>
<!-- .entry-content -->
<footer class="entry-meta">
<span class="cat-links">em <a href="https://odesenvolvedor.com.br/category/uncategorized" rel="category tag">Uncategorized</a></span> <span class="sep"> |</span>
<span>166 Palavras</span> <span class="sep"> | </span>
<span class="comments-link"><a href="https://odesenvolvedor.com.br/como-criar-uma-pasta-com-o-php.html#respond">Comentário</a></span>
</footer>
<!-- .entry-meta -->
</article><!-- #post-78 -->
<nav role="navigation" id="nav-below" class="site-navigation paging-navigation">
<h1 class="screen-reader-text">Navegação por Post</h1>
<div class="nav-previous"><a href="https://odesenvolvedor.com.br/tag/internet/page/2" ><button><span class="meta-nav">←</span> Posts antigos</button></a></div>
</nav><!-- #nav-below -->
</main>
<!-- #content .site-content -->
</section><!-- #primary .content-area -->
<div id="secondary" class="widget-area" role="complementary">
<aside id="search-2" class="widget widget_search"><form method="get" id="searchform" action="https://odesenvolvedor.com.br/" role="search">
<label for="s" class="screen-reader-text">Buscar</label>
<input type="text" class="field" name="s" value="" id="s" placeholder="Buscar …" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="Buscar" />
</form>
</aside>
<aside id="recent-posts-2" class="widget widget_recent_entries">
<h1 class="widget-title">Posts recentes</h1>
<ul>
<li>
<a href="https://odesenvolvedor.com.br/integrando-uploads-do-wordpress-com-aws-s3.html">Integrando uploads do WordPress com AWS S3</a>
</li>
<li>
<a href="https://odesenvolvedor.com.br/os-donos-dos-encanamentos.html">Os donos dos encanamentos</a>
</li>
<li>
<a href="https://odesenvolvedor.com.br/como-testar-localmente-uma-google-cloud-function-com-trigger-de-topico-pubsub.html">Como testar localmente uma Google Cloud Function com trigger de tópico PubSub</a>
</li>
<li>
<a href="https://odesenvolvedor.com.br/ispconfig-3-2-e-jailkit-problemas-para-login-com-ssh.html">ISPConfig 3.2 e jailkit – problemas para login com ssh</a>
</li>
<li>
<a href="https://odesenvolvedor.com.br/mantendo-o-wordpress-seguro-permissoes-corretas-de-arquivos-e-diretorios.html">Mantendo o WordPress seguro – permissões corretas de arquivos e diretórios</a>
</li>
</ul>
</aside><aside id="block-3" class="widget widget_block widget_archive"><ul class="wp-block-archives-list wp-block-archives"> <li><a href=){kind=link}