CSS 性能

简介:

作者给出的 CSS 性能小提示:

1. 大家都知道 id 选择器的表现效果要优于 class,事实虽然也如此,但仅仅是非常微小的差别,几乎可以不予考虑; 
2. CSS3 属性往往是影响页面性能的罪魁祸首,尤其是 animation 与 @font-face,谨慎地使用; 
3. 现代浏览器支持 Javascript 与 Flash 硬件加速,却不支持 CSS, 虽然 webkit 有优化功能,但还是受限的; 
4. 移动平台的情况是,即便现在最先进的手机也不及 10 年前最先进的电脑; 
5. 人脑有大约 80 毫秒的反应时间,优化页面性能时不要在一些细枝末节的地方花太多精力,专注于拖慢严重的地方

6. 浏览器读 CSS 的顺序是从右往左,比如 ul > li a[title="home"],最先被读到的第一部分是 a[title="home"]

7. 效率由高到低的选择器依次是 ID, class, tag, universal :

复制代码
#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap {   }  /* ID */  
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *  
ul {   }                    /* Tag */  
ul li a {  }                /* Tag */  
* {   }                     /* Universal (Slowest) */
#content [title='home']     /* Universal */
复制代码

因为浏览器从右往左读,#main-nav > li {} 这一句即使用到了 id 选择器,实际效率却不会提升多少。

8. 不需要这样写 ul#main-navigation {},因为 ID 已经是独一无二的了,同理,tag 也要尽可能地避免与 class 一同使用。

9. 后代选择器是性能最差的,尤其是后代中包含 tag 或者 universal 选择器,比如 html body ul li a {} 简直是一场灾难。

10. 浏览器如果发现某个选择器不能匹配任何元素,将会立即终止尝试,开始匹配下一个选择器,从而提高执行效率。

11. 重新思考一下为什么要这样写,是不是还有优化的可能呢?比如利用元素的继承性可以省下很多不必要的设定。

12. 如果很在意性能,尽量少用 CSS3 选择器。


本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/3845388.html,如需转载请自行联系原作者
相关文章
|
10月前
|
前端开发 JavaScript 测试技术
CSS3 动画效果对网站性能有什么影响?
CSS3动画效果在为网站带来丰富视觉体验的同时,也会对网站性能产生多方面的影响
374 58
|
8月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
10月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
10月前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
490 58
|
10月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
129 5
|
10月前
|
编解码 前端开发 JavaScript
如何根据性能检测结果进行 CSS 优化?
【10月更文挑战第28天】根据性能检测结果进行CSS优化需要综合考虑多个方面的因素,针对不同的问题采取相应的优化措施,不断调整和改进CSS代码,以提高页面的性能和用户体验。同时,在优化过程中要注意保持CSS代码的可读性和可维护性,确保优化后的代码仍然易于理解和修改。
123 12
|
10月前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
缓存 前端开发 JavaScript
CSS提高性能的方法有哪些?
CSS提高性能的方法有哪些?
153 1
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
缓存 前端开发
两个可以提升列表性能渲染的CSS
两行 CSS 让长列表性能渲染提升 7 倍
74 3