KIKI37
获得徽章 9
#青训营笔记创作活动#
2月14日 day14
2.14阅读
CSS监听事件
hover 延时触发
鼠标离开取消定时器
添加监听
长按触发事件
思路同上类似
轮播和暂停
css动画设置次数为无限，且通过hover暂停和播放，在加以监听
2月14日 day14
2.14阅读
CSS监听事件
hover 延时触发
鼠标离开取消定时器
添加监听
长按触发事件
思路同上类似
轮播和暂停
css动画设置次数为无限，且通过hover暂停和播放，在加以监听
展开
评论
点赞
#青训营笔记创作活动#
2月9日 day13
2.9日阅读
前端活体人脸检测
流程：
引入人脸特征点检测模型，预测 3D 人脸特征点，推断出人脸的近似面部几何图形。
对人脸进行特征提取
1）人脸远近
通过人脸占据画面的比例同视频第一帧与最后一帧的差值进行判断
2）张嘴
通过嘴部比例同视频第一帧与最后一帧的差值进行判断
3）眨眼
固定左右眼的距离，计算帧数之间的差值
4）左右摇头
计算左右脸相差距离判断左右转头
2月9日 day13
2.9日阅读
前端活体人脸检测
流程：
引入人脸特征点检测模型，预测 3D 人脸特征点，推断出人脸的近似面部几何图形。
对人脸进行特征提取
1）人脸远近
通过人脸占据画面的比例同视频第一帧与最后一帧的差值进行判断
2）张嘴
通过嘴部比例同视频第一帧与最后一帧的差值进行判断
3）眨眼
固定左右眼的距离，计算帧数之间的差值
4）左右摇头
计算左右脸相差距离判断左右转头
展开
评论
点赞
#青训营笔记创作活动#
2月7日 day12
2.7日 阅读
用fabric.js开发图片编辑器
关键：
把fabric的实例对象共享给各个功能组件，区分出不同状态，然后将事件暴露给各个功能组件，根据状态进行独立的功能开发
具体思路
入口文件中初始化实例，然后与mixins结合，在mixins中定义各种属性，以及事件状态，子组件通过引入mixins来开发对应功能
2月7日 day12
2.7日 阅读
用fabric.js开发图片编辑器
关键：
把fabric的实例对象共享给各个功能组件，区分出不同状态，然后将事件暴露给各个功能组件，根据状态进行独立的功能开发
具体思路
入口文件中初始化实例，然后与mixins结合，在mixins中定义各种属性，以及事件状态，子组件通过引入mixins来开发对应功能
展开
评论
点赞
#青训营笔记创作活动#
2月6日 day11
2.6 阅读
CSS实现函数节流优化
函数节流：一种常见的优化方式，可以有效的避免函数过于频繁的执行
CSS方向即从禁用到可点击的变化
禁用点击事件：pointer-events
时间+状态恢复： animation
点击行为触发： ：active
2月6日 day11
2.6 阅读
CSS实现函数节流优化
函数节流：一种常见的优化方式，可以有效的避免函数过于频繁的执行
CSS方向即从禁用到可点击的变化
禁用点击事件：pointer-events
时间+状态恢复： animation
点击行为触发： ：active
展开
评论
点赞
#青训营笔记创作活动#
2月5日 day10
2.5阅读
Vite项目屏幕适配的两种方案
1、rem
定义：rem是指相对于根元素的字体大小的单位
使用场景：不固定宽高比的Web应用，适用于绝大部分业务场景
2、scale
使用场景：固定宽高比的Web应用，如大屏或者固定窗口业务应用
2月5日 day10
2.5阅读
Vite项目屏幕适配的两种方案
1、rem
定义：rem是指相对于根元素的字体大小的单位
使用场景：不固定宽高比的Web应用，适用于绝大部分业务场景
2、scale
使用场景：固定宽高比的Web应用，如大屏或者固定窗口业务应用
展开
评论
点赞
#青训营笔记创作活动#
2月4日 day9
2.4日阅读
CSS技术
1、position: sticky —— 吸顶需求
注意兼容性
2、:empty 选择器 —— 通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示
（开发数据通过请求接口获取的，存在接口没有数据的情况，一般判断返回数据是否为0
3、gap —— 适用于 Grid 布局、Flex 布局以及多列布局
用于做边距
4、background-clip: text —— 做一个带背景的文字效果
5、user-select —— 禁用光标选中网页上的字
6、:invalid 伪类 —— 不用 JS 表示任意内容是否通过验证的 input 或其他 form 元素
7、:focus-within 伪类 —— 表示一个元素获得焦点，或该元素的后代元素获得焦点并与之匹配，可以根据子元素的状态来改变父元素的样式
8、mix-blend-mode:difference —— 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，其中difference 表示差值
2月4日 day9
2.4日阅读
CSS技术
1、position: sticky —— 吸顶需求
注意兼容性
2、:empty 选择器 —— 通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示
（开发数据通过请求接口获取的，存在接口没有数据的情况，一般判断返回数据是否为0
3、gap —— 适用于 Grid 布局、Flex 布局以及多列布局
用于做边距
4、background-clip: text —— 做一个带背景的文字效果
5、user-select —— 禁用光标选中网页上的字
6、:invalid 伪类 —— 不用 JS 表示任意内容是否通过验证的 input 或其他 form 元素
7、:focus-within 伪类 —— 表示一个元素获得焦点，或该元素的后代元素获得焦点并与之匹配，可以根据子元素的状态来改变父元素的样式
8、mix-blend-mode:difference —— 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，其中difference 表示差值
展开
评论
点赞
#青训营笔记创作活动#
2月1日 day8
2.1日阅读
图片压缩
是可优化的一部分
TinyPng
过程
查找：找出所有的图片资源；
分配：均分任务到每个进程；
上传：把原图上传到TinyPng；
下载：从TinyPng中下载压缩好的图片；
写入：用下载的图片覆盖本地图片；
2月1日 day8
2.1日阅读
图片压缩
是可优化的一部分
TinyPng
过程
查找：找出所有的图片资源；
分配：均分任务到每个进程；
上传：把原图上传到TinyPng；
下载：从TinyPng中下载压缩好的图片；
写入：用下载的图片覆盖本地图片；
展开
评论
点赞
#青训营笔记创作活动#
1月31日 day7
1.31阅读
Esbuild
是什么：基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上快 10~100 倍
优势：
1、Golang开发，利用多线程打包，线程之间共享内容
直接编译成机器码，节省程序运行时间
2、多核并行，充分利用CPU内核
3、保证极致代码性能
4、高效利用内存
1月31日 day7
1.31阅读
Esbuild
是什么：基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上快 10~100 倍
优势：
1、Golang开发，利用多线程打包，线程之间共享内容
直接编译成机器码，节省程序运行时间
2、多核并行，充分利用CPU内核
3、保证极致代码性能
4、高效利用内存
展开
评论
点赞