前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍如果要进行优化，CSS提高性能的方法有哪些。

文章目录

前言
一、内联首屏关键CSS
二、异步加载CSS
三、资源压缩
四、合理使用选择器
五、减少使用昂贵的属性
六、不要使用@import

一、内联首屏关键CSS

内联CSS关键代码能够使浏览器在下载完html后就能立刻渲染，如果引入外部的css代码，在解析过程中遇到外部文件才会开始下载css代码，再渲染，会影响用户体验。
但是，较大的css代码并不适合内联。

二、异步加载CSS

设置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'">

三、资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间。

四、合理使用选择器

不要嵌套使用过多复杂的选择器，最好不要三层以上；
使用id选择器就没必要再进行嵌套；
通配符和属性选择器效率最低，避免使用。

五、减少使用昂贵的属性

页面发生重绘时，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能。、

六、不要使用@import

css文件引入尽量使用link，@import会影响浏览器的并行下载，延时页面加载，增加额外的往返耗时，且多个@import会导致下载顺序紊乱。

【前端知识之CSS】CSS提高性能的方法有哪些相关推荐

[css] 列举CSS优化、提高性能的方法
[css] 列举CSS优化.提高性能的方法加载性能压缩CSS通过link方式加载,而不是@import复合属性其实分开写,执行效率更高,因为CSS最终也还是要去解析如 margin-left: le ...
21. CSS 优化和提高性能的方法有哪些？
21. CSS 优化和提高性能的方法有哪些? 加载性能 css 压缩, 将写好的 css 进行打包压缩, 可以减小文件体积 css 单一样式, 当需要下边距和左边距的时候, 很多时候会选择使用 mar ...
css面试题（7）CSS优化、提高性能的方法有哪些？
CSS优化.提高性能的方法有哪些? 避免过度约束过渡约束的代码: div{position:relative;bottom:100px; // 不必要的样式约束top:-200px;width: 2 ...
计算机性能过低配色方案,系统之家windows7提示更改配色方案提高性能的方法
有很多win7旗舰版用户在运行一些游戏的时候弹出了是否要更改配色方案来提高性能的提示,原因是检测到计算机性能过低的问题,其实可以选择使用更低内存的windows7 basic主题或者提高虚拟内存,下面 ...
CSS 优化、提高性能的方法
如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要总结有下面几点: 1.尽量将样式写在单独的css文件里面,在head元素中引用有时候为了图方便或者快速搞定功能,我们可能会直接将样式写在页 ...
CSS 优化、提高性能的方法有哪些？
一.写在前面 css的优化方案,之前没有提及,所以接下来进行总结一下. 二.具体优化方案 2.1.加载性能 1.css压缩:将写好的css进行打包,可以减少很多的体积. 2.css单一样式:在需要下边 ...
「CSS深度指北」前端知识梳理之CSS篇（中秋国庆特别篇）
认识浏览器组成部分可能一说组成部分,小伙伴们就直接懵了,开门见山地说,别怕,还有更懵的在后面呢! 组成分为两大部分: shell 和内核(其中内核是核心部分,它代表着浏览器所使用的技术手段,而s ...
前端知识大全之CSS（含有JS）
目录一.概念讲解学习CSS之前必学的HTML (超链接) 二.正文代码 1.行内样式 2.内部样式(选择器) 3.外部样式 4.样式的优先级 5.简单选择器之定义单个标签(id) 6.简单选择器之 ...
CSS 压缩提高性能的群聊天记录
[武汉]~milk 说 (9:10): 问问,everything_packed.js和everything_unpacked.js 我不知道这两个在哪里设置就是生产使用everything_pac ...

【前端知识之CSS】CSS提高性能的方法有哪些

前言