Html5-boilerplate: Adicione `white-space: nowrap` a .visuallyhidden para uma renderização mais rápida

Criado em 6 jul. 2016 · 5Comentários · Fonte: h5bp/html5-boilerplate

Antes:

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Depois de:

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: no-wrap;
    width: 1px;
}

Codepen: https://codepen.io/tomasz86/pen/pbwQqV
Codepen (depuração): https://s.codepen.io/tomasz86/debug/pbwQqV

Adicionar white-space: no-wrap faz uma enorme diferença positiva na velocidade de renderização.

Testei o código no IE11, nas versões mais recentes do Firefox e do Chrome e também no antigo Opera 12 (o único navegador com um criador de perfil CSS adequado). O código é executado mais rápido em todos eles. Há uma diferença notável tanto no IE11 quanto no Firefox. O Opera 12 mostra uma diferença de 400ms entre os dois. Na verdade, o Chrome trava ao tentar renderizar a versão sem white-space no meu PC com Windows 7, mas renderiza a outra muito rapidamente.

help wanted

Fonte

tomasz1986

❤2

Todos 5 comentários

Este é um olhar muito interessante sobre a classe visualmente oculta, obrigado, Tomasz.

Também vi a caneta de James Curd no clipe sendo descontinuada e
possivelmente substituindo por clip-path: inset (0 1px 1px 0)
https://codepen.io/aminimalanimal/pen/wMedpo

Meus resultados de teste (testado apenas no Chrome)

Teste

Renderização

Total:

Linha de base com reto de clipe

3912ms

2521m AVG 3027

2649ms

4,85 seg

3,33 seg AVG 3,87

3,44seg

Adicionar espaço em branco: nowrap

2590ms

2207ms AVG 2450

2554ms

3,79seg

2.98seg AVG 3.35

3,29 seg

Adicionar espaço em branco, remover reto do clipe

2820ms

2424ms AVG 2520

2317ms

4,32 seg

3,65 seg AVG 3,83

3,53

Adicionar espaço em branco, remover reto do clipe, adicionar caminho do clipe

* precisa do prefixo do fornecedor!

2820ms

1845ms _AVG 2241_

2057ms

4,32 seg

3.20seg _AVG 3.63_

3,37seg

Resumo: Houve uma grande variação nos testes individuais. o
o quarto teste parecia melhor no Chrome, mas a economia para uma produção "real"
página que tem apenas alguns elementos ocultos pode não valer o custo de
alterando a classe css.

* (Descobri que o caminho do clipe precisa de prefixo do fornecedor!)

--Scott Davis--

Na quarta-feira, 6 de julho de 2016 às 4h20, Tomasz W. [email protected] escreveu:

Antes:
.visuallyhidden {
fronteira: 0;
clipe: rect (0 0 0 0);
altura: 1px;
margem: -1px;
estouro: oculto;
preenchimento: 0;
posição: absoluta;
largura: 1px;
}
Depois de:
.visuallyhidden {
fronteira: 0;
clipe: rect (0 0 0 0);
altura: 1px;
margem: -1px;
estouro: oculto;
preenchimento: 0;
posição: absoluta;
espaço em branco: no-wrap;
largura: 1px;
}
Codepen: https://codepen.io/tomasz86/pen/pbwQqV
Codepen (depuração): https://s.codepen.io/tomasz86/debug/pbwQqV
Adicionando espaço em branco: o no-wrap faz uma grande diferença positiva na renderização
Rapidez.
Testei o código no IE11, as versões mais recentes do Firefox e do Chrome,
e também o antigo Opera 12 (o único navegador com um profiler CSS adequado).
O código é executado mais rápido em todos eles. Há uma diferença notável em ambos
no IE11 e Firefox. O Opera 12 mostra uma diferença de 400ms entre os dois.
O Chrome realmente trava ao tentar renderizar a versão sem
espaço em branco no meu PC com Windows 7, mas renderiza o outro muito rapidamente.
-
Você está recebendo isto porque está inscrito neste tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/h5bp/html5-boilerplate/issues/1874 ou desative o
fio
https://github.com/notifications/unsubscribe/ACKY8sYNxXJ6f9HLoTgQIKGkVDcHcnzDks5qS3NOgaJpZM4JF5XK
.

avprod1 em 6 jul. 2016

👍1

Obrigado por conduzir testes adicionais :)

Não considerei clip-path simplesmente devido à grande compatibilidade do navegador de clip (até o IE 4!). Pode estar obsoleto, mas funciona perfeitamente em todos os navegadores, o que não é comum.

Voltando ao ponto - em meus testes locais no Opera 12, a diferença é sempre em torno de 400 ms. Na verdade, descobri isso por acidente ao testar um exemplo mais real com 400 pseudoelementos adicionados desta forma. A renderização dos próprios pseudoelementos é lenta em geral, então eu queria saber se algo poderia ser feito sobre isso e fiquei agradavelmente surpreso que simplesmente adicionar white-space: nowrap reduziu o tempo de renderização em 40 ms. Pode não parecer uma diferença enorme, mas é facilmente perceptível quando todo o site é renderizado em 360 ms (e 320 ms com white-space ).

A diferença provavelmente será insignificante na maioria dos casos, quando apenas alguns elementos estão presentes, mas ajudará pessoas como eu com centenas deles. Também não acho que haja desvantagens ou riscos em adicionar white-space: nowrap . Se o desempenho pode ser melhorado dessa forma, sem custos adicionais, por que não fazer isso?

Eu realmente acho que mais testes devem ser feitos, tanto em navegadores e sistemas operacionais diferentes.

tomasz1986 em 7 jul. 2016

👍1

Eu apóio essa mudança. quer fazer um PR?