首页 > 网站建设 >

网站建设公司优化选择器的使用

发布时间:2019-10-16 作者:网站建设

  网站建设公司的选择器是CSS的核心,从最初的元素选择器、类/ID选择器,逐步演进到伪元素、伪类。三种基本的选择器类型有:
标签名选择器,如p{},即直接使用HTML标签作为选择器。
类选择器,如.content{}。
ID选择器,如#header{}。
  其中ID选择器与类选择器有很大的不同。同一个页面内不能出现相同的ID,应该尽量少地使用ID选择器,避免ID名冲突,同时使用时,需要注意命名空间的规范。
  那么选择器的优先级是如何确定的呢?一般而言,选择器越特殊,优先级就越高。也就是说一个选择器的指向性越准确,优先级也就会越高。通常使用1表示标签名选择器的优先级,用10表示类选择器的优先级,用100表示ID选择器的优先级。
  了解了选择器的优先级计算方法能够在设计页面的过程中使用最合理的优先级选择器,精准地定位到元素,便于对元素的样式进行定义。
  那么,CSS选择器是如何影响浏览器性能的呢?CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免需要消耗更多匹配时间的选择器。因此,需要了解CSS选择器匹配的机制。
通常情况下,我们保持了从左到右的阅读习惯,可能会习惯性地设定浏览器也是按照从左到右的方式进行匹配的规则,因而推测如上代码会先查找唯一的id为header的元素,再将样式应用到直系子元素的a标签上,由于文档中只有一个id为header的元素,如此推断这条选择器规则的匹配性能开销并不高。假如浏览器会以这样的方式工作:找到唯一的id为header的元素,然后把这个样式规则应用到直系子元素中的a元素上。
  事实上,恰好相反,CSS选择器是按照从右到左进行匹配的规则进行的。正因如此,上例中看似高效的选择器在实际中的匹配开销是很高的。#header>a浏览器必须遍历页面中所有的a元素并且确定其父元素的id是否为header,如此广泛的遍历,匹配性能开销非常高。同理,把子选择器修改为后代选择器,由于在遍历页面中所有a元素后还需向其上级遍历直到根节点,因此开销会更高。
  简洁的选择器不仅可以减少CSS文件大小、提高页面的加载性能,浏览器解析时也会更加高效,也会提高开发人员的开发效率,降低了维护成本。
  此外,应当移除空的CSS规则,一方面,删除无用的样式后可以缩减样式文件的体积、加快资源下载速度,另一方面,对于浏览器而言,所有的样式规则都会被解析后索引起来,即使是当前页面无匹配的规则。移除无匹配的规则、减少索引项,可以有效地加快浏览器查找速度。深圳网站建设公司本文关于“网站建设公司优化选择器的使用”的知识就介绍分享到这里,谢谢关注,博纳网络编辑整理。
 
文章标题:网站建设公司优化选择器的使用
本文地址:https://www.198bona.com/news/4292.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯