全面理解 requestAnimationFrame
一、requestAnimationFrame 的定义 官方的定义： <img width="756" height="422" src="../../ resources/c042ff4f7df14417a574db8dd80c0439 2908d126072f492cb.webp" class="jop noMdConv" 即请求动画帧，它是一个浏览器的宏任务。简单的说，这个api主要是用来做动画的。 二、关于前端动画的两个问题 1...
响应式和自适应的区别
<img width="756" height="431" src="../../ resources/17181d7145f042db83cc5da1806d2100 f314cbfd248b49ef9.webp" class="jop noMdConv" 响应式设计（Responsive design） 就是一个网站能够兼容多个终端一而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的。 自适应设计（Adapti...
实现响应式布局的五种方式
一、定义 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。 优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点 仅适用布局、信息、框架并不复杂的部门类型网站 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的...
计算机网络七层模型和各自的作用
物理层 （Physical Layer）：负责传输比特流，即物理数据传输。它定义了物理介质、电压、电缆规范等。主要功能是将比特流转化为物理信号，以便在网络中传输。 数据链路层 （Data Link Layer）：提供了可靠的点对点数据传输，通过物理地址（MAC地址）标识网络设备。它将原始的比特流分割成数据帧，并进行差错检测和纠正，确保数据的可靠传输。 网络层 （Network Layer）：负责在不同的网络间进行路由选择和逻辑寻址。它使...
重排重绘与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 之后，某些变量不会被重复申明，比...