页面骨架屏生成方法、装置、设备及可读存储介质制造方法及图纸

本发明专利技术公开一种页面骨架屏生成方法、装置、设备及可读存储介质。该方法包括：获取请求页面中可视区域内的节点；确定所述请求页面的入口节点；以及从所述入口节点开始，对所述节点进行遍历，确定出所述节点中的可见节点，并根据所述可见节点生成所述请求页面的用于骨架屏中的DOM节点，从而生成包含所述DOM节点的骨架屏；其中，每个所述可见节点的元素特征符合一预设条件。

【技术实现步骤摘要】
页面骨架屏生成方法、装置、设备及可读存储介质
本专利技术涉及网页开发
，具体而言，涉及一种页面骨架屏生成方法、装置、设备及可读存储介质。
技术介绍
骨架屏(SkeletonScreen)是在页面数据尚未加载完成前，先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。相较于传统的页面加载(loading)方式，骨架屏在一定程度上可提升用户体验，降低用户等待页面加载的焦灼情绪。目前，有如下几种骨架屏的生成方法：一种方法是使用图片、SVG(ScalableVectorGraphics，可缩放矢量图形)或者手动编写骨架屏代码。这种方法使用HTML+CSS(CascadingStyleSheets，层叠样式表)，可以很快的生成骨架屏。但是面对视觉设计的改版以及需求的更迭，这种方法对骨架屏的跟进修改会非常被动，机械化重复劳作的方式也显得机动性不足，严重影响效率。另一种方法是通过预渲染手动书写的代码生成相应的骨架屏。这种方法中比较成熟的方案是vue-skeleton-webpack-plugin本文档来自技高网...

【技术保护点】
1.一种页面骨架屏生成方法，其特征在于，包括：/n获取请求页面中可视区域内的节点；/n确定所述请求页面的入口节点；以及/n从所述入口节点开始，对所述节点进行遍历，确定出所述节点中的可见节点，并根据所述可见节点生成所述请求页面的用于骨架屏中的DOM节点，从而生成包含所述DOM节点的骨架屏；/n其中，每个所述可见节点的元素特征符合一预设条件。/n

【技术特征摘要】
1.一种页面骨架屏生成方法，其特征在于，包括：
获取请求页面中可视区域内的节点；
确定所述请求页面的入口节点；以及
从所述入口节点开始，对所述节点进行遍历，确定出所述节点中的可见节点，并根据所述可见节点生成所述请求页面的用于骨架屏中的DOM节点，从而生成包含所述DOM节点的骨架屏；
其中，每个所述可见节点的元素特征符合一预设条件。


2.根据权利要求1所述的方法，其特征在于，所述预设条件包括：非隐藏元素、宽与高均大于0的元素、非透明元素、内容不是空格的元素及位于浏览窗口可见区域内的元素中的部分或全部。


3.根据权利要求1所述的方法，其特征在于，从所述入口节点开始，对所述节点进行遍历，确定出所述节点中的可见节点，并根据所述可见节点生成所述请求页面的用于骨架屏中的DOM节点包括：通过JavaScript脚本程序，从所述入口节点开始，对所述节点进行遍历，确定出所述节点中的可见节点，并根据所述可见节点生成所述请求页面的用于骨架屏中的DOM节点。


4.根据权利要求1所述的方法，其特征在于，获取请求页面中可视区域内的节点包括：
接收用户输入的关于所述请求页面的页面请求；以及
访问所述请求页面，以获取所述请求页面可视区域内的节点。


5.根据权利要求4所述的方法，其特征在于，访问所述请求页面，以获取所述请求页面可视区域内的节点包括：使用puppeteer工具作为爬虫，访问所述请...

【专利技术属性】
技术研发人员：胡峰，
申请(专利权)人：北京京东尚科信息技术有限公司，北京京东世纪贸易有限公司，
类型：发明
国别省市：北京;11