摘要:本篇教程探讨了HTML5+CSS3从入门到精通之CSS3性能,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了HTML5+CSS3从入门到精通之CSS3性能,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
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 选择器。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号