Continue a criar, acelere o crescimento! Este é o 4º dia da minha participação no "Nuggets Daily New Plan · Outubro Update Challenge", clique para ver os detalhes do evento
Oi, meu nome é CoderBin
I. Introdução
Cada página da web é inseparável css
, mas muitas pessoas pensam que ela css
é usada principalmente para completar o layout da página, como alguns detalhes ou otimização, então não há necessidade de pensar nisso. Na verdade, esse tipo de pensamento é incorreto
Como uma parte importante da renderização da página e da exibição do conteúdo, ela css
afeta a primeira experiência do usuário em todo o site
Portanto, em todo o processo de desenvolvimento do produto, css
a otimização de desempenho também precisa passar por todo o processo
2. Método de implementação
Existem muitas maneiras de implementar, as principais são as seguintes:
- CSS crítico inline acima da dobra
- Carregar CSS de forma assíncrona
- compressão de recursos
- Use seletores com sabedoria
- Reduza o uso de propriedades caras
- não use @import
2.1 CSS chave embutida acima da dobra
Ao abrir uma página, o momento em que o conteúdo principal da página aparece na tela afeta a experiência do usuário e, ao inserir o css
código da chave, o navegador pode renderizá-lo imediatamente html
após . Se o código de referência externo for encontrado css
no processo de análise da estrutura, o arquivo externo será baixado e renderizado. Assim, o uso inline faz o tempo de renderização avançarhtml
css
css
CSS
Nota: Mas css
o código maior não é adequado para inlining (janela de congestionamento inicial, sem cache), enquanto o restante do código é referenciado externamente
2.2 Carregar CSS de forma assíncrona
A renderização é bloqueada até que a CSS
solicitação, download e análise do arquivo sejam concluídos CSS
e o navegador não renderize nenhum conteúdo processado. Depois que o código embutido é carregado na frente, css
não há necessidade de bloquear a renderização do navegador após a referência externa. Neste momento, o esquema de carregamento assíncrono pode ser adotado, principalmente da seguinte forma:
-
Insira a tag link no final da tag head usando javascript
// 创建link标签 const myCSS = document.createElement( "link" ); myCSS.rel = "stylesheet"; myCSS.href = "mystyles.css"; // 插入到header的最后位置 document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling ); 复制代码
-
设置link标签media属性为noexis,浏览器会认为当前样式表不适用当前类型,会在不阻塞页面渲染的情况下再进行下载。加载完成后,将
media
的值设为screen
或all
,从而让浏览器开始解析CSS<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'"> 复制代码
-
通过rel属性将link元素标记为alternate可选样式表,也能实现浏览器异步加载。同样别忘了加载完成之后,将rel设回stylesheet
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'"> 复制代码
2.3 资源压缩
利用webpack
、gulp/grunt
、rollup
等模块化工具,将css
代码进行压缩,使文件变小,大大降低了浏览器的加载时间
2.4 合理使用选择器
css
匹配的规则是从右往左开始匹配,例如#markdown .content h3
匹配规则如下:
- 先找到h3标签元素
- 然后去除祖先不是.content的元素
- 最后去除祖先不是#markdown的元素
如果嵌套的层级更多,页面中的元素更多,那么匹配所要花费的时间代价自然更高
所以我们在编写选择器的时候,可以遵循以下规则:
- 不要嵌套使用过多复杂选择器,最好不要三层以上
- 使用id选择器就没必要再进行嵌套
- 通配符和属性选择器效率最低,避免使用
2.5 减少使用昂贵的属性
在页面发生重绘的时候,昂贵属性如box-shadow
/border-radius
/filter
/透明度/:nth-child
等,会降低浏览器的渲染性能
2.6 不要使用@import
css样式文件有两种引入方式,一种是link
元素,另一种是@import
@import
会影响浏览器的并行下载,使得页面在加载时增加额外的延迟,增添了额外的往返耗时
而且多个@import
可能会导致下载顺序紊乱
比如一个css文件index.css
包含了以下内容:@import url("reset.css")
那么浏览器就必须先把index.css
下载、解析和执行后,才下载、解析和执行第二个文件reset.css
2.7 Outros
- Reduza as operações de refluxo e reduza repinturas desnecessárias
- Saiba quais propriedades podem ser herdadas e evite reescrevê-las
- cssSprite, sintetiza todas as imagens de ícone, mostra a imagem de ícone que queremos com a imagem de fundo de largura e altura mais a posição de fundo, reduzindo solicitações http
- Converta imagens de ícones pequenos para codificação base64
- Animação ou transição CSS3 tente usar a transformação e a opacidade para obter a animação, não use as propriedades esquerda e superior
3. Resumo
css
A forma de atingir o desempenho pode ser considerada a partir dos três aspectos de aninhamento de seletores, características de atributos e redução http
, além de atentar css
para a ordem de carregamento do código
Cada frase: Uma pessoa sábia não é necessariamente inteligente por natureza, mas mais através de esforços ao longo da vida. Agora, entre aqueles de nós que estão estudando, muitos deles pensam que são inerentemente insuficientes e não podem aprender bem, por isso são pessimistas e desencorajados e sem vontade de aprender. Na verdade, isso não é necessário, desde que você trabalhe duro, a esperança está à sua frente.
Este é o fim deste compartilhamento. Se o conteúdo deste capítulo for útil para você, por favor, curta + favorito . Se houver algo errado com o artigo, por favor, aponte, e se você tiver alguma dúvida, você pode deixar uma mensagem na área de comentários. Espero que todos possam ganhar algo, vamos discutir e progredir juntos!