摘要:
下文讲述函数中return语句的功能简介说明,如下所示:
css 作为html样式编写的必备脚本,在互联网项目中必不可少,那么我们该如何编写高性能的css代码呢?下文将一一道来,如下所示:
1.css代码分析
#container > a{
color: blue;
font-size: 18px;
}
以上css代码解析注意事项:
css解析是从右到左
1.找出所有<a>标签的元素
2.找到a标签的父级中id 等于"container"的html元素
3.将匹配出的超链接元素的字体设置为blue 大小设置为18px;
css代码性能说明
css选择器采用不同的写法,会导致浏览器解析所消耗的能量不同,如:
#container *{
color: blue;
font-size: 18px;
}
上述代码,在大型页面中是不可取的写法,因为需匹配的元素非常非常多,这将会加大系统的开销,
因为根据右侧匹配规则,”*”将会匹配所有元素,
所以最右侧匹配器,我们尽量采用最小化原则
1.ID选择器
2.类选择器
3.元素选择器
4.兄弟选择器
5.子选择器
6.后代选择器
7.属性选择器
8.伪类/伪元素选择器
上述匹配器规则的性能由高至低
css代码性能优化指导
1.尽量避免使用”*”通配符
2.合理使用id选择器
因为id选择器性能最好,但是其样式只能应用到一个元素上,会使代码体积变大,尽量使用”类选择器”class
3.避免使用限定标签之”类和id写法”
例:应避免以下写法
div#className {}
div.idName {}
4.减少后代选择器使用
例:
#container > a{ }
5.多使用继承
#className {}
#className > .span { font-size:24px; }
#className > .a { font-size:24px; }