KIKI37
获得徽章 9
- #青训营笔记创作活动#
2月14日 day14
2.14阅读
CSS监听事件
hover 延时触发
鼠标离开取消定时器
添加监听
长按触发事件
思路同上类似
轮播和暂停
css动画设置次数为无限，且通过hover暂停和播放，在加以监听展开评论点赞 - #青训营笔记创作活动#
2月9日 day13
2.9日阅读
前端活体人脸检测
流程：
引入人脸特征点检测模型，预测 3D 人脸特征点，推断出人脸的近似面部几何图形。
对人脸进行特征提取
1）人脸远近
通过人脸占据画面的比例同视频第一帧与最后一帧的差值进行判断
2）张嘴
通过嘴部比例同视频第一帧与最后一帧的差值进行判断
3）眨眼
固定左右眼的距离，计算帧数之间的差值
4）左右摇头
计算左右脸相差距离判断左右转头展开评论点赞 - #青训营笔记创作活动#
2月7日 day12
2.7日 阅读
用fabric.js开发图片编辑器
关键：
把fabric的实例对象共享给各个功能组件，区分出不同状态，然后将事件暴露给各个功能组件，根据状态进行独立的功能开发
具体思路
入口文件中初始化实例，然后与mixins结合，在mixins中定义各种属性，以及事件状态，子组件通过引入mixins来开发对应功能
展开评论点赞 - #青训营笔记创作活动#
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月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中下载压缩好的图片；
写入：用下载的图片覆盖本地图片；
展开评论点赞 - #青训营笔记创作活动#
1月31日 day7
1.31阅读
Esbuild
是什么：基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上快 10~100 倍
优势：
1、Golang开发，利用多线程打包，线程之间共享内容
直接编译成机器码，节省程序运行时间
2、多核并行，充分利用CPU内核
3、保证极致代码性能
4、高效利用内存展开评论点赞 - #青训营笔记创作活动#
1月30日 day6
1.30阅读
WebRTC
应用场景广泛，可玩性极高
WebRTC只能在HTTPS协议或者localhost下使用，
媒体流
摄像头获取媒体流，将媒体流赋值给 video 标签，绘制到canvas上，转换为base64图片
切换摄像头
获取所有设备，筛选videoinput类型，通过不同id切换摄像头；前后摄像头切换——facingMode
屏幕共享获取媒体流——getDisplayMedia
屏幕录制——MediaRecorder
（用分享屏幕的方式录制）
判断浏览器是否支持需要的mimeType
虚拟背景
通过 canvas 将视频中的每一帧画到画布上，将画布中的像素逐个与设定的背景色计算，比较后的差值达到设定的阈值时，将其更换为预先准备好的背景图的图像数据，将处理后的图像数据画到虚拟背景画布上，通过虚拟背景画布拿到媒体流后给到 video 标签播放展开评论点赞 - #青训营笔记创作活动#
1月20日 day5
1.20阅读
抓包
定义：抓包即将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作
数据以帧为单位传输，在传输和接受过程中，可以使用抓包工具进行抓包，通常位置为抓取应用层 HTTP/HTTPS的包
抓包原理
HTTP：中间人进程进行数据转发
HTTPS：由于插入了安全层，中间人需要在HTTPS加密前才能抓包成功，伪装服务端与客户端进行拦截转发
电脑截获手机数据：同样使用中间人策略，伪装web应用的目标服务器
工具：whistle展开评论点赞