页面首屏渲染的优化,目的是让「首页渲染完成」(Page.onReady
) 尽可能提前。但很多情况下「首页渲染完成」可能还是空白页面,因此更重要的是让用户能够更早的看到页面内容(First Paint 或 First Contentful Paint)。
骨架屏通常用于在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。
建议开发者在页面数据未准备好时(例如需要通过网络获取),尽量避免展示空白页面,而是先通过骨架屏展示页面的大致结构,请求数据返回后再进行页面更新。以提升用户的等待意愿。
开发者工具提供了生成骨架屏的能力,帮助开发者更便捷的维护骨架屏。