骨架屏生成方法、装置、电子设备和计算机存储介质制造方法及图纸

本发明专利技术实施例提出了一种骨架屏生成方法、装置、电子设备和计算机存储介质，该方法包括：在利用自动化测试工具访问浏览器页面时，将生成骨架屏的脚本注入到所述浏览器页面中；通过调用所述脚本执行以下步骤：获取所述浏览器页面对应的DOM元素和所述骨架屏对应的CSS，根据所述DOM元素和所述CSS，得到骨架屏的HTML文件；根据所述HTML文件，生成骨架屏。生成骨架屏。生成骨架屏。

【技术实现步骤摘要】
骨架屏生成方法、装置、电子设备和计算机存储介质


[0001]本专利技术涉及计算机
，涉及但不限于一种骨架屏(Skeleton Screen)生成方法、装置、电子设备和计算机存储介质。

技术介绍

[0002]近年来，网络(WEB)技术正在向各种工程化，大型化方向发展，诸如Vue、React等框架的功能越来越强大，WEB的功能越来越复杂，所以导致项目会越来越大，导致加载速度会越来越慢，这样就会导致一些用户体验的问题，比如页面出现之前会出现长时间的白屏问题等。
[0003]为了解决页面加载前白屏时间过长而产生的体验问题，骨架屏就是其中一种优化方案，骨架屏是在页面加载完成之前，给用户呈现一个和页面的结构相似的占位结构，给用户以页面快要加载好的感觉。骨架屏也称为加载占位图。它是在页面数据尚未加载完成时先给用户展示出页面的大致结构，进而等到数据请求返回后再显示页面的数据内容，从而替换骨架屏。然而，在相关技术中，生成骨架屏的方案的人力成本和时间成本较高。

技术实现思路

[0004]本专利技术实施例期望提供骨架屏生成的技术方案，可本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种骨架屏生成方法，其特征在于，所述方法包括：在利用自动化测试工具访问浏览器页面时，将生成骨架屏的脚本注入到所述浏览器页面中；通过调用所述脚本执行以下步骤：获取所述浏览器页面对应的文档对象模型DOM元素和所述骨架屏对应的层叠样式表CSS，根据所述DOM元素和所述CSS，得到骨架屏的超文本标记语言HTML文件；根据所述HTML文件，生成骨架屏。2.根据权利要求1所述的方法，其特征在于，所述获取所述浏览器页面对应的DOM元素，包括：通过遍历所述浏览器页面获取用于生成骨架屏的DOM元素，将所述用于生成骨架屏的DOM元素作为所述浏览器页面对应的DOM元素。3.根据权利要求1或2所述的方法，其特征在于，所述根据所述DOM元素和所述CSS，得到骨架屏的HTML文件，包括：将所述CSS插入到所述HTML文件的头部head标签中，并将所述DOM元素插入到所述HTML文件的主体body标签中，以得到所述骨架屏的HTML文件。4.根据权利要求1所述的方法，其特征在于，所述方法还包括：监听用于访问HTML文件的静态资源服务器；在监听到所述静态资源服务器启动时，利用自动化测试工具访问浏览器页面；相应地，所述根据所述HTML文件，生成骨架屏，包括：在所述静态资源服务器访问所述HTML文件后，根据所述静态资源服务器访问得到的HTML文件生成所述骨架屏。5.根据权利要求4所述的方法，其特征在于，所述监听用于访问HTML文件的静态资源服务器，包括：在得到用于表征骨架屏显示参数的插件后，监听用于访问HTML文件的静态资源服务器；相...

【专利技术属性】
技术研发人员：郭风雷，
申请(专利权)人：北京京东世纪贸易有限公司，
类型：发明
国别省市：