一、前言
每一个网页都离不开css,但是很多人又认为,css主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的
作为页面渲染和内容展现的重要环节,css影响着用户对整个网站的第一体验
因此,在整个产品研发过程中,css性能优化同样需要贯穿全程
二、实现方式
实现方式有很多种,主要有如下:
内敛首屏加载关键css
异步加载css
资源压缩
合理使用选择器
减少使用昂贵的属性
不要使用@import
内联首屏关键CSS
在打开一个页面,页面首要内容出现在屏幕的时间影响着用户的体验,而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染
而如果外部引用css代码,在解析html结构过程中遇到外部css文件,才会开始下载css代码,再渲染
所以,CSS内联使用使渲染时间提前
注意:但是较大的css代码并不合适内联(初始拥塞窗口、没有缓存),而其余代码则采取外部引用方式
异步加载CSS
在CSS文件请求、下载、解析完成之前,