超级会员免费看
本文主要探讨前端面试中关于CSS的常见问题，包括CSS优化方法，如加载性能、选择器性能和渲染性能的提升；CSS预处理器的作用，如LESS、SASS，以及为何使用它们；display:inline-block的间隙问题及解决方案；CSS工程化的理解，如预处理器、PostCSS在CSS维护和构建中的应用；以及如何判断元素是否进入可视区域。此外，还介绍了z-index属性在哪些情况下会失效。
1. CSS 优化和提高性能的方法有哪些
考点
- 加载性能优化；
- 选择器优化；
- 渲染优化；
答案
我们将 CSS 的优化和性能提升分为 3 个方面：
加载性能：
- css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。
- css 单一样式：当需要下边距和左边距的时候，很多时候会选择使用
margin:top 0 bottom 0；，但margin-bottom:bottom;margin-left:left;，执行效率会更高。 - 减少使用
@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。
选择器性能：
- 关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等。
- 如果规则拥有 ID 选择
订阅专栏 解锁全文
扫一扫
到【灌水乐园】发言
