面试官:说说你对css效率的理解

大家好,我是小雨小雨,致力于分享有趣的、实用的技术文章。

内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步。

大家的支持是我创作的动力。

选择器的优先级

众所周知,选择器是有权重的,优先级从低到高,如下所示:

  • 类型选择器(例如,h1)和伪元素(例如,::before)
  • 类选择器 (例如,.example),属性选择器(例如,[type="radio"])和伪类(例如,:hover)
  • ID 选择器(例如,#example)
  • !important 此声明将覆盖任何其他声明,不建议使用,除非以下几种情况:
  1. 覆盖内联样式
  2. 覆盖优先级绝对高的选择器

选择器解析

虽然我们平常写css选择器是从左到右书写的:

根节点 .子节点 .孙节点{

}

但是,这只不过是为了方便使用者书写,真正的解析顺序是反过来的,也就是从子节点搜索到根节点,原因很简单,因为查找次数将大大影响效率。一个个来说

由于css tree是树结构,如果从根节点开始,那么就是类似深度优先遍历的查找方式,一图辟千言:

如果到最后一个子节点仍然找不到的话,就是回到之前的父节点,继续查找其他的子节点,其实看起来也没毛病哈,那我们来个对比,看下css为什么选择从左到右解析。

一样的图,换了个解析方向:

很明显的差别就是,我们的判断条件提前了,先判断孙节点是否匹配,只有匹配才会继续深入,否则直接跳过,然后这就从多个多条线(深度优先遍历)变成了多个单条线的问题,有点类似于从O(n2) => O(n)的意思,大大提高了元素匹配效率。

大白话解释就是: 从右到左解析比从左到右解析减少了查找失败的次数和深度

还有一点就是公共样式,对于公共样式,其实就是多个相同的样式,从子节点到根节点是完全相同的,也就是一条线即可

书写高效css选择器

  • 优先就是避免使用通配符匹配,这样css从右到左的解析就白搭了,莫得用处了。就和从左到右一样一样的了。
  • 之前提到的选择器优先级ID选择器是最高的,但这仅仅限于单独用ID选择器,如果你和其他选择器混合使用的话,就发挥不到id选择器的唯一高效性了。为什么呢?因为从右到左解析呀,比如 #box .text,会先进行类选择器的查找,最后才是ID选择器,所以ID选择器就显的没那么重要了。
  • 尽量少使用标签结束,因为这会让浏览器查找很多个子节点,然后才能确定是否匹配,比如:.box a,只要有a标签就会进行查找,但是其实我们只想给.box上的a设置样式,我们可以给个更具体的类选择器:.box .href,这样就能匹配更少的元素啦
  • 还有就是经常说的避免选择器超过三个,比如 .div1 .div2 .div3 .p .a 就可以优化为 .div1 .a,为啥这样说的,因为查找中也有条件进行判断啊我们提供了一个子节点.a,并且是在.div1下的其实就够了,他会沿着一条线查找,知道跟节点,咱写这么多选择器只会徒增判断条件,没卵用。。
  • 还有就是尽量写得具体,可以使用>操作符等等
  • 选择器上能缩写的命名就尽量缩写、相同父层级的选择器合并,都可以适当减少css体积。
  • 使用CSS BEM书写规范
  • 欢迎补充

最后

这次分享内容就到这了,比较短小,哈哈。

打算做完rollup之后,重拾基础了,毕竟一切都是从根本一点点码起来的,只有底子厚了,才能厚积薄发。

原文地址:https://www.cnblogs.com/xiaoyuxy/p/12554571.html

时间: 2024-10-16 11:44:49

面试官:说说你对css效率的理解的相关文章

面试的时候怎么和面试官讲解你对MySQL索引的理解

一.索引是什么? 索引是帮助MySQL高效获取数据的数据结构. 二.索引能干什么? 索引非常关键,尤其是当表中的数据量越来越大时,索引对于性能的影响愈发重要.索引能够轻易将查询性能提高好几个数量级,总的来说就是可以明显的提高查询效率. 三.索引的分类? 1.从存储结构上来划分:BTree索引(B-Tree或B+Tree索引),Hash索引,full-index全文索引,R-Tree索引.这里所描述的是索引存储时保存的形式, 2.从应用层次来分:普通索引,唯一索引,复合索引 3.根据中数据的物理顺

面试官: 写过『通用前端组件』吗?

前言 设计前端组件是最能考验开发者基本功的测试之一,因为调用Material design.Antd.iView 等现成组件库的 API 每个人都可以做到,但是很多人并不知道很多常用组件的设计原理. 能否设计出通用前端组件也是区分前端工程师和前端api调用师的标准之一,那么应该如何设计出一个通用组件呢? 下文中提到的组件库通常是指单个组件,而非集合的概念,集合概念的组件库是 Antd iView这种,我们所说的组件库是指集合中的单个组件,集合性质的组件库需要考虑的要更多. 文章目录 前端组件库的

【转】跟面试官聊.NET垃圾收集,直刺面试官G点

装逼的面试官和装逼的程序员 我面试别人的时候,经常是按这种路子来面试: 看简历和面试题,从简历和面试题上找到一些技术点,然后跟应聘者聊. 聊某个技术点的时候,应聘者的回答会牵涉到其他的技术点,然后我会一一记下来,再挑一些我感兴趣的技术点继续和他聊 有时候应聘者为了装逼会牵涉出很多技术点,他自己可能只是知道个名字就说出来了. 这样的话,能很轻易的发现应聘者的水平,也能知道他提供的面试信息的水分有多少. --------------------- 然而,有的时候会碰到一些我自己都不熟悉的技术点(比如

Android开发面试经——6.常见面试官提问Android题②(更新中...)

版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客:http://blog.csdn.net/finddreams/article/details/44560061 1.HttpURLConnection和HttpClient他们各自的优缺点是什么? HttpUrlConnection 在 2.3 以前的版本是有 bug 的,所以之前的版本推荐使用 HttpClient,但是 google 现在

走向DBA[MSSQL篇] 面试官最喜欢的问题 ----索引+C#面试题客串

原文:走向DBA[MSSQL篇] 面试官最喜欢的问题 ----索引+C#面试题客串 对大量数据进行查询时,可以应用到索引技术.索引是一种特殊类型的数据库对象,它保存着数据表中一列或者多列的排序结果,有效地使用索引可以提高数据的查询效率.大家面试初级.中级或者高级程序员的时候应该大部分都会被问到这样一些问题,你了解索引吗?你知道索引的分类吗?你知道这些索引的区别吗?你如何去创建有效的索引.本章让大家学会反问面试官 hold住全场. --_____-- 友情客串 最近面试的文章比较火 客串一下 我只

Web前端面试指导(十九):CSS样式-如何清除元素浮动?

题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题思路 可以先回答在工作上常用的清除方法,并说明为什么使用它,然后在讲一些其它的清除方法来说明你的思维广阔,知识丰富的一面. 浮动的方式有以下4种. 1.使用clear:both清除浮动 示例1:使用div html代码 css代码 <div class="box"> <d

阿里Java面试官分享初级Java程序员通过面试的技巧

本来想分享毕业生和初级程序员如何进大公司的经验,但后来一想,人各有志,有程序员或许想进成长型或创业型公司或其它类型的公司,所以就干脆来分享些提升技能和通过面试的技巧,技巧我讲,公司你选,两厢便利. 毕业生和初级程序员(一般是工作经验3年以下)大多处于事业的青黄不接的阶段,在找工作时往往会遇到缺乏实际项目经验的瓶颈,作为技术面试官,我也经常在面试过程中感受到这些候选人缺乏实际经验的缺陷.不过本人之前做过java兼职培训老师,也总结了些这批人群提升实际技能和面试技能的技巧,最近也老有人来问我这个,所

学生自学Python去面试,月薪为何仅3K?面试官问题解析!

很多人认为Python语言简单(实际真的那么简单吗?语法简洁不代表容易学),都去自学Python编程语言,然后寻思出去找一份好的工作,其中学生居多.所以这套面试题我随机例举了几个罢了,文末有提示. 一般面试官见到初入社会的学生,他不会问你多少年的开发经验,最多他只会提你是自学还是系统学,熟悉哪些框架?所提的面试题也会相对简单,然而薪资方面也会大幅度降低,这是人之常情. 大型企业的面试题总会出一些新花样,来表示它们的与众不同之处.似是而非,感觉很容易,实际上你确实答不出来!这就是他们想要的效果,他

剑指Offer名企面试官精讲典型编程题pdf

下载地址:网盘下载 <剑指Offer:名企面试官精讲典型编程题(第2版)>剖析了80个典型的编程面试题,系统整理基础知识.代码质量.解题思路.优化效率和综合能力这5个面试要点.<剑指Offer:名企面试官精讲典型编程题(第2版)>共分7章,主要包括面试的流程,讨论面试每一环节需要注意的问题:面试需要的基础知识,从编程语言.数据结构及算法三方面总结程序员面试知识点:高质量的代码,讨论影响代码质量的3个要素(规范性.完整性和鲁棒性),强调高质量代码除完成基本功能外,还能考虑特殊情况并对