自动化生成骨架屏的技术方案设计与落地

发布网友 发布时间：2024-10-23 19:07

我来回答

共1个回答

热心网友 时间：2024-10-23 20:34

在构建高性能前端应用程序时，减少页面加载过程中白屏的时间一直是关注焦点，尤其在前后端分离的项目中。骨架屏（Skeleton）技术能够在此过程中发挥重要作用，通过在页面未加载完整内容前展示页面结构，给用户一种页面已开始渲染的错觉，从而提升用户体验。本文将探讨在拍卖源码工作台BeeMa架构中如何设计并实现自动生成骨架屏的技术方案。

### 骨架屏概览

骨架屏本质上是一种视觉过渡效果，其工作原理是先预加载页面的大致结构和布局元素，待数据加载完成后再替换为实际内容。相比于传统的加载动画（如菊花加载），骨架屏能更自然地引导用户注意到页面的进展，降低等待过程中的焦虑感。

### 技术调研与方案选择

现有实现骨架屏的技术方案大致可以分为三类，其中自动生成骨架屏方案具有较高的维护性和较低的配置成本。市面上流行的饿了么开源的webpack插件“page-skeleton-webpack-plugin”通过生成特定路由页面的骨架屏实现这一功能。这种方式将骨架屏代码与业务代码分离，由webpack注入到项目中，确保了代码的性和易管理性。然而，其依赖于webpack配置以及html-webpack-plugin，对于某些团队可能是一层额外的负担。

### 技术方案设计

基于前述分析，我们决定采用最低侵入业务代码且降低配置成本的骨架屏自动生成方案。结合BeeMa架构特点与vscode插件特性，设计了一套新方案。方案核心思路如下：

1. **设计原则与架构整合**：明确骨架屏需要遵循的原则，确保与BeeMa架构和vscode插件的协同作用。
2. **技术方案与流程**：基于现有的技术调研结果，详细规划从骨架屏生成、配置到注入的具体流程。
3. **关键技术和实现**：涉及到的关键技术，如Puppeteer、webView通信、配置校验与处理，以及通用处理逻辑。
4. **实施步骤与优化**：从安装部署到基本使用，包括配置需注意的细节，以及生成代码优化建议。
### 使用与优化

实施方案时，需全局安装Puppeteer来确保正确的路径查找与处理，以优化构建效率与资源占用。此外，引入优化措施，如调整骨架屏高度、标记特定元素以避免不必要的渲染，来进一步提升性能与用户体验。

### 结果演示与效果评价

通过该技术方案的实践，我们能够展示生成的代码大小与具体应用场景的表现，包括普通效果、带有通用头和渐变背景色的效果、复杂元素页面的表现，以及在不同网络条件下的差异。优化策略在提高性能同时，保证了良好的用户体验。