从面试官角度讲一讲，前端性能优化方法：CSS篇

前言

每一个网页都离不开 css ，但是很多人又认为，css 主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的，作为页面渲染和内容展现的重要环节， css 影响着用户对整个网站的第一体验。

因此，在整个产品研发过程中， css 性能优化同样需要贯穿全程

实现方式

实现方式有很多种，主要有如下：

• 内联首屏关键CSS
• 异步加载CSS
• 资源压缩
• 合理使用选择器
• 减少使用昂贵的属性
• 不要使用@import

内联首屏关键CSS

在打开一个页面，页面首要内容出现在屏幕的时间影响着用户的体验，而通过内联 css 关键代码能够使浏览器在下载完 html 后就能立刻渲染

而如果外部引用 css 代码，在解析 html 结构过程中遇到外部 css 文件，才会开始下载 css 代码，再渲染

所以， CSS 内联使用使渲染时间提前

注意：但是较大的 css 代码并不合适内联（初始拥塞窗口、没有缓存），而其余代码则采取外部引用方式

异步加载CSS

在 CSS 文件请求、下载、解析完成之前，CSS 会阻塞渲染，浏览器将不会渲染任何已处理的内容</