阅读量:0
1. 减少选择器复杂度。，2. 避免使用通配符选择器。，3. 优化CSS文件大小。，4. 使用CSS压缩工具。，5. 合并多个CSS文件。，6. 使用CDN加速。，7. 利用浏览器缓存。，8. 避免使用@import。，9. 使用硬件加速特性。，10. 合理使用动画与转换。
| 序号 | 方法与建议 | 详细说明 |
| 1 | 避免使用通配符选择器 | 不要在CSS中使用*{}或#zishu *{}来初始化所有标签的属性，因为这会遍历所有标签，消耗大量时间，尽量只对常用标签进行处理，body, li, p, h1{margin:0; padding:0}。 |
| 2 | 慎用滤镜 | IE的一些滤镜如羽化、阴影和透明效果非常耗资源，且兼容性差，如果非要实现这些效果，建议使用图片作背景，在大地震时，很多网站通过body{filter: gray;}变灰，但这会导致页面变慢。 |
| 3 | 少用绝对定位 | 绝对定位（position:absolute）虽然可以实现浮动效果，但过多使用会显著降低渲染速度，尽可能少用，或者用变通的方法实现同样的效果。 |
| 4 | 优化背景图片平铺 | 如果背景图片需要平铺，应尽量使用较大的图片，减少平铺次数，色彩少的图片建议做成GIF格式。 |
| 5 | 让属性尽可能多的去继承 | 尽量让子元素继承父元素的属性，而不是覆盖父元素的属性，这样可以减少浏览器的计算量，a:link, a:visited{color:#0000FF} a:hover, a:active{color:#FF0000} #zishu a:link, #zishu a:visited{font-weight:bold} #zishu a:hover, #zishu a:active{font-style: italic;}。 |
| 6 | 十六进制颜色值使用大写及6位数标注 | 编写十六进制颜色值时，使用标准的大写及6位数标注，以避免浏览器解析错误，提高渲染效率。 |
| 7 | display与visibility的差异 | display用于隐藏对象不保留物理空间，而visibility隐藏对象保留占据的物理空间，后者会在渲染时消耗更多资源，建议使用display:none;而非visibility:hidden;。 |
| 8 | border:none;与border:0;的区别 | border:none;不会保留边框的颜色和样式使用权，而border:0;则会保留，前者能更好地节省渲染资源。 |
| 9 | 避免用过小的背景图片平铺 | 宽高1px的背景图片虽然文件体积小，但渲染宽高500px的板块需要重复平铺2500次，这会显著影响渲染速度，建议使用适中体积及尺寸的背景图片。 |
| 10 | 合理布局和使用最特殊的类存放选择器 | 通过合理的布局和使用最特殊的类存放选择器，可以减少匹配时间和系统资源的消耗，避免在标签类中使用子选择符，以减少匹配时间。 |
相关问答
1、问题：为什么要避免使用通配符选择器？
解答： 通配符选择器会遍历所有的HTML标签，导致大量的计算和资源消耗，尤其是当HTML代码不规范时，这种消耗会更加明显。
2、问题：为什么少用绝对定位可以提高渲染速度？
解答： 绝对定位需要浏览器重新计算每个元素的位置，特别是内容较多的页面，这会导致性能下降，相对定位或变通的方法可以在不影响视觉效果的前提下，提高渲染速度。
以上内容就是解答有关“CSS渲染速度改善的十个方法与建议”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
