[发明专利]骨架屏的渲染方法、装置、设备及存储介质

说明书

本发明涉及计算机网络技术领域，公开了一种骨架屏的渲染方法、装置、设备及存储介质，用于减少白屏显示时间，提升页面切换的响应效率。骨架屏的渲染方法包括：获取目标终端的页面加载请求，其中，目标终端的页面加载请求为网络加载请求；根据目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏，并在目标项目入口中对初始骨架屏进行渲染，得到首屏骨架屏；通过哈希路由对首屏骨架屏进行路由转场渲染，得到目标骨架屏；将目标骨架屏传输至目标终端进行显示。此外，本发明还涉及区块链技术，预置的骨架屏可存储于区块链中。

技术领域

本发明涉及计算机网络技术领域，尤其涉及一种骨架屏的渲染方法、装置、设备及存储介质。

背景技术

随着计算机网络的发展，人们越依赖于网络获取信息和服务，可以通过网络浏览文字信息、查看图片、播放影音等。上述这些信息和服务都是通过页面形式呈现给用户的。当用户过浏览器等客户端向服务器发起统一资源定位符(uniform resource locator，URL)请求时，对应的服务器会根据URL请求，将相应的信息数据呈现出来，由于从网络上获取目标信息数据，所以页面完全加载目标信息数据之前会出现一定的延迟时间。

本申请发明人在研究中发现，现有的技术中，很多前端开发方采用骨架屏来填补这段空白时间，目前骨架屏的加载方式主要是利用页面模板添加首页骨架对骨架屏进行渲染，这种加载方式只能在第一次进入系统时有骨架屏的效果。

发明内容

本发明的主要目的在于解决加载目标页面前只能在第一次进入系统时有骨架屏的效果的问题。

本发明第一方面提供了一种骨架屏的渲染方法，包括：获取目标终端的页面加载请求，其中，所述目标终端的页面加载请求为网络加载请求；根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏，并在目标项目入口中对所述初始骨架屏进行渲染，得到首屏骨架屏；通过哈希路由对首屏骨架屏进行路由转场渲染，得到目标骨架屏；将所述目标骨架屏传输至目标终端进行显示。

可选的，在本发明第一方面的第一种实现方式中，所述根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏，并在目标项目入口中对所述初始骨架屏进行渲染，得到首屏骨架屏包括：根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏；判断所述初始骨架屏是否与目标终端的页面相匹配；若所述初始骨架屏与所述目标终端的页面相匹配，则在目标项目入口中通过预置的内联标签将所述初始骨架屏嵌入至所述目标项目入口对应的项目入口文件中进行渲染，得到首屏骨架屏。

可选的，在本发明第一方面的第二种实现方式中，所述判断所述初始骨架屏是否与目标终端的页面相匹配包括：从所述初始骨架屏中读取初始骨架屏路由路径，并从目标终端的页面读取目标终端的页面路由路径；判断所述目标终端的页面路由路径是否与所述初始骨架屏路由路径匹配；若所述目标终端的页面路由路径与所述初始骨架屏路由路径匹配，则判定所述初始骨架屏与目标终端的页面相匹配。

可选的，在本发明第一方面的第三种实现方式中，所述若所述初始骨架屏与所述目标终端的页面相匹配，则在目标项目入口中通过预置的内联标签将所述初始骨架屏嵌入至所述目标项目入口对应的项目入口文件中进行渲染，得到首屏骨架屏包括：若所述初始骨架屏与所述目标终端的页面相匹配，则在所述目标项目入口对应的项目入口文件中挂载预置的内联标签，得到初始项目内联标签；将所述初始骨架屏路由路径写入所述初始项目内联标签中，得到第一目标项目内联标签；对所述第一目标项目内联标签添加层叠样式表和显示尺寸，得到首屏骨架屏，其中，所述显示尺寸与所述目标终端的显示尺寸相同。

可选的，在本发明第一方面的第四种实现方式中，所述通过哈希路由对首屏骨架屏进行路由转场渲染，得到目标骨架屏包括：通过预置的监听函数监听哈希路由的哈希值；当通过所述监听函数监听到哈希值发生变化时，基于预置的导航钩子和所述哈希路由对所述首屏骨架屏进行渲染，得到目标骨架屏。