css性能优化
优化渲染
浏览器有一个固定的渲染流程——只有在布局（layout）完成后才能绘制（paint）页面，而布局的前提是要生成渲染树（render tree），而渲染树的生成则需要 DOM 和 CSSOM 树的配合
- 删除不必要的样式
- 将 CSS 拆分为独立模块
- 最小化和压缩你的 CSS
- 简化选择器
- 不要将样式应用于不需要的元素
- 使用 CSS 精灵图减少图像相关的 HTTP 请求
- 预加载重要资源
优化渲染阻塞
CSS 可以使用媒体查询将样式限定在特定条件下。媒体查询对于响应式网页设计非常重要，并且可以帮助我们优化关键渲染流程。浏览器会阻塞渲染直到解析完所有的样式，但不会阻塞不会使用的样式，例如打印样式表。通过根据媒体查询将 CSS 拆分为多个文件，可以防止在下载未使用的 CSS 时阻塞渲染。要创建一个非阻塞的 CSS 链接，将不立即使用的样式（例如打印样式）移动到单独的文件中，在 HTML 标记中添加一个 <link>，并添加一个媒体查询