随笔

2023-10-15

工作 or 其他地方看见的一些东西的随笔记录。

XXXX.XX.XX

React Context Rerender：https://zhuanlan.zhihu.com/p/50336226
性能优化：https://blog.csdn.net/A__men/article/details/129146018
IM：

https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/115222230

https://segmentfault.com/q/1010000006077801
Qwik：https://www.zhihu.com/question/467071621
protobuf：https://zhuanlan.zhihu.com/p/406832315
vercel：https://zhuanlan.zhihu.com/p/452654619
跨平台开发：

https://zhuanlan.zhihu.com/p/488684290

https://zhuanlan.zhihu.com/p/345756410

https://blog.atulr.com/react-custom-renderer-2/
JSBridge：https://juejin.cn/post/7036988966356123662
微前端：https://juejin.cn/post/7090352489223946271
微信沙箱测试环境：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

2023.10.15

图片压缩网站：https://tinypng.com

压缩质量一般75~85即可，过高的压缩质量有时会导致压缩后的图片大小变大
border-image属性：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image

用于给容器加一些花里胡哨的边框，在容器拉伸时，用作border-image的图片四边会拉伸，四角则保持原样。未使用过，暂不确定与直接设置background-image的区别和优缺点。
Element.scrollIntoView：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

与window.scrollTo类似，但scrollIntoView是直接操作当前元素，不用关心滚动元素是哪一个。
PAG动画：https://pag.art/

web端的libpag-lite因为播放动画时会使用videoReader，因此会受浏览器自动播放的限制（仅测试过webgl模式，2d模式未尝试）。libpag代码中pag-player也使用了videoReader，未测试是否会受限制。对于兼容性要求比较大的项目可能还是lottie更好，但同一动画导出pag文件会比lottie的json文件更小。
前端本地录音

WebRTC：

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

https://juejin.cn/post/6844903953381982222

https://juejin.cn/post/7073725449162981384

MediaRecorder：

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder

https://ksflynn007.github.io/AudioRecorder
CSS Module的hash值会因为文件路径而改变，有时通过document.querySeletor(styles.xxx)获取DOM元素时，可能会出现因hash值中特殊符号无法作为seletor而报错的情况，可以尝试调整文件路径
html2canvas：

这个库会使用iframe将页面拷贝一遍，在某些场景下iframe可能被防劫持策略移除，导致无法正常生成图片。

2023.10.28

iScroll自定义滚动库：https://juejin.cn/post/6844903847941390349
QPS (Queries Per Second)，每秒查询率，接口指标，如果一些页面的PV过高，可能导致查询接口QPS过高
canvaskit：https://juejin.cn/post/7287781316590583863
网易云Tango低代码，基于AST实现：https://juejin.cn/post/7287134477838876707

传统低代码一般以私有协议实现，但私有协议不可避免的会因需求增加而不断膨胀
white-space: nowrap与flex布局的神奇反应：https://juejin.cn/post/7288962917395464232
lottie-web：https://zhuanlan.zhihu.com/p/103666502
React.Suspense是什么：https://juejin.cn/post/6893443109749784584

2023.11.25

Aria无障碍属性：https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA

常用场景为：button、checkbox等原生样式修改起来较为麻烦，使用div等其他标签实现对应功能时，此时无障碍无法正常识别对应元素的功能，可以通过添加role属性显式声明此元素的功能，此时无障碍（如IOS旁白功能）即可正常识别，朗读”xxx按钮“、”xxx复选框“
对于Input的type=“file”，其onChange事件是在文件改变时触发，如果用户取消文件选择、或选择的文件与原来相同，此时无法正常触发onChange事件，因此如果需要选中文件后触发上传loading，需要在onChange事件中触发，而不是onClick事件，否则会导致无法正常关闭loading
对于前端开发来说，假如我们把一个项目当成应用来开发，此时可以存在B页面前置依赖A页面的数据，即只能通过A页面进入B页面，直接刷新B页面无法正常显示；如果我们把项目中的页面仅仅是当成页面，那么就不能出现刷新后无法正常显示的情况，所有页面的前置依赖数据必须能够在此页面中加载（可以前置加载，但是进入页面的时候需要判断前置是否已加载，没有前置数据时必须在此页面请求）
web端无网络判断较为可信的api：window.navigator.connection，window.navigator.onLine，以及window.addEventListener("online", () => {})
Promise的finally函数在某些低版本内核上未实现，尽量避免使用或使用时添加polyfill

2023.12.09

pngyu：https://nukesaq88.github.io/Pngyu/

图片批量压缩工具，压缩完成之后可以直接覆写到原位置，可以用于压缩打包后的静态图片。
贝塞尔曲线调试：https://cubic-bezier.com/
木限东/CocosCreatorShader：https://gitee.com/yeshao2069/cocos-creator-shader
响应头：Content-Disposition: attachment;filename="xxx.ext"可用于自定义下载文件的文件名。

2024.05.12

点九图：https://zhuanlan.zhihu.com/p/97138527?utm_id=0#什么是点九图
Audio音频播放总结：https://zhuanlan.zhihu.com/p/74566301
判断当前视窗方向：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/orientation
webpack动态加载解析：https://juejin.cn/post/7146501801649373197
linear-gradient线性渐变兼容：http://www.mrszhao.com/post/194.html
JSBridge相关开源仓库：

https://github.com/lzyzsd/JsBridge
https://github.com/wendux/DSBridge-Android
https://github.com/hcanyz/ZJsBridge-ZJs