如何优化CSS以提升网页渲染速度的11个关键技巧是什么？

1. 减少选择器的复杂性。，2. 避免使用通配符选择器。，3. 优化CSS规则顺序。，4. 合并相同属性。，5. 压缩CSS文件。，6. 利用浏览器缓存。，7. 使用CDN加速。，8. 减少重绘和回流。，9. 使用硬件加速。，10. 避免使用@import。，11. 选择合适的盒模型。

1、十六进制的颜色值对位数与大小写：使用大写及6位数标注的十六进制颜色值，避免使用小写字母或省略成3位数的写法。

2、display与visibility的差异：使用display:none;隐藏对象不保留物理空间，而visibility:hidden;隐藏对象保留占据的物理空间，后者会消耗更多资源。

3、border:none;与border:0;的区别：使用border:none;不保留空间，而border:0;虽然可以隐藏掉边框，但保留bordercolor/borderstyle的使用权。

4、不宜用过小的背景图片平铺：避免使用宽高8px以下的平铺背景图片，因为它们会导致大量重复平铺，影响渲染效率。

5、慎用IE滤镜：IE的滤镜消耗资源且存在兼容性问题，建议采用GIF或JPG似透非透的办法来避免使用此滤镜。

6、{ margin:0; padding:0;}避免浏览器样式差异：有选择性地使用通配符控制内外填充样式，避免对所有标签都初始化一遍。

7、不要添加额外的标签来描述class或id：如果选择器以id作为关键选择符，请不要添加多余标签名上去，因为ID是唯一的。

8、尽量选择最特殊的类来存放选择器：通过添加class到元素，将类别进行再细分为class类，避免为了一个标签浪费时间去匹配过多的选择符。

9、避免子孙选择符：子孙选择符是CSS中最耗资源的选择符，很多情况中，我们真正想要的是子选择符。

10、标签类中不要包含子选择符：不要在标签类中使用子选择符，否则每次元素的出现，都会额外地增加匹配时间。

11、留意所有子选择符的使用：小心地使用子选择符，如果你能想出一个的不使用他的方法，那么就不要使用。

以下是两个相关的FAQs：

1、问：为什么应该避免使用小写字母或省略成3位数的十六进制颜色值？

答：因为这种写法没有确实的数据证明对浏览器的渲染效率是否有影响，而十六进制的颜色值默认标准是大写及6位数标注，在未知情况下不希望冒险而降低了渲染的效率。

2、问：为什么应该避免使用子孙选择符？

答：因为子孙选择符是CSS中最耗资源的选择符，尤其是在选择器使用标签类或通用类的时候，很多情况中，我们真正想要的是子选择符，除非有明确说明，在UI CSS中是严禁使用子孙选择符的。

序号	注意点
1	使用 标签引入CSS，尽量在中引入，避免阻塞内容渲染。
2	尽量减少CSS文件的大小，合并和压缩CSS文件。
3	使用CSS选择器时，避免过度使用复杂选择器，尽量使用类选择器。
4	避免使用通配符选择器，因为它会匹配所有元素，影响性能。
5	使用CSS的transform和opacity属性进行动画处理，它们不会触发页面的重排（reflow）和重绘（repaint）。
6	使用willchange属性为将要变化的元素设置一个提示，以便浏览器提前做好优化准备。
7	使用CSS的calc()函数进行计算，避免多次计算。
8	使用CSS的@media查询实现响应式设计，避免在移动端使用过多的媒体查询。
9	避免使用table布局，尽量使用flex或grid布局。
10	使用CSS的fontdisplay属性控制字体加载，避免字体加载导致的空白问题。
11	监控CSS的性能，使用浏览器的开发者工具分析渲染过程，找出性能瓶颈。