从 “卡顿” 到 “秒开”：外投首屏性能优化的 6 个实战锦囊｜得物技术

主要观点总结

本文介绍了得物技术在页面性能优化方面的实践，包括流渲染技术架构升级、ISR、动态加载非首屏组件、关键大图预加载、Lottie动画和针对低端设备的降级策略等。

关键观点总结

关键观点1: 流渲染技术架构升级

通过流渲染技术，将页面拆解为多个可独立渲染的“片段”，服务端逐段生成HTML并流式传输给客户端，提升页面首屏的渲染速度和用户体验。

关键观点2: ISR（初始静态渲染）策略

针对外投页面，使用ISR策略，在初次构建时预生成静态页面，并在用户请求时根据需要进行再生，保证页面快速响应的同时，能够更新内容。

关键观点3: 动态加载非首屏组件

通过组件的封装和抽取，区分首屏组件和非首屏组件，延迟加载非首屏组件，减少首屏的bundle大小，提高首屏加载速度。

关键观点4: 关键大图预加载

使用preload标签提前加载关键大图，减少用户等待时间，提升首屏的加载效率。

关键观点5: Lottie动画优化

将apng动画升级为lottie动画，通过优化动画资源体积和加载方式，减少动画对页面加载的影响。

关键观点6: 低端设备和弱网优化

针对低端机和弱网环境，制定降级策略，如跳过动画展示、使用静态图替代等，确保所有用户都能收获良好的使用体验。