缩短白屏,增强交互体验,钉钉小程序快照技术这样做
2023-10-13 09:02:22
从白屏到快照,小程序交互技术变革
小程序快照技术既可以彻底消除小程序白屏现象,同时也能响应用户交互,交互体验更上一层楼。
其实,对于用户来说,小程序在打开的过程当中肯定会经历一段加载的时间,而白屏往往就在这段时间当中产生。加载时间越短,白屏就越短,用户体验也就越好。 钉钉提出的快照技术本质上也是在解决小程序打开过程中出现的这一系列问题。不同之处在于,钉钉快照技术不再做过多无用的努力,而是把小程序首次渲染的静态页面进行快照,存为一个静态文件,在用户打开小程序的时候,这个快照就先进行展示,这样就可以消除白屏现象。而为了进一步让用户交互进行的更加顺畅,钉钉把快照技术升级,能够响应用户操作进行实时渲染。也正是因为如此,钉钉的小程序快照技术才能做到既消除白屏现象,同时响应用户交互,既快又稳妥。
快照技术架构图解
钉钉快照技术的本质,是基于一个快照文件,并将快照文件单独存储起来,这个快照文件,其实就是一次完整的 UI 渲染的快照,包括页面所有控件的渲染结果、位置、状态等。当用户启动小程序时,钉钉会先加载快照文件,快照文件被加载的速度是非常快的,所以白屏问题就彻底解决了。当用户在快照页面进行操作时,系统会将快照文件交还给小程序框架,小程序框架在接收到快照文件之后会直接复用快照文件中的数据,来完成后续渲染,用户就感知不到任何卡顿现象。
快照技术架构建立在对小程序界面的精准理解之上。开发团队通过分析小程序的页面结构和渲染流程,构建了完善的页面快照信息,再基于这些快照信息对小程序的界面渲染进行完整,将它储存起来,并在用户启动小程序时,从这个快照文件中读入数据,使用这些数据来完成后续渲染,小程序用户在打开小程序时,可以快速看到界面的静态快照,而且在加载快照时,小程序框架已经在后台开始真正的渲染了。整个过程当中,对于用户来说完全没有卡顿现象。
钉钉快照技术应用场景
钉钉小程序快照技术广泛应用于各个场景,比如:
- 复杂页面场景 :钉钉小程序快照技术可以帮助复杂页面场景快速加载,减少用户等待时间,提升用户体验。
- 网络环境不佳场景 :钉钉小程序快照技术可以帮助网络环境不佳的场景快速加载,减少用户等待时间,提升用户体验。
- 冷启动场景 :钉钉小程序快照技术可以帮助冷启动场景快速加载,减少用户等待时间,提升用户体验。
- 跨平台小程序场景 :钉钉小程序快照技术可以帮助跨平台小程序场景快速加载,减少用户等待时间,提升用户体验。
总之,钉钉小程序快照技术能够很好地解决小程序打开过程中白屏的问题,并且可以支持用户交互。该技术的应用场景非常广泛,能够为用户带来更好的体验。