基于 JavaScript 的 Hexo Fluid 主题 banner 随机背景图实现
💡
原文中文，约2200字，阅读约需6分钟。
📝
内容提要
由于随机图片 API 加载慢，作者用 JavaScript 替代，避免外部 API，提升加载速度。虽然 PageSpeed 测试结果变化不大，但减少了网络请求，改善了用户体验。
🎯
关键要点
- 随机图片 API 加载速度慢，导致用户体验不佳。
- Vercel 的冷启动问题使得首次访问时加载时间过长。
- 使用 API 会增加额外的网络请求，导致加载时间延长。
- Vercel 在大陆的访问质量不稳定，使用其搭建 API 不是最佳选择。
- 通过 JavaScript 实现随机背景图，避免了外部 API 的使用。
- 删除原有背景图配置，防止浪费用户流量。
- 通过修改 CSS 属性实现随机背景图的功能。
- 虽然 PageSpeed 测试结果未明显改善，但用户加载体验有所提升。
❓
延伸问答
为什么要用 JavaScript 替代随机图片 API？
因为随机图片 API 加载速度慢，使用 JavaScript 可以避免外部 API，提高加载速度。
Vercel 的冷启动问题是什么？
Vercel 在长时间没有访问后会进入休眠状态，下一次访问时需要经历冷启动，导致加载时间延长。
使用 API 会带来哪些额外的网络请求问题？
使用 API 会导致额外的网络请求，访客需要先请求 API，再请求实际图片，增加了加载时间。
如何通过 JavaScript 实现随机背景图？
可以通过修改 id 为 banner 的 div 的 CSS 属性，使用 JavaScript 随机选择图片作为背景。
删除原有背景图配置的目的是什么？
删除原有背景图配置是为了防止加载默认图片，避免浪费用户流量。
使用 JavaScript 实现随机背景图后，PageSpeed 测试结果有变化吗？
虽然 PageSpeed 测试结果没有明显改善，但用户的加载体验有所提升。
🏷️
标签
➡️
