📺 代码示例效果

这是我做的一些 demo 的合集，线上链接：demo.azhubaby.com

链接失效，请随时提出 issues

📌CSS

• 水平垂直居中
• 左边固定，右边自适应
• 圣杯布局
• 双飞翼布局
• 三角形
• BFC——margin塌陷
• BFC——margin合并
• BFC——自适应布局
• 进度条

📌 自适应方案

• REM 布局(手写 rem)
• REM 布局(flexible)
• VW 布局
• PX + CSS 变量 布局
• 媒体查询布局

📌 懒加载方案

• 监听图片高度实现懒加载
• getBoundingClientRect 实现懒加载
• IntersectionObserver 实现懒加载

📌 懒加载方案

• 渲染十万条数据解决方案-虚拟列表-scroll
• 渲染十万条数据解决方案-虚拟列表-IntersectionObserver
• 渲染十万条数据解决方案-懒加载-scroll
• 渲染十万条数据解决方案-懒加载-getBoundingClientRect
• 渲染十万条数据解决方案-懒加载-IntersectionObserver
• 时间分片-一次性所处渲染问题
• 时间分片-解决方案

React

• setState 是同步还是异步
• 前端路由 hash 实现
• 前端路由 history 实现

性能优化

• 防抖与节流

网络缓存策略

• 强缓存

• 协商缓存

网络缓存因是服务端应用，遂部署至 Vercel，打开如若慢了点，请等待

微信营销页面

• 微信营销页面之 WeixinJSBridge
• 微信营销页面之 自动播放音乐
• 微信营销页面之 网页长按保存及识别二维码

请我喝咖啡 ☕️

如果您觉得这个项目能够帮助到您，可以给我个 star🌟，也可以推荐给您的朋友

持续更新中～ 🚀🚀🚀

License

MIT