重排重绘与GPU加速_transform是否会调用gpu
重排重绘 我们知道在浏览器渲染过程中存在重排和重绘过程 重排 当出现以下行为时，会引起重排。 添加或删除DOM元素 元素的位置发生变化 元素的尺寸发生变化 浏览器的窗口尺寸变化 重绘 对 DOM 操作简单修改样式（比如修改元素的 visibility、color、background color 等）时会引起重绘 重排一定会引起重绘！ 相比较来看，重拍的花销是比重绘要大得多的。所以我们在优化性能的时候会尽量减少dom操作来减少重排。 （...
animation、transition、transform、translate
容易混淆的几个css属性 css属性很多，并且有些无论是字母的拼写还是字面上的意思，都容易混淆，比如我列出来的几个属性，是不是也混淆过你～ | 属性 | 含义 | | | | | animation（动画） | 用于设置动画属性，他是一个简写的属性，包含6个属性 | | transition（过渡） | 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 | | transform（变形） | 用于元素进行...
px 与像素是如何换算的
px 是所有开发者接触 css 时所了解的第一个单位，也是开发过程中最常见的单位。 如果你还不清楚 px、逻辑像素、物理像素之间是怎样换算的，本文将从头到尾帮你梳理一遍 像素 ，为影像显示的基本单位，译自英文“ pixel ”， pix 是英语单词picture的常用简写，加上英语单词“元素” el ement，就得到 pixel ，故“像素”表示“画像元素”之意，有时亦被称为 pel （ p icture el ement）。每个这样...
css-loader和style-loader关系原理及作用
用webpack打包就需要用到css loader和style loader，接下来让我们逐步解析两个loader的作用以及它们都做了怎样的工作 创建空项目 创建一个名为demo的空文件夹，这就是我们实验的项目目录 进入到目录下执行 按照上述两步，我们就搭建好了最简单的项目环境了，接下来需要安装依赖包和创建源码目录 在项目目录创建 子目录 基于webpack4讲解，运行npm安装所需依赖 创建 创建一个 样式文件 创建 程序入口文件 运...
useState和useRef的区别
的坑： 修改state后，如果直接调用此state，会发现state的值未发生改变。 当调用setState时，react是 异步更新state 的，如果setState后立即获取state的值，此时state尚未更新，因此为旧的状态。 总共有两种用法： 1、获取子组件的实例 2、在函数组件中的一个 全局变量 ，不会因为重复 重复申明， 类似于类组件的 有些情况下，我们需要保证函数组件每次 render 之后，某些变量不会被重复申明，比...
CSS之Display、Visibility和Opactity的区别
1\. display：none； DOM结构：浏览器不会渲染display属性为none的元素，不占据空间，意思就是页面上没有它的一席之地，你在开发者模式中选不中那个元素。 事件监听：无法进行DOM事件监听。点击事件无法触发，但是可以通过ref获取节点触发点击事件 性能：动态改变此属性时会引起重排，性能较差。 继承：不会被子元素继承，因为子元素也不被渲染。 transtion过渡不支持display。 2\. visibility：h...
es6箭头函数
1\. 相比普通函数，箭头函数有更加简洁的语法。 普通函数 箭头函数 2\. 箭头函数不绑定this，会捕获其所在上下文的this，作为自己的this。 这句话需要注意的是，箭头函数的外层如果有普通函数，那么箭头函数的this就是这个外层的普通函数的this，箭头函数的外层如果没有普通函数，那么箭头函数的this就是全局变量。 下面这个例子是箭头函数的外层有普通函数。 下面这个例子是箭头函数的外层没有普通函数。 3\. 箭头函数是匿名函...
scss八大特性
前言 众所周知css并不能算是一门真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言 就应运而生了。 sass是最早的css预处理语言，有比less更为...
CSS3新增了哪些新特性？
二、选择器 中新增了一些选择器，主要为如下图所示： <img width="740" height="445" src="../../ resources/e368cf20 9b5e 11eb 85f6 6fac77c0 d0230dc57a934e12b.png" class="jop noMdConv" 三、新样式 边框 新增了三个边框属性，分别是： border radius：创建圆角边框 box shadow：为元素添加阴影 b...