一个前端非侵入式骨架屏自动生成方案

发布网友发布时间：2024-10-24 12:14

共1个回答

热心网友时间：2024-11-17 06:15

性能优化、减少页面加载时间、提升用户体验是前端领域永恒话题。面对前后端分离与异步渲染的普遍应用，页面在用户访问时不可避免出现短暂白屏。目前的解决方案多样，服务端同步渲染效果最佳，但成本高，需大量投入服务器部署与运维；页面loading通用性强，成本低，但信息传递量少；首屏骨架屏能预先提供大量信息，聚焦用户关注点，过渡自然，但成本稍高。

综合分析，骨架屏是解决白屏问题的优质方案。现有骨架屏方案大致分为三种：侵入业务式手写代码、非侵入业务式手写代码以及非侵入式骨架屏代码自动生成。侵入式方案对业务代码有较大侵入性，后续维护成本略高；非侵入式方案使骨架屏代码与业务代码解耦，维护成本降低，但有配置成本；自动生成方案无需手写骨架屏代码，使用成本低。

考虑现有方案优劣，我们选择非侵入式骨架屏自动生成方案。基于饿了么骨架屏方案设计思路，结合优化思路，设计出一种新方案。设计原则包括：高效、灵活、美观、兼容性好。方案分为骨架屏生成和注入项目源码两个环节，骨架屏生成阶段产出base64图片或HTML+样式代码，base64图片注入为背景图，HTML源码则根据需求选择。

优化点包括：利用Puppeteer进行页面操作，设置waitUntil参数确保页面充分加载；文本块处理采用linear-gradient背景；图片块处理将img标签src设为1x1px灰色base64图片；a标签href设为javascript:void(0)防止误点；自定义属性设置调整骨架屏美观；首屏HTML与样式处理移除非首屏节点。

生成的骨架屏在实际业务中展现出优化加载时间、提升用户体验的效果。通过代码实现，我们优化了骨架屏生成与注入流程，降低开发成本，提高效率。

参考资料包括：社区现有骨架屏方案、CSS-Tricks教程、SegmentFault文章等，这些资源提供了设计与实现骨架屏的理论基础。

业务实践证明，该方案在实际应用中能有效减少白屏现象，提升页面加载体验，具备较高的实用价值。

效果演示与业务实践成果已通过链接提供，详细信息请查看。