骨架屏的渲染方法、装置、设备及存储介质与流程

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

背景技术：

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

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

技术实现要素：

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

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

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

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

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

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

可选的，在本发明第一方面的第五种实现方式中，所述当通过所述监听函数监听到哈希值发生变化时，通过预置的导航钩子和所述哈希路由对所述首屏骨架屏进行渲染，得到目标骨架屏包括：当通过所述预置的监听函数监听到哈希值发生变化时，通过预置的导航钩子进行页面导航，确定目标跳转页面；从所述目标跳转页面中提取目标跳转路由路径，在所述项目入口文件中将所述目标跳转路由路径挂载到所述预置的内联标签中，得到第二目标项目内联标签；对所述第二目标项目内联标签进行渲染，得到目标骨架屏。

可选的，在本发明第一方面的第六种实现方式中，在所述获取目标终端的页面加载请求之前，所述骨架屏的渲染方法还包括：通过哈希路由设置骨架超文本标记语言和层叠样式表的样式，得到多个样式骨架屏，并将所述多个样式骨架屏的加载入口设置到项目入口中，得到目标项目入口；将所述多个样式骨架屏设置到预置的文件中，并按照预置的页面路由路径标准，分别对所述多个样式骨架屏进行路径设置，得到多个路径骨架屏；将包括所述多个路径骨架屏的文件进行打包，得到多个预置的骨架屏。

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

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

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

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

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

可选的，在本发明第二方面的第五种实现方式中，所述路由转场渲染单元具体用于：当通过所述预置的监听函数监听到哈希值发生变化时，通过预置的导航钩子进行页面导航，确定目标跳转页面；从所述目标跳转页面中提取目标跳转路由路径，在所述项目入口文件中将所述目标跳转路由路径挂载到所述预置的内联标签中，得到第二目标项目内联标签；对所述第二目标项目内联标签进行渲染，得到目标骨架屏。

可选的，在本发明第二方面的第六种实现方式中，所述骨架屏的渲染装置还包括：骨架设置模块，用于通过哈希路由设置骨架超文本标记语言和层叠样式表的样式，得到多个样式骨架屏，并将所述多个样式骨架屏的加载入口设置到项目入口中，得到目标项目入口；路径设置模块，用于将所述多个样式骨架屏设置到预置的文件中，并按照预置的页面路由路径标准，分别对所述多个样式骨架屏进行路径设置，得到多个路径骨架屏；文件打包模块，用于将包括所述多个路径骨架屏的文件进行打包，得到多个预置的骨架屏。

本发明第三方面提供了一种骨架屏的渲染设备，包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；所述至少一个处理器调用所述存储器中的所述指令，以使得所述骨架屏的渲染设备执行上述的骨架屏的渲染方法。

本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的骨架屏的渲染方法。

本发明提供的技术方案中，获取目标终端的页面加载请求，其中，所述目标终端的页面加载请求为网络加载请求；根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏，并在目标项目入口中对所述初始骨架屏进行渲染，得到首屏骨架屏；通过哈希路由对首屏骨架屏进行路由转场渲染，得到目标骨架屏；将所述目标骨架屏传输至目标终端进行显示。本发明实施例中，通过对骨架屏进行首屏渲染和路由转场渲染，解决了只能在第一次进入页面时显示骨架屏的问题，减少了白屏显示时间，提升了页面切换的响应效率。

附图说明

图1为本发明实施例中骨架屏的渲染方法的一个实施例示意图；

图2为本发明实施例中骨架屏的渲染方法的另一个实施例示意图；

图3为本发明实施例中骨架屏的渲染装置的一个实施例示意图；

图4为本发明实施例中骨架屏的渲染装置的另一个实施例示意图；

图5为本发明实施例中骨架屏的渲染设备的一个实施例示意图。

具体实施方式

本发明实施例提供了一种骨架屏的渲染方法、装置、设备及存储介质，用于在项目入口文件中利用页面路由路径和骨架屏路由路径对骨架屏进行首屏渲染，在项目入口文件中利用页面路由路径和目标跳转页面路由路径进行路由转场渲染，解决了只能在第一次进入页面时显示骨架屏的问题，减少了白屏显示时间，提升了页面切换的响应效率。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”或“具有”及其任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为便于理解，下面对本发明实施例的具体流程进行描述，请参阅图1，本发明实施例中骨架屏的渲染方法的一个实施例包括：

101、获取目标终端的页面加载请求，其中，目标终端的页面加载请求为网络加载请求；

服务器获取来自目标终端的为网络加载请求的页面加载请求。

用户可以通过终端发送页面加载请求，服务器则接受来自终端的页面加载请求。例如，来自目标终端的页面加载请求可以为目标页面的网络地址，即ip地址；页面加载请求也可以为关键字，比如目标页面对应的关键字；或者用户通过触发终端显示界面上的预设功能选项或触发热区，服务器也会获取来自目标终端的页面加载请求等。

可以理解的是，本发明的执行主体可以为骨架屏的渲染装置，还可以是终端或者服务器，具体此处不做限定。本发明实施例以服务器为执行主体为例进行说明。

102、根据目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏，并在目标项目入口中对初始骨架屏进行渲染，得到首屏骨架屏；

服务器在多个预置的骨架屏中根据目标终端的页面加载请求确定初始骨架屏，并在目标项目入口中将初始骨架屏渲染为首屏骨架屏。

服务器根据目标终端的页面加载请求在多个预置的骨架屏中进行匹配，从而选取初始骨架屏，例如，目标终端的页面请求为打开软件a，服务器则在多个骨架屏中基于该页面请求确定软件a的初始骨架屏。服务器在目标项目入口中渲染初始骨架屏时，需要判断初始骨架屏的路径和页面的路径是否相匹配，如果初始骨架屏的路径和页面的路径相匹配，服务器则在目标项目入口中设置初始骨架屏的样式和显示尺寸等，得到首屏骨架屏，从而完成首屏骨架屏的渲染。终端的不同的初始骨架屏对应不同的目标页面，如果目标终端的页面加载请求对应的目标页面为历史访问过的页面，并且目标页面还缓存在本地，服务器可以直接得到首页骨架屏。

需要说明的是，本发明还涉及区块链技术，预置的骨架屏可存储于区块链中。在目标项目入口中，可以根据项目加载的页面控制加载相应的骨架屏，方便统一管理，目标项目入口为骨架屏加载入口已经接入的项目入口；同时骨架屏的渲染不用在单独的页面中进行渲染，减少页面的耦合，将整个骨架屏的模块单独出来管理。类似于state状态管理一样，将单独数据提出来进行统一管理，这里是单独骨架屏提出来进行统一管理。

103、通过哈希路由对首屏骨架屏进行路由转场渲染，得到目标骨架屏；

服务器采用哈希路由将首屏骨架屏通过路由转场渲染为目标骨架屏。

路由是用来进行前端和后端交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由其中一种功能。路由的实质是匹配不同的统一资源定位符(uniformresourcelocator，url)路径，进行解析，然后动态的渲染出区域内容。其中，哈希路由类似于url请求http://www.xxx.com/#/login中的这种“#”。当“#”后面的哈希值发生变化时，服务器会得到哈希值变化前的url请求和哈希值变化后的url请求，服务器可以通过哈希值变化后的url请求获取变化后的带有“#”的哈希值，通过变化后的哈希值渲染首屏骨架屏，或者直接调用哈希值函数获取变化后的哈希值来渲染首屏骨架屏，从而得到目标骨架屏。

例如，假设服务器当前页面1对应哈希值为“#健康保险”，“#健康保险”的哈希值对应的页面路径1为“href＝window.location.hash.replace(/#/,‘/static/skeleton/模块1’)”。服务器通过哈希路由获取来自目标终端的url请求“http://www.pingan.com/#/意外保险”，此时的哈希值为意外保险，服务器通过导航钩子跳转到“http://www.pingan.com/#/意外保险”对应的页面2，然后从对应的页面2中提取到页面路径2“href＝window.location.hash.replace(/#/,‘/static/skeleton/模块2’)”，服务器在项目入口文件中将页面路径挂载到预置的内联标签中，最后对挂载过页面路径2的内联标签进行样式、尺寸等设置，完成骨架屏的路由转场渲染，从而得到目标骨架屏。

104、将目标骨架屏传输至目标终端进行显示。

服务器将目标骨架屏传输至目标终端，在目标终端显示与页面加载请求相对应的目标骨架屏。

本发明实施例中，通过对骨架屏进行首屏渲染和路由转场渲染，解决了只能在第一次进入页面时显示骨架屏的问题，减少了白屏显示时间，提升了页面切换的响应效率。

请参阅图2，本发明实施例中骨架屏的渲染方法的另一个实施例包括：

201、通过哈希路由设置骨架超文本标记语言和层叠样式表的样式，得到多个样式骨架屏，并将多个样式骨架屏的加载入口设置到项目入口中，得到目标项目入口；

服务器通过哈希路由设置骨架超文本标记语言和层叠样式表的样式，然后通过一个预渲染插件将骨架屏的渲染结果“超文本标记语言片段”插入超文本标记语言所属页面模版的挂载点中，将css样式内联到头部标签中，通过此过程，服务器得到多个样式骨架屏。服务器将多个样式骨架屏的加载入口分别设置到项目入口中，就可以根据项目加载的页面控制加载相应的骨架屏，方便统一管理，而且不用在单独的页面中对骨架屏进行渲染，能够减少页面的耦合。

202、将多个样式骨架屏设置到预置的文件中，并按照预置的页面路由路径标准，分别对多个样式骨架屏进行路径设置，得到多个路径骨架屏；

服务器将多个样式骨架屏分别设置到对应的预置的文件中，并将多个样式骨架屏的路由按照预置的页面路由路径标准进行设置，从而得到多个路径骨架屏。

例如，将样式骨架屏设置到预置的文件时，首先将样式骨架屏统一放置在static/skeleton文件夹下，然后，假设样式骨架屏1的页面路由为‘/模块1/view1’，则在skeleton文件下创建‘模块1’文件夹，然后创建view1，具体的骨架css+html书写在static/skeleton/模块1/view1文件中。对样式骨架屏进行设置时，预置的页面路由路径标准为‘src/pages/模块1/view1’，则样式骨架屏1的路由路径为‘static/skeleton/模块1/view1’；服务器可以对样式骨架屏2在static/skeleton文件夹下创建‘模块2’的文件夹，然后创建view2，具体的骨架css+html书写在static/skeleton/模块2/view2文件中。服务器采用同样的设置方法，能够得到多个路径骨架屏。

需要说明的是，本实施例的路由为hash路由，路由路径中带#号，相应的请求地址为‘https://xxx.xxx.xx.xx/#/模块1/view1’，路由路径为#号后的部分‘/模块1/view1’。

203、将包括多个路径骨架屏的文件进行打包，得到多个预置的骨架屏；

服务器将多个文件打包压缩，缩小文件的大小，得到多个预置的骨架屏。

204、获取目标终端的页面加载请求，其中，目标终端的页面加载请求为网络加载请求；

服务器获取来自目标终端的为网络加载请求的页面加载请求。

用户可以通过终端发送页面加载请求，服务器则接受来自终端的页面加载请求。例如，来自目标终端的页面加载请求可以为目标页面的网络地址，即ip地址；页面加载请求也可以为关键字，比如目标页面对应的关键字；或者用户通过触发终端显示界面上的预设功能选项或触发热区，服务器也会获取来自目标终端的页面加载请求等。

205、根据目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏，并在目标项目入口中对初始骨架屏进行渲染，得到首屏骨架屏；

服务器在多个预置的骨架屏中根据目标终端的页面加载请求确定初始骨架屏，并在目标项目入口中对初始骨架屏进行渲染，得到首屏骨架屏。

服务器根据目标终端的页面加载请求在多个预置的骨架屏中进行匹配，从而选取初始骨架屏，例如，目标终端的页面请求为打开软件a，服务器则在多个预置的骨架屏中基于该页面请求确定软件a的初始骨架屏。服务器在目标项目入口中渲染初始骨架屏时，需要判断初始骨架屏的路径和当前页面的路径是否相匹配，如果初始骨架屏的路径和当前页面的路径相匹配，服务器则在目标项目入口中设置初始骨架屏的样式和显示尺寸等，得到首屏骨架屏，从而完成首屏骨架屏的渲染。终端的不同的初始骨架屏对应不同的目标页面，如果目标终端的页面加载请求对应的目标页面为历史访问过的页面，并且目标页面还缓存在本地，服务器可以直接得到首页骨架屏。

需要说明的是，在目标项目入口中，可以根据项目加载的页面控制加载相应的骨架屏，方便统一管理，目标项目入口为骨架屏加载入口已经接入的项目入口；同时骨架屏的渲染不用在单独的页面中进行渲染，减少页面的耦合，将整个骨架屏的模块单独出来管理。类似于state状态管理一样，将单独数据提出来进行统一管理，这里是单独骨架屏提出来进行统一管理。

具体的，首先服务器在多个预置的骨架屏中根据目标终端的页面加载请求确定初始骨架屏；然后服务器判断初始骨架屏是否与目标终端的页面相匹配；如果服务器判断初始骨架屏与目标终端的页面相匹配，则在目标项目入口中通过预置的内联标签将初始骨架屏嵌入至项目入口文件中进行渲染，得到首屏骨架屏，项目入口文件为目标项目入口对应的文件。

例如，服务器根据目标终端的“职员管理”的页面加载请求，在多个预置的骨架屏中确定“职员管理”对应的初始骨架屏a，服务器判断初始骨架屏a是否与目标终端的页面1相匹配，如果匹配，则在目标项目入口中将初始骨架屏a嵌入项目入口文件中进行渲染，得到“职员管理”的首屏骨架屏。

服务器判断初始骨架屏是否与目标终端的页面相匹配的具体过程为：

服务器从初始骨架屏中读取初始骨架屏路由路径，从目标终端的页面中读取目标终端的页面路由路径；服务器判断目标终端的页面路由路径是否与初始骨架屏路由路径匹配；如果服务器判断目标终端的页面路由路径与初始骨架屏路由路径匹配，则说明初始骨架屏与目标终端的页面相匹配。如果服务器判断目标终端的页面路径与初始骨架屏路由路径不匹配，则说明初始骨架屏与目标终端的页面不匹配。

服务器渲染初始骨架屏得到首屏骨架屏的具体过程为：

如果服务器判定初始骨架屏与目标终端的页面相匹配，服务器则将预置的内联标签挂载到项目入口文件中，得到初始项目内联标签；然后服务器在初始项目内联标签上挂载初始骨架屏路由路径，得到第一目标项目内联标签；最后服务器对第一目标项目内联标签添加层叠样式表和与目标终端的显示尺寸相同的显示尺寸，得到首屏骨架屏。

为了便于理解，下面结合具体情况进行说明：

假设目标终端的页面路由路径属于初始骨架屏路由路径，初始骨架屏路由路径为href＝window.location.hash.replace(/#/,‘/static/skeleton’)。服务器将将内联标签挂载到目标项目入口对应的项目入口文件中，得到初始项目内联标签为window.skeleton_iframe＝document.createelement(‘iframe’)，将初始骨架屏路由路径写入初始项目内联标签中，得到第一目标项目内联标签为window.skeleton_iframe.src＝window.cdn_url+href+'.html'，最后为第一目标项目内联标签设置层叠样式表的样式、宽和高等，宽和高为目标终端能够显示的宽和高，宽和高具体可以为414*736、375*812等，本发明实施例对层叠样式表的样式、宽和高不做具体限定。

需要说明的是，在本发明实施例中，预置的内联标签为iframe，iframe是html标签，作用是创建包含另外一个文档的内联框架，即行内框架。

206通过哈希路由对首屏骨架屏进行路由转场渲染，得到目标骨架屏；

服务器采用哈希路由将首屏骨架屏通过路由转场渲染为目标骨架屏。

路由是用来进行前端和后端交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由其中一种功能。路由的实质是匹配不同的统一资源定位符url路径，进行解析，然后动态的渲染出区域内容。其中，哈希路由类似于http://www.xxx.com/#/login中这种“#”。当“#”后面的哈希值发生变化时，服务器会得到哈希值变化前的url请求和哈希值变化后的url请求，服务器可以通过哈希值变化后的url请求获取变化后的带有“#”的哈希值，通过变化后的哈希值渲染首屏骨架屏，或者直接调用哈希值函数获取变化后的哈希值来渲染首屏骨架屏，从而得到目标骨架屏。

例如，假设目标终端的页面1对应哈希值为“#健康保险”，“#健康保险”的哈希值对应的页面路径1为“href＝window.location.hash.replace(/#/,‘/static/skeleton/模块1’)”。服务器通过哈希路由获取来自目标终端的url请求“http://www.pingan.com/#/意外保险”，此时的哈希值为意外保险，服务器通过导航钩子跳转到“http://www.pingan.com/#/意外保险”对应的页面2，然后从对应的页面2中提取到页面路径2“href＝window.location.hash.replace(/#/,‘/static/skeleton/模块2’)”，服务器将页面路径挂载到预置的内联标签中，最后对挂载载过页面路径2的内联标签进行样式、尺寸等设置，完成骨架屏的路由转场渲染，从而得到目标骨架屏。

具体的，服务器通过预置的监听函数监听哈希路由的哈希值发生变化时，服务器基于预置的导航钩子和哈希路由将首屏骨架屏渲染为目标骨架屏。

将首屏骨架屏渲染为目标骨架屏的具体过程为：

当服务器通过预置的监听函数监听到哈希值发生变化时，首先通过预置的导航钩子将服务器导航至目标跳转页面；然后服务器从目标跳转页面中提取能够挂载到预置的内联标签中的目标跳转路由路径，在项目入口文件中将目标跳转路由路径写入预置的内联标签中，从而得到第二目标项目内联标签；最后服务器渲染第二目标项目内联标签，得到目标骨架屏。

为了便于理解，下面结合具体情况进行说明：

假设哈希路由变化前的哈希值“#职员管理”对应的页面路径为href＝window.location.hash.replace(/#/,‘/static/skeleton/模块1’)，哈希路由变化后的哈希值“#职员任务管理”，服务器则通过导航钩子确定目标跳转页面及路由路径为href＝window.location.hash.replace(/#/,‘/static/skeleton/模块2’)，服务器将href＝window.location.hash.replace(/#/,‘/static/skeleton/模块2’)写入预置的内联标签中，得到第二目标内联标签，最后服务器对第二目标内联标签进行样式设置和显示尺寸设置，得到“职员管理”的目标骨架屏。“职员管理”的目标骨架屏的样式可以为白底灰框，显示尺寸可以为414*736，在其他实施例中，目标骨架屏的样式和显示尺寸还可以为其他。

207、将目标骨架屏传输至目标终端进行显示。

服务器将目标骨架屏传输至目标终端，在目标终端显示与页面加载请求相对应的目标骨架屏。

本发明实施例中，通过对骨架屏进行首屏渲染和路由转场渲染，解决了只能在第一次进入页面时显示骨架屏的问题，减少了白屏显示时间，提升了页面切换的响应效率。

上面对本发明实施例中骨架屏的渲染方法进行了描述，下面对本发明实施例中骨架屏的渲染装置进行描述，请参阅图3，本发明实施例中骨架屏的渲染装置一个实施例包括：

请求获取模块301，用于获取目标终端的页面加载请求，其中，目标终端的页面加载请求为网络加载请求；

首屏渲染模块302，用于根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏，并在目标项目入口中对所述初始骨架屏进行渲染，得到首屏骨架屏；

路由转场渲染模块303，用于通过哈希路由对首屏骨架屏进行路由转场渲染，得到目标骨架屏；

显示模块304，用于将所述目标骨架屏传输至目标终端进行显示。

本发明实施例中，通过对骨架屏进行首屏渲染和路由转场渲染，解决了只能在第一次进入页面时显示骨架屏的问题，减少了白屏显示时间，提升了页面切换的响应效率。

请参阅图4，本发明实施例中骨架屏的渲染装置的另一个实施例包括：

请求获取模块301，用于获取目标终端的页面加载请求，其中，目标终端的页面加载请求为网络加载请求；

首屏渲染模块302，用于根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏，并在目标项目入口中对所述初始骨架屏进行渲染，得到首屏骨架屏；

路由转场渲染模块303，用于通过哈希路由对首屏骨架屏进行路由转场渲染，得到目标骨架屏；

显示模块304，用于将所述目标骨架屏传输至目标终端进行显示。

可选的，首屏渲染模块302具体包括：

骨架屏确定单元3021，用于根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏；

判断单元3022，用于判断所述初始骨架屏是否与目标终端的页面相匹配；

首屏渲染单元3023，若所述初始骨架屏与所述目标终端的页面相匹配，则用于在所述目标项目入口中通过预置的内联标签将所述初始骨架屏嵌入至所述目标项目入口对应的项目入口文件中进行渲染，得到首屏骨架屏。

可选的，判断单元3022还可以具体用于：

从所述初始骨架屏中读取初始骨架屏路由路径，并从目标终端的页面读取目标终端的页面路由路径；

判断所述目标终端的页面路由路径是否与所述初始骨架屏路由路径匹配；

若所述目标终端的页面路由路径与所述初始骨架屏路由路径匹配，则判定所述初始骨架屏与目标终端的页面相匹配。

可选的，首屏渲染单元3023还可以具体用于：

若所述初始骨架屏与所述目标终端的页面相匹配，则在所述目标项目入口对应的项目入口文件中挂载预置的内联标签，得到初始项目内联标签；

将所述初始骨架屏路由路径写入所述初始项目内联标签中，得到第一目标项目内联标签；

对所述第一目标项目内联标签添加层叠样式表和显示尺寸，得到首屏骨架屏，其中，所述显示尺寸与所述目标终端的显示尺寸相同。

可选的，路由转场渲染模块303具体包括：

监听单元3031，用于通过预置的监听函数监听哈希路由的哈希值；

路由转场渲染单元3032，当通过所述监听函数监听到哈希值发生变化时，用于基于预置的导航钩子和所述哈希路由对所述首屏骨架屏进行渲染，得到目标骨架屏。

可选的，路由转场渲染单元3032还可以具体用于：

当通过所述预置的监听函数监听到哈希值发生变化时，通过预置的导航钩子进行页面导航，确定目标跳转页面；

从所述目标跳转页面中提取目标跳转路由路径，在所述项目入口文件中将所述目标跳转路由路径挂载到所述预置的内联标签中，得到第二目标项目内联标签；

对所述第二目标项目内联标签进行渲染，得到目标骨架屏。

可选的，骨架屏的渲染装置还包括：

骨架设置模块305，用于通过哈希路由设置骨架超文本标记语言和层叠样式表的样式，得到多个样式骨架屏，并将所述多个样式骨架屏的加载入口设置到项目入口中，得到目标项目入口；

路径设置模块306，用于将所述多个样式骨架屏设置到预置的文件中，并按照预置的页面路由路径标准，分别对所述多个样式骨架屏进行路径设置，得到多个路径骨架屏；

文件打包模块307，用于将包括所述多个路径骨架屏的文件进行打包，得到多个预置的骨架屏。

本发明实施例中，通过对骨架屏进行首屏渲染和路由转场渲染，解决了只能在第一次进入页面时显示骨架屏的问题，减少了白屏显示时间，提升了页面切换的响应效率。

上面图3和图4从模块化功能实体的角度对本发明实施例中的骨架屏的渲染装置进行详细描述，下面从硬件处理的角度对本发明实施例中骨架屏的渲染设备进行详细描述。

图5是本发明实施例提供的一种骨架屏的渲染设备的结构示意图，该骨架屏的渲染设备500可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(centralprocessingunits，cpu)510(例如，一个或一个以上处理器)和存储器520，一个或一个以上存储应用程序533或数据532的存储介质530(例如一个或一个以上海量存储设备)。其中，存储器520和存储介质530可以是短暂存储或持久存储。存储在存储介质530的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对骨架屏的渲染设备500中的一系列指令操作。更进一步地，处理器510可以设置为与存储介质530通信，在骨架屏的渲染设备500上执行存储介质530中的一系列指令操作。

骨架屏的渲染设备500还可以包括一个或一个以上电源540，一个或一个以上有线或无线网络接口550，一个或一个以上输入输出接口560，和/或，一个或一个以上操作系统531，例如windowsserve，macosx，unix，linux，freebsd等等。本领域技术人员可以理解，图5示出的骨架屏的渲染设备结构并不构成对骨架屏的渲染设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

进一步地，所述计算机可用存储介质可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。

本发明还提供一种计算机可读存储介质，该计算机可读存储介质可以为非易失性计算机可读存储介质，该计算机可读存储介质也可以为易失性计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在计算机上运行时，使得计算机执行所述骨架屏的渲染方法的步骤。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(read-onlymemory，rom)、随机存取存储器(randomaccessmemory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。

本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。