几个有益的 CSS 小知识
样式的顺序
CSS 代码:
HTML 代码:
记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上)
答案你们应该是知道的。
可以这样提升 CSS 性能
后代选择器
样式选择器中间的空格是什么?它的名字是 —— 后代选择器。
为什么会更消耗性能呢?
因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签。这样一来如果代码中有很多p标签,无疑是会做很多重复工作的。
所以可以减少使用 HTML 标签来定义 CSS 的方式,换成使用具体的class。
浏览器会从右到左解析 CSS 选择器:
浏览器会对上面的例子做如下的步骤处理:
首先找到页面所有的<a>元素
然后向上找到被<p>元素包裹的<a>元素
再向上查找到一直到.content_box的元素
从上面的步骤我们可以看出,越靠右的选择器越具有唯一性,浏览器解析 CSS 属性的效率就越高。
所以一定换成使用具体的class编写 CSS 代码。
自己整理了一套2019最新前端开发资料,需要加qun【四八四。七五七。七六零】
避免 reflow 风险
我们知道修改某些 CSS 属性会导致整个页面布局的重绘( repaint )/重排( reflow )。
repaint 的速度远快于 reflow,所以避免 reflow 更重要
导致 repaint 和 reflow 的原因
1.DOM 元素的添加、修改、删除(repaint、reflow)
2.仅仅修改 DOM 元素的字体颜色(repaint,不需要调整布局)
3.应用新的样式或者修改任何影响元素外观的属性(repaint、reflow)
4.resize,页面滚动(repaint、reflow)
读取元素的某些属性(offsetTop/Left/Width/Height、getComputedStyle、scrollTop/Left/Width/Height、clientTop/Left/Width/Height等)(repaint、reflow)
如果在大量的元素上更改这些属性,那么计算和更新他们的位置/大小需要花费很长的时间。
更加消耗性能的 CSS 属性
有一些 CSS 属性会比其他属性消耗能多的性能,即浏览器解析这些属性需要花费更多的时间。
如:border-radius、box-shadow、filter、:nth-child等
当然这些属性我们经常使用,有些无法避免。要做出适当的取舍。
希望这几个 CSS 小知识可以对你有所帮助,然后点个赞在走呗。
几个有益的 CSS 小知识的更多相关文章
- 【前端词典】几个有益的 CSS 小知识
今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...
- 12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...
- 一些常被你忽略的CSS小知识
1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经 验的程序员,我相信你未必知道color属性除了能用在文本显示,还可 ...
- HTML、CSS小知识--兼容IE的下拉选择框select
HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...
- 你未必知道的css小知识
1:当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bot ...
- css 小知识
<!-- IE下消除点击图片文字后出现的虚线框代码 --> <style type="text/css">a {blr:expression(this.on ...
- css小知识
7. span { display:inline-block; width:70px; /* 超出长度以...显示 */ text-overflow: ellipsis; white-space: n ...
- css小知识 2
效果为 为什么还出现出现不同的效果? 浏览器在解析第二个p的时候,因为第二个字母见没有空格,它会认为这是一个单词没有写完,所以不会换行 列表 1.无序列表ul 第二,内部必须有子代标签<li&g ...
- CSS小知识---table表格
所用的仍是bootstrap的模板 <link rel="stylesheet" href="css/bootstrap.min.css"> < ...
随机推荐
- vue+elementui搭建后台管理界面(3侧边栏菜单)
上一节搭好了主框架,但是标签页和侧边栏只是分别展示了各自的菜单,如何将二者联动起来? 定义路由规则:当有 children 属性时,从 children 里取出 path 填充到侧边栏,如: { pa ...
- JavaWeb三大组件(Servlet、Filter、Listener)
JavaWeb三大组件指的是:Servlet.Filter.Listener,这三个组件在JavaWeb开发中分别提供不同的功能,然而很多人可能只用过其中一个或者两个(Servlet.Filter,比 ...
- Flutter -------- 解析JSON数据
SON序列化方法: 手动序列化和反序列化通过代码生成自动序列化和反序列化 手动JSON序列化是指使使用dart:convert中内置的JSON解码器.它将原始JSON字符串传递给JSON.decode ...
- docker 安装redis 并配置外网可以访问
1, docker 拉去最新版本的redis docker pull redis #后面可以带上tag号, 默认拉取最新版本 2, docker安装redis container 安装之前去定义我们的 ...
- CentOS上安装GlassFish4.0
1. 安装jdk 2. 下载并安装glassfish4 [root@linuxidc ~]# mv glassfish-4.0-ml.zip /usr/share/glassfish-4.0-ml. ...
- flutter DropdownButton使用
import 'package:flutter/material.dart'; class MyStatefulWidget extends StatefulWidget { MyStatefulWi ...
- IDEA Git 修改后的文件无法Commit
转自:https://blog.csdn.net/moneyshi/article/details/81298861 因对IDEA使用不熟,在使用和配置GIT的时候,可能哪里配置错误,导致我一直无法使 ...
- ES6深入浅出-11 ES6新增的API(上)-1.Object.assign
这些都是es6才有的 Object.assign 在a加上三个属性 分别是p1\p2\p3 以前是这么去加 b的三个属性p1.p2.p3就全部复制到a这个对象上了. 把后面的东西放到前面的东西上 两个 ...
- Linux记录-shell自动化批量部署sql脚本并记录日志信息(转载)
#!/bin/bash #script_version=v110 db_host=127.0.0.1 db_port=3306 db_username=db_test_inst db_passwd=` ...
- java.net.NoRouteToHostException: Cannot assign requested address 问题分析(端口被用完的解决方法)
问题: 错误原因: 由于liunx 分配的客户端连接端口用尽,无法建立socket连接所致,虽然socket正常关闭,但是端口不是立即释放,而是处于 TIME_WAIT 状态,默认等待60s后释放.查 ...