【技术实现步骤摘要】
本申请涉及网页，尤其涉及一种骨架屏页面生成方法、装置和设备。
技术介绍
1、页面(例如网页或某个应用程序中的页面)在进行加载并显示的过程中，需要耗费一定的时间，这段时间内用户需要等待，为了提高在页面加载过程中的用户体验，可以在页面加载和页面显示之前生成页面对应的骨架屏页面。
2、骨架屏页面指的是在页面未渲染完成时，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户页面正在加载的错觉，待页面渲染完成之后再用真实页面替换骨架屏页面，从而减少页面白屏的时间，给用户带来更好的体验。
3、目前，常采用超文本标记语言(hypertextmarkup language，简称html)/层叠样式表(cascading style sheets，css)/javascript编写骨架屏页面代码，在浏览器加载页面时运行对应的骨架屏页面代码，但这会造成页面编译出一个体积较大的javascript文件，阻塞页面的渲染，导致浏览器加载页面时，有较长的白屏等待时间。
技术实现思路
1、有鉴于此，本申请提供一种骨架屏页面生成方法、装置和设备，用以解决浏览器加载网页白屏等待时间过长的问题。
2、具体地，本申请是通过如下技术方案实现的：
3、本申请第一方面提供一种骨架屏页面生成方法，所述方法包括：
4、调用无头浏览器加载编译好的目标h5页面；所述目标h5页面具有真实页面渲染状态和骨架屏页面渲染状态；
5、所述无头浏览器在加载所述目标h5页面的过
6、若是，渲染所述目标h5页面对应的骨架屏页面，并在渲染完成后，从所述骨架屏页面抓取指定类型的骨架屏元素；
7、将所述骨架屏元素添加到所述目标h5页面，得到附加有骨架屏元素的更新h5页面，以在加载所述更新h5页面时，基于所述骨架屏元素生成所述更新h5页面对应的骨架屏页面。
8、可选的，所述指定类型的骨架屏元素包括dom标记的元素、图片元素、样式元素和脚本元素。
9、可选的，所述将所述骨架屏元素添加到所述目标h5页面中，包括：
10、确定所述目标h5页面的标注位置；所述标注位置用于指示所述目标h5页面嵌入骨架屏代码的位置；
11、将所述骨架屏元素嵌入至所述标注位置，得到附加有骨架屏元素的更新h5页面。
12、可选的，所述无头浏览器在加载所述目标h5页面的过程中，所述方法还包括：
13、禁用动态数据网络请求。
14、可选的，所述判断所述目标h5页面是否处于骨架屏渲染状态，包括：
15、判断所述目标h5页面是否携带骨架屏标记；
16、若是，确定所述目标h5页面处于骨架屏渲染状态。
17、本申请第二方面，提供一种骨架屏页面生成装置，所述装置包括加载模块、处理模块和更新模块；其中，
18、所述加载模块，用于调用无头浏览器加载编译好的目标h5页面；所述目标h5页面具有真实页面渲染状态和骨架屏页面渲染状态；
19、所述无头浏览器在加载所述目标h5页面的过程中，判断所述目标h5页面是否处于骨架屏渲染状态，并在判断所述目标h5页面处于骨架屏渲染状态时，渲染所述目标h5页面对应的骨架屏页面；
20、所述处理模块，用于在渲染完成后，从所述骨架屏页面抓取指定类型的骨架屏元素；
21、所述更新模块，用于将所述骨架屏元素添加到所述目标h5页面，得到附加有骨架屏元素的更新h5页面，以在加载所述更新h5页面时，基于所述骨架屏元素生成所述更新h5页面对应的骨架屏页面。
22、可选的，所述指定类型的骨架屏元素包括dom标记的元素、图片元素、样式元素和脚本元素。
23、可选的，所述更新模块，具体用于确定所述目标h5页面的标注位置，并将所述骨架屏元素嵌入至所述标注位置，得到附加有骨架屏元素的更新h5页面；其中，所述标注位置用于指示所述目标h5页面嵌入骨架屏代码的位置，
24、可选的，所述无头浏览器在加载所述目标h5页面的过程中，禁用动态数据网络请求。
25、可选的，所述判断所述目标h5页面是否处于骨架屏渲染状态，包括：
26、判断所述目标h5页面是否携带骨架屏标记；
27、若是，确定所述目标h5页面处于骨架屏渲染状态。
28、本申请第三方面提供一种骨架屏页面生成设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现本申请第一方面任一项所述方法的步骤。
29、本申请第四方面提供一种存储介质，其上存储有程序，所述程序被处理器执行时实现本申请第一方面任一项所述方法的步骤。
30、本申请提供的骨架屏页面生成方法、装置和设备，通过调用无头浏览器加载编译好的具有真实页面渲染状态和骨架屏页面渲染状态的目标h5页面，所述无头浏览器在加载所述目标h5页面的过程中，判断所述目标h5页面是否处于骨架屏渲染状态，若是，则渲染所述目标h5页面对应的骨架屏页面，并在渲染完成后，从所述骨架屏页面抓取指定类型的骨架屏元素，从而将所述骨架屏元素添加到所述目标h5页面，得到附加有骨架屏元素的更新h5页面，以在加载所述更新h5页面时，基于所述骨架屏元素生成所述更新h5页面对应的骨架屏页面。这样，在加载更新h5页面时，在不加载运行javascript文件的情况下，即可直接利用骨架屏元素渲染出骨架屏页面，可减少浏览器加载页面时的白屏等待时间。
本文档来自技高网...【技术保护点】
1.一种骨架屏页面生成方法，其特征在于，所述方法包括：
2.根据权利要求1所述的方法，其特征在于，所述指定类型的骨架屏元素包括Dom标记的元素、图片元素、样式元素和脚本元素。
3.根据权利要求1所述的方法，其特征在于，所述将所述骨架屏元素添加到所述目标H5页面中，包括：
4.根据权利要求1所述的方法，其特征在于，所述无头浏览器在加载所述目标H5页面的过程中，所述方法还包括：
5.根据权利要求1所述的方法，其特征在于，所述判断所述目标H5页面是否处于骨架屏渲染状态，包括：
6.一种骨架屏页面生成装置，其特征在于，所述装置包括加载模块、处理模块和更新模块；其中，
7.根据权利要求6所述的装置，其特征在于，所述指定类型的骨架屏元素包括Dom标记的元素、图片元素、样式元素和脚本元素。
8.根据权利要求6所述的装置，其特征在于，所述更新模块，具体用于确定所述目标H5页面的标注位置，并将所述骨架屏元素嵌入至所述标注位置，得到附加有骨架屏元素的更新H5页面；其中，所述标注位置用于指示所述目标H5页面嵌入骨架屏代
9.一种骨架屏页面生成设备，其特征在于，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-5任一项所述方法的步骤。
10.一种存储介质，其上存储有程序，其特征在于，所述程序被处理器执行时实现权利要求1-5任一项所述方法的步骤。
...【技术特征摘要】
1.一种骨架屏页面生成方法，其特征在于，所述方法包括：
2.根据权利要求1所述的方法，其特征在于，所述指定类型的骨架屏元素包括dom标记的元素、图片元素、样式元素和脚本元素。
3.根据权利要求1所述的方法，其特征在于，所述将所述骨架屏元素添加到所述目标h5页面中，包括：
4.根据权利要求1所述的方法，其特征在于，所述无头浏览器在加载所述目标h5页面的过程中，所述方法还包括：
5.根据权利要求1所述的方法，其特征在于，所述判断所述目标h5页面是否处于骨架屏渲染状态，包括：
6.一种骨架屏页面生成装置，其特征在于，所述装置包括加载模块、处理模块和更新模块；其中，
7.根据权利要求6所述的装...
【专利技术属性】
技术研发人员：黄震，王云飞，赵飞，欧阳建华，
申请(专利权)人：北京陌陌信息技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。