CN112307385A - 网页数据加载和处理方法、装置、电子设备及存储介质 - Google Patents

网页数据加载和处理方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN112307385A
CN112307385A CN202011139372.4A CN202011139372A CN112307385A CN 112307385 A CN112307385 A CN 112307385A CN 202011139372 A CN202011139372 A CN 202011139372A CN 112307385 A CN112307385 A CN 112307385A
Authority
CN
China
Prior art keywords
node
description file
content description
webpage
loading
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202011139372.4A
Other languages
English (en)
Inventor
殷勇
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Dajia Internet Information Technology Co Ltd
Original Assignee
Beijing Dajia Internet Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Dajia Internet Information Technology Co Ltd filed Critical Beijing Dajia Internet Information Technology Co Ltd
Priority to CN202011139372.4A priority Critical patent/CN112307385A/zh
Publication of CN112307385A publication Critical patent/CN112307385A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本公开关于一种网页数据加载和处理方法、装置、电子设备及存储介质，该方法包括：响应于网页加载指令，获取内容描述文件，所述内容描述文件为预先在虚拟浏览器执行源网页加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件后，将所述源网页内容描述文件和骨架屏内容描述文件进行打包得到的文件；加载所述骨架屏内容描述文件输出骨架屏，并同时下载获得所述源网页对应的脚本语言和内容样式文件；利用所述脚本语言按所述内容样式文件，加载所述源网页内容描述文件输出源网页。本公开提供的方案用以降低在网页加载速度敏感的场景中，由于加载速度慢呈现出的网页延时长的效果。

Description

网页数据加载和处理方法、装置、电子设备及存储介质
技术领域
本公开涉及计算机技术领域，特别涉及一种网页数据加载和处理方法、装置、电子设备及存储介质。
背景技术
在网页加载速度敏感的场景中，需要优化网页加载技术，来减少网页数据的加载延时。
骨架屏是一种有效网页数据出现之前的占位内容，一般直接由HTML结构代码直接输出渲染，其并不携带任何有意义的数据，包括文案、图片，但轮廓与JavaScript渲染的真实数据是基本一致的。骨架屏的加载呈现出一种真实数据马上要出现的效果，从而可以降低由于加载速度慢呈现出的网页延时长的效果。
目前生成骨架屏的一种方式是预先根据浏览器真实页面中的内容，手动编写骨架屏的生成代码，在加载网页是通过骨架屏的生成代码来获取骨架屏，但是该方式需要重复开发，存在较大的工作量，而且难以保证骨架屏的内容与真实页面内容是匹配的；另一种方式是通过截图真实的网页页面，然后通过图像处理将截图转化为骨架屏图片，但是图像处理操作复杂，就导致了很多繁琐的步骤，而且最终得到的骨架屏图片难以适应不同的设备。
发明内容
本公开提供一种网页数据加载和处理方法、装置、电子设备及存储介质，用以解决目前骨架屏代码开发量大效率低及截屏生成骨架屏代码图像处理复杂的问题。本公开的技术方案如下：
根据本公开实施例的第一方面，提供一种网页数据加载方法，包括：
响应于网页加载指令，获取内容描述文件，所述内容描述文件为预先在虚拟浏览器执行源网页加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件后，将所述源网页内容描述文件和骨架屏内容描述文件进行打包得到的文件；
加载所述骨架屏内容描述文件输出骨架屏，并同时下载获得所述源网页对应的脚本语言和内容样式文件；
利用所述脚本语言按所述内容样式文件，加载所述源网页内容描述文件输出源网页。
可选地，所述骨架屏内容描述文件包括骨架屏不同框架部分对应的第一节点，所述源网页内容描述文件包括源网页不同内容部分对应的第二节点；
其中，所述第一节点包括在虚拟浏览器加载源网页时，加载并解析所述源网页内容描述文件中各第二节点，通过修改各第二节点，将各第二节点对应的源网页内容部分转换为对应的骨架屏框架部分，所得到的节点。
可选地，所述修改各第二节点包括对以非框架形式输出的第二节点的滤除，和/或对以框架形式输出的第二节点对应的框架部分以灰色色度的填充。
可选地，所述骨架屏内容描述文件中的第一节点包括如下至少一种：
确定解析出的第二节点为图片形式的父节点时，将所述父节点以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，并遍历所述父节点的子节点后，将文字形式的子节点以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括背景图，将所述背景图以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括边框时，将所述边框以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括轮廓线时，将所述轮廓线所在的区域以灰色色度填充后对应的节点。
可选地，所述第一节点为所述源网页对应的脚本语言运行过程，通过对修改各第二节点，将各第二节点对应的源网页内容转换为对应的骨架屏部分，所得到的节点。
可选地，所述在虚拟浏览器加载源网页时，首先在虚拟浏览器上加载并运行所述源网页对应的脚本语言；利用所述脚本语言按所述源网页对应的内容样式文件，加载并解析所述源网页内容描述文件中的第二节点。
可选地，所述对以框架形式输出的第二节点对应的框架部分以灰色色度的填充，包括：
预先创建占用单位区域的灰度图片；
通过调整所述灰度图片与第二节点对应的框架部分尺寸相适配，并覆盖所述第二节点对应的框架部分。
可选地，所述骨架屏内容描述文件为通过在虚拟浏览器完成第二节点的修改后并输出，根据输出的第一节点，对源网页内容描述文件中的对应第二节点进行替换后得到的文件。
根据本公开实施例的第二方面，提供一种网页数据处理方法，该方法包括：
在虚拟浏览器执行源网页的加载；
加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件；
将所述源网页内容描述文件和骨架屏内容描述文件进行打包，得到内容描述文件。
所述将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件，包括：
加载过程中解析所述源网页内容描述文件描述的源网页不同内容部分对应的第二节点；
通过修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点。
可选地，所述修改所述第二节点，包括：
滤除以非框架形式输出的第二节点；和/或
对以框架形式输出的第二节点对应的框架部分，以灰色色度填充。
可选地，所述修改所述第二节点，包括如下至少一个步骤：
确定解析出的第二节点为图片形式的父节点时，将所述父节点以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，遍历所述父节点的子节点后，将文字形式的子节点以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括背景图，将所述背景图以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括边框时，将所述边框以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括轮廓线时，将所述轮廓线所在的区域以灰色色度填充。
可选地，所述通过修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点，包括：
在所述源网页对应的脚本语言运行过程中，修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点。
可选地，所述在虚拟浏览器执行源网页的加载，包括：
在虚拟浏览器上加载并运行所述源网页对应的脚本语言；
利用所述脚本语言按所述源网页对应的内容样式文件，加载并解析所述源网页内容描述文件中的第二节点。
可选地，所述对以框架形式输出的第二节点对应的框架部分，以灰色色度填充，包括：
预先创建占用单位区域的灰度图片；
通过调整所述灰度图片与第二节点对应的框架部分尺寸相适配，并覆盖所述第二节点对应的框架部分。
可选地，得到骨架屏的框架部分所对应的第一节点之后，还包括：
根据输出的第一节点，对源网页内容描述文件中的对应第二节点进行替换后得到的骨架屏内容描述文件。
根据本公开实施例的第三方面，提供一种网页数据加载装置，包括：
内容描述文件获取模块，用于响应于网页加载指令，获取内容描述文件，所述内容描述文件为预先在虚拟浏览器执行源网页加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件后，将所述源网页内容描述文件和骨架屏内容描述文件进行打包得到的文件；
骨架屏加载模块，用于加载所述骨架屏内容描述文件输出骨架屏，并同时下载获得所述源网页对应的脚本语言和内容样式文件；
源网页加载模块，用于利用所述脚本语言按所述内容样式文件，加载所述源网页内容描述文件输出源网页。
根据本公开实施例的第四方面，提供一种网页数据处理装置，包括：
源网页加载模块，用于在虚拟浏览器执行源网页的加载；
骨架屏文件生成模块，用于加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件；
内容文件生成模块，用于将所述源网页内容描述文件和骨架屏内容描述文件进行打包，得到内容描述文件。
根据本公开实施例的第五方面，提供一种网页数据加载装置，包括：存储器和处理器；
其中，所述存储器用于存储所述处理器可执行指令的存储器；
所述处理器用于读取所述存储器中的程序并执行上述第一方面提供的网页数据加载方法的步骤。
根据本公开实施例的第六方面，提供一种网页数据处理装置，包括：存储器和处理器；
其中，所述存储器用于存储所述处理器可执行指令的存储器；
所述处理器用于读取所述存储器中的程序并执行上述第二方面提供的网页数据处理方法的步骤。
根据本公开实施例的第七方面，提供一种芯片，所述芯片与设备中的存储器耦合，使得所述芯片在运行时调用所述存储器中存储的程序指令，实现本申请实施例上述各个方面以及各个方面涉及的任一可能涉及的方法。
根据本公开实施例的第八方面，提供一种计算机可读存储介质，该计算机存储介质存储有程序指令，当其在计算机上运行时，使得计算机执行本公开实施例上述各个方面以及各个方面涉及的任一可能涉及的方法。
根据本公开实施例的第九方面，提供一种计算机程序产品，当所述计算机程序产品在电子设备上运行时，使得所述电子设备执行实现本申请实施例上述各个方面以及各个方面涉及的任一可能涉及的方法。
利用本公开提供的网页数据加载和处理方法、装置、电子设备及存储介质，具有以下有益效果：
本公开提出的网页加载方案，通过预先在虚拟浏览器环境中进行源网页加载生成对应的骨架屏内容描述文件，在实际的网页加载过程，直接对该静态网页内容进行加载，在加载速度敏感的业务场景中，可以自动化跟踪真实页面的最新轮廓，无需手动干预，并最大化地复用了真实页面的css样式代码，减少了代码体积增量，增强了网页加载效果。
附图说明
图1是根据一示例性实施例示出的应用场景的示意图；
图2是根据一示例性实施例示出的一种网页数据加载的系统示意图；
图3是根据一示例性实施例示出的网页开发设备与网页加载设备配合实现本方案的示意图；
图4是根据一示例性实施例示出的HTML文档的节点树示意图；
图5是根据一示例性实施例示出的网页开发设备生成内容描述文件详细流程图；
图6是根据一示例性实施例示出的将真实页面转换为骨架屏样式的流程图；
图7是根据一示例性实施例示出的典型的骨架屏示意图；
图8是根据一示例性实施例示出的网页数据加载方法流程图；
图9是根据一示例性实施例示出的网页数据处理方法流程图；
图10是根据一示例性实施例示出的网页数据处理装置示意图；
图11是根据一示例性实施例示出的网页数据加载装置示意图；
图12是根据一示例性实施例示出的一种电子设备的框图；
图13是根据一示例性实施例示出的另一种电子设备的框图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
以下，对本公开实施例中的部分用语进行解释说明，以便于本领域技术人员理解。
(1)本公开实施例中术语“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
(2)本公开实施例中术语“电子设备”可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。
(3)本公开实施例中术语“网页”为Web网页，Web网页为按照HTML格式组织起来的文件。在通过Web网页进行信息查询时，以信息页面的形式出现，它可包括图形、文字、声音和视像等信息。
(4)本公开实施例中术语“HTML”文件，为网页内容描述文件，利用HTML语言描述网页内容；
(5)本公开实施例中术语“CSS样式文件”为网页内容样式文件，负责描述网页元素的样式，将样式从网页内容中抽离出来，将所有描述网页样式的语句合并成一个文件，这个文件叫层叠样式表，简称CSS；
(6)本公开实施例中术语“JavaScript代码”为加载网页的脚本语言代码，简称JS代码，JavaScript代码通过插入到HTML中执行，通过JavaScript可以实现HTML元素内容的输出，对事件作出反应，改变HTML内容、图像、样式、验证输入等功能，基本上网页上所有的交互都是通过JS函数实现的。
(7)本公开实施例中术语“虚拟浏览器”，其实质为一个没有渲染功能的浏览器，也称“headless”，在node.js环境中调用。该领域有许多现在方案可供选择，如puppeteer，能够提供Chrome、Firefox等多种虚拟浏览器环境选择。
目前生成骨架屏主要有两种方式：一种是预先根据浏览器真实页面中的内容，手动编写骨架屏的生成代码，在加载网页是通过骨架屏的生成代码来获取骨架屏，但是该方式需要重复开发，存在较大的工作量，而且难以保证骨架屏的内容与真实页面内容是匹配的；另一种方式是通过截图真实的网页页面，然后通过图像处理将截图转化为骨架屏图片，但是图像处理操作复杂，就导致了很多繁琐的步骤，而且最终得到的骨架屏图片难以适应不同的设备。
基于上述问题，本公开实施例提供一种网页数据处理方法、装置、电子设备及存储介质，用以解决在网页加载速度敏感的场景中，由于网页数据的加载延时导致网页加载效果差的问题。
为了使本公开的目的、技术方案和优点更加清楚，下面将结合附图对本公开作进一步地详细描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本公开保护的范围。
实施例1
图1为根据本公开实施例的一个应用场景的示意图。
如图1所示，该应用场景中可以包括至少一个服务器20和多个终端设备30。其中，终端设备30可以是可用来进行网络访问的任何合适的电子设备，包括但不限于计算机、笔记本电脑、智能电话、平板电脑或是其它类型的终端。服务器20则是能够通过网络访问的提供交互服务所需信息的任何服务器。终端设备30可以经由网络40实现与服务器20的信息收发。服务器20可以通过访问数据库50来获取终端设备30所需的内容，例如加载网页所需相关文件等。终端设备之间(例如，30_1与30_2或30_N之间)也可以经由网络40彼此通信。网络40可以是广义上的用于信息传递的网络，可以包括一个或多个通信网络，诸如无线通信网络、因特网、私域网、局域网、城域网、广域网或是蜂窝数据网络等。
在随后的描述中仅就单个服务器或终端设备加以详述，但是本领域技术人员应当理解的是，示出的单个服务器20、终端设备30和数据库50旨在表示本申请的技术方案涉及终端设备、服务器及数据库的操作。对单个终端设备以及单个服务器和数据库加以详述至少为了说明方便，而非暗示对终端设备和服务器的类型或是位置等具有限制。应当注意，如果向图示环境中添加附加模块或从其中去除个别模块，不会改变本公开的示例实施例的底层概念。另外，虽然为了方便说明而在图中示出了从数据库50到服务器20的双向箭头，但本领域技术人员可以理解的是，上述数据的收发也是可以通过网络40实现的。
基于目前骨架屏代码生成方式代码开发量大及图像处理负杂的问题，如图2所示，本公开实施例提供一种网页数据加载的系统，包括客户端21、服务器22以及用户23。客户端21为安装在电子设备上的应用程序客户端，与服务器22配合为用户23提供网页浏览服务，用户23可以查看客户端21展示的网页内容，或触发客户端21上支持的操作。
本公开实施例中，响应于用户23在客户端21通过浏览器触发的加载网页的操作，客户端21向服务器22发送页面加载的请求，服务器22获取待加载的网页数据发送到客户端21，客户端21通过浏览器进行网页数据加载并输出展示。
本公开实施例中客户端21响应于网页加载指令，获取内容描述文件，其中，所述内容描述文件为预先在虚拟浏览器执行源网页加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件后，将所述源网页内容描述文件和骨架屏内容描述文件进行打包得到的文件；加载所述骨架屏内容描述文件输出骨架屏，并同时下载获得所述源网页对应的脚本语言和内容样式文件；利用所述脚本语言按所述内容样式文件，加载所述源网页内容描述文件输出源网页。
本公开实施例中的服务器22，用于根据客户端的请求，获取内容描述文件并发送给客户端21；及根据客户端21的请求，将源网页对应的脚本语言和内容样式文件发送给客户端21。
本公开实施例中上述内容描述文件包括两部分内容：骨架屏内容描述文件与源网页内容描述文件，分别作为内容描述文件的不同部分可以分开进行加载。
需要说明的是，本公开实施例中上述服务器22可以是一个服务器，可以是分布式部署的多个服务器。上述发送骨架屏内容描述文件与源网页内容描述文件的服务器，与发送脚本语言和内容样式文件的服务器可以为同一个服务器，也可以是不同的服务器。
本公开实施例中上述网页是指Web网页，Web网页是一群由HTML和CSS构建的静态页面，用户在浏览Web网页时需要进行交互，因此需要加载相应的脚本语言进行网页内容加载，本公开实施例中通过预先在虚拟浏览器环境中进行源网页加载生成对应的骨架屏内容描述文件，在实际的网页加载过程，直接对该静态网页内容进行加载，由于是直接加载静态网页内容，因此不需依赖于任何其他动态代码而可以直接加载；由于是在虚拟浏览器环境中加载源网页生成的骨架屏内容描述文件，因此骨架屏框架来源于对应的真实源网页，在加载速度敏感的业务场景中，可以自动化跟踪真实页面的最新轮廓，无需手动干预，并最大化地复用了真实页面的CSS样式代码，减少了代码体积增量。
网页加载技术可以采用前端渲染，其中前端渲染是指浏览器会从后端得到一些信息，这些信息或许是模板文件或是JSON等各种数据交换格式所包装的数据，甚至是直接的合法的HTML(Hyper Text Markup Language，超级文本标记语言)字符串。然后将这些信息组织排列形成最终可读的HTML字符串是由浏览器来完成的，在形成了HTML字符串之后，再进行显示。
前端渲染方式如采用JavaScript渲染，不管采用哪种优化方式，都必须要等到HTML页面引用的JavaScript代码下载并运行之后才能对页面进行渲染。如果JavaScript代码的下载耗时受到影响，如DNS(Domain Name System，域名系统)查询、TCP(TransmissionControl Protocol，传输控制协议)连接、TLS(Transport Layer Security，安全传输层协议)握手等因素，或者因为JavaScript代码文件过大，导致下载之后编译运行耗时受到影响，则页面中被渲染的内容会延迟出现，在出现之前，页面上可能为没有任何内容显示的空白页面，网页加载呈现的效果比较差。
采用本公开实施例提供的骨架屏生成方式，在输出页面真实内容之前输出，可以降低由于加载速度慢呈现出的网页延时长的效果。
需要说明的是上述预先在虚拟浏览器环境中加载源网页，是在生成环境的设备中完成的，上述预先在虚拟浏览器执行源网页加载过程中，生成内容描述文件的设备，为生成环境中的网页开发设备。
具体地，如图3所示，本公开实施例提供的网页数据加载系统属于运行环境32，通过运行虚拟浏览器加载源网页的网页开发设备311属于生成环境31，上述网页开发设备311可以是一台或多台计算机设备，主要用于在虚拟浏览器加载源网页；加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件后，将所述源网页内容描述文件和骨架屏内容描述文件进行打包得到的文件。
本发明实施例中的网页开发设备，用于在虚拟浏览器执行源网页的加载；加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件；将所述源网页内容描述文件和骨架屏内容描述文件进行打包，得到内容描述文件。
在上述生成环境得到内容描述文件，可以将上述内容描述文件发送到运行环境中的服务器321，从而在运行环境中运行时，响应于用户323登录客户端322发送的网页数据加载指令，首先下载上述将源网页内容描述文件和骨架屏内容描述文件打包在一起的内容描述文件。
本公开实施例中上述内容描述文件为HTML文件，HTML文件利用HTML语言描述网页内容，根据W3C的HTML DOM标准，HTML文件中的所有内容都是节点，整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点，HTML DOM将HTML文档视作树结构，这种结构被称为节点树，具体结构可以参见图4所示。
作为一种可选的实施方式，所述骨架屏内容描述文件包括骨架屏不同框架部分对应的第一节点，所述源网页内容描述文件包括源网页不同内容部分对应的第二节点；
其中，所述第一节点包括在虚拟浏览器加载源网页时，加载并解析所述源网页内容描述文件中各第二节点，通过修改各第二节点，将各第二节点对应的源网页内容部分转换为对应的骨架屏框架部分，所得到的节点。
作为一种可选的实施方式，网页开发设备将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件，包括：
加载过程中解析所述源网页内容描述文件描述的源网页不同内容部分对应的第二节点；
通过修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点。
也就是说，本公开中骨架屏内容描述文件中的第一节点，包括通过对源网页内容描述文件中的第二节点进行覆盖得到的，这里的覆盖是指以灰度填充的灰度框进行相应的节点的覆盖。网页开发设备在虚拟浏览器环境中加载源网页的过程，为利用脚本语言根据内容样式文件，对源网页内容描述中节点进行解析并加载的，上述覆盖过程可以在该解析加载的过程中完成。
对于HTML文件中，如上所述，其中包括的节点有很多类型，用<head>元素标记头部文件，用<title>元素标记网页名称，用<body>元素标记网页主体，用<table>元素标记表格等等，通过向这些元素中填写内容，就写出了一个个有特定样式的节点，所有的这些HTML节点就构成了网页内容。这些标记大多是有默认样式的，如果对默认样式不满意，还可以在CSS文件中修改。
本公开实施例网页开发设备通过修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点，包括：在虚拟浏览器加载源网页时，首先在虚拟浏览器上加载并运行所述源网页对应的脚本语言；利用所述脚本语言按所述源网页对应的内容样式文件，加载并解析所述源网页内容描述文件中的第二节点，在所述源网页对应的脚本语言运行过程中，修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点。
本公开实施例中对于服务器来说，骨架屏内容描述文件中的第一节点，为所述网页开发设备在源网页对应的脚本语言运行过程，通过对修改各第二节点，将各第二节点对应的源网页内容转换为对应的骨架屏部分，所得到的节点。
上述脚本语言为JavaScript代码，上述内容样式文件为CSS文件，CSS文件负责描述元素的样式，将样式从内容中抽离出来，将所有描述网页样式的语句合并成一个文件，这个文件叫层叠样式表，简称CSS。
脚本语言JavaScript的功能在于支持浏览网页时的交互功能，JavaScript是一种轻量级的编程语言，它不像C/C++/JAVA等对数据类型作出严格规定，也没有指针，操作符重载等等内容。JavaScript通过插入到HTML中执行的，通过JavaScript可以实现写入HTML输出，对事件作出反应，改变HTML内容、图像、样式，验证输入等功能，基本上网页上所有的交互都是通过JS函数实现的。
JS文件和CSS文件最终是要应用到HTML中的。在HTML中，可以通过<script>元素来插入JS代码链接，<script>元素可以放在<head>或<body>中。或者在外部编写JS文件，在HTML中引用。而CSS代码可以通过<style>元素插入CSS代码，<style>元素必须放在<head>元素中。或者在外部编写CSS文件，在HTML中引用。也可以直接在某元素中规定CSS样式，这种叫内联样式。
也就是说，网页开发设备在加载源网页时，首先加载HTML，通过HTML相应节点，可以链接到对应的JavaScript和CSS文件，从而执行源网页加载过程，在加载过程中，通过JavaScript对源网页不同内容部分对应的第二节点进行修改时，在进行上述节点覆盖之前会进行相应的预处理，如滤掉一些没有骨架屏显示效果的节点，如音频节点，也就是说，并不是对所有第二节点进行节点覆盖得到上述第一节点，骨架屏内容描述文件中的部分第一节点与源网页内容描述文件中部分第二节点可能是相同的。
作为一种可选的实施方式，修改各第二节点包括对以非框架形式输出的第二节点的滤除，和/或对以框架形式输出的第二节点对应的框架部分以灰色色度的填充。具体在网页开发设备执行修改所述第二节点，包括：
滤除以非框架形式输出的第二节点；和/或，对以框架形式输出的第二节点对应的框架部分，以灰色色度填充。
网页开发设备在加载并解析源网页内容描述文件中的第二节点时，可以滤掉一些不影响骨架屏框架显示效果的节点，而对影响骨架屏框架显示效果的相应节点，以灰色色度填充，实现节点覆盖，得到对应的骨架屏内容描述文件中的第一节点。
实施中，网页开发设备对以框架形式输出的第二节点对应的框架部分以灰色色度的填充，包括：预先创建占用单位区域的灰度图片；确定对相应的节点进行灰色色度填充时，通过调整所述灰度图片与第二节点对应的框架部分尺寸相适配，并覆盖所述第二节点对应的框架部分。
通过上述过程，可以对影响骨架屏框架显示效果的节点进行修改，实现骨架屏显示效果，同时由于利用JavaScript修改了节点，得到了新的与骨架屏框架部分对应的骨架屏内容描述文件。
需要说明的是，上述修改可能是修改了源网页内容描述文件中的部分文件，对于服务器来说，所述骨架屏内容描述文件为通过在虚拟浏览器完成第二节点的修改后并输出，根据输出的第一节点，对源网页内容描述文件中的对应第二节点进行替换后得到的文件。对于网页开发设备，具体得到骨架屏描述文件的过程为：通过修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点，包括：在所述源网页对应的脚本语言运行过程中，修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点。
网页开发设备对影响骨架屏框架显示效果的第二节点进行修改，得到的所述骨架屏内容描述文件中的第一节点包括如下任一种方式：
1)确定解析出的第二节点为图片形式的父节点时，将所述父节点以灰色色度填充后；
对于服务器来说，对影响骨架屏框架显示效果的第二节点进行修改，得到的所述骨架屏内容描述文件中的第一节点包括，网页开发设备确定解析出的第二节点为图片形式的父节点时，将所述父节点以灰色色度填充后对应的节点。
网页开发设备可以通过JavaScript对源网页内容描述文件中节点进行解析，得到图4所示的节点树，在上述结构的节点树中，遍历到每个节点时可以根据节点下面是否有子节点，确定该节点是否为父节点。
对于图片类型的父节点，由于其没有子节点，可以将预先创建的占用单位区域的灰度图片进行尺寸调整，调整到父节点的图片对应区域大小，并用调整后的灰度图片覆盖该父节点，同时由于完成了节点修改，得到修改后对应的第一节点。
2)确定解析出的第二节点为非图片形式的父节点时，并遍历所述父节点的子节点后，将文字形式的子节点以灰色色度填充；
对于服务器来说，对影响骨架屏框架显示效果的第二节点进行修改，得到的所述骨架屏内容描述文件中的第一节点包括，确定解析出的第二节点为非图片形式的父节点时，并遍历所述父节点的子节点后，将文字形式的子节点以灰色色度填充后对应的节点。
在上述结构的节点树中，遍历到每个节点时可以根据节点下面是否有子节点，确定该节点是否为父节点。
对于非图片类型的父节点，该父节点可能存在子节点，则需要对子节点进行遍历，对子节点进行遍历时，可以滤除一些不影响骨架屏框架显示效果的节点，如删除属性为阴影的节点，并确定是否存在文字形式的子节点。
对于文字形式的子节点，确定子节点的文字所占的显示区域，可以将预先创建的占用单位区域的灰度图片进行尺寸调整，调整到文字所占的显示区域大小，并用调整后的灰度图片覆盖该子节点，同时由于完成了节点修改，得到修改后对应的第一节点。
3)确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括背景图，将所述背景图以灰色色度填充；
对于服务器来说，对影响骨架屏框架显示效果的第二节点进行修改，得到的所述骨架屏内容描述文件中的第一节点包括，确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括背景图，将所述背景图以灰色色度填充后对应的节点。
对于非图片类型的父节点，该父节点可能存在子节点，则需要对子节点进行遍历，对子节点进行遍历时，可以滤除一些不影响骨架屏框架显示效果的节点，如删除属性为阴影的节点，并确定父节点是否存在属性，若存在属性节点，则确定属性节点是否包括背景图。
对于背景图的属性节点，确定背景图所占的显示区域，可以将预先创建的占用单位区域的灰度图片进行尺寸调整，调整到背景图所占的显示区域大小，并用调整后的灰度图片覆盖该属性节点，同时由于完成了节点修改，得到修改后对应的第一节点。
4)确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括边框时，将所述边框以灰色色度填充；
对于服务器来说，对影响骨架屏框架显示效果的第二节点进行修改，得到的所述骨架屏内容描述文件中的第一节点包括，确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括边框时，将所述边框以灰色色度填充后对应的节点。
对于非图片类型的父节点，该父节点可能存在子节点，则需要对子节点进行遍历，对子节点进行遍历时，可以滤除一些不影响骨架屏框架显示效果的节点，如删除属性为阴影的节点，并确定父节点是否存在属性，若存在属性节点，则确定属性节点是否包括边框。
对于边框的属性节点，确定边框所占的边框线区域，可以将预先创建的占用单位区域的灰度图片进行尺寸调整，调整到边框线形式的显示区域，并用调整后的边框线覆盖该属性节点，同时由于完成了节点修改，得到修改后对应的第一节点。
5)确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括轮廓线时，将所述轮廓线所在的区域以灰色色度填充。
对于服务器来说，对影响骨架屏框架显示效果的第二节点进行修改，得到的所述骨架屏内容描述文件中的第一节点包括，确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括轮廓线时，将所述轮廓线所在的区域以灰色色度填充后对应的节点。
对于非图片类型的父节点，该父节点可能存在子节点，则需要对子节点进行遍历，对子节点进行遍历时，可以滤除一些不影响骨架屏框架显示效果的节点，如删除属性为阴影的节点，并确定父节点是否存在属性，若存在属性节点，则确定属性节点是否包括轮廓线。
对于轮廓线的属性节点，确定轮廓线所在区域，可以将预先创建的占用单位区域的灰度图片进行尺寸调整，调整到轮廓线形式的显示区域，并用调整后的轮廓线区域覆盖该属性节点，同时由于完成了节点修改，得到修改后对应的第一节点。
下面结合网页开发设备加载源网页的详细流程，说明运行环境中加载的骨架屏内容描述文件生成方式。
网页开发设备，可以是一台计算机设备，也可以是多台计算机设备，在网页开发设备上预先建立虚拟浏览器环境，并在该虚拟浏览器环境下加载源网页的源代码，包括有：HTML文件、CSS和JS。
本实施例中加载的虚拟浏览器，其实质为一个没有渲染功能的浏览器，俗称“headless”，在node.js环境中调用。可以选择如Google公司提供的puppeteer，能够提供Chrome、Firefox等多种浏览器环境选择。这里以puppeteer为例来说明本公开骨架屏内容描述文件生成过程，使用其它类似工具亦在本公开的范围之内。
如图5所示，为本公开实施例网页开发设备生成内容描述文件详细流程图，具体包括：
步骤501，打开虚拟浏览器并进行相应的设置，以创建一个隐藏式浏览器环境；
具体可以进行如下方面的设置，实现创建一个隐藏式的浏览器环境：
打开一个新的页面(Page)上下文，该页面上下文应设置为缓存禁用，以避免在源网页加载过程中加载到真实页面的旧版本，影响最终生成的骨架屏的时效性；
若真实页面专为移动设备设计，应调整页面的尺寸以及屏幕密度等参数；
若真实页面需要登录态，一般来说登录状态通过cookie存储在浏览器中，因此有必要写入特定的cookie内容，具体内容应根据真实页面的需求而定；
考虑到页面加载效率，如有条件，一些不影响最终效果的网络请求可以被主动屏蔽，比如日志发送请求等。
步骤502，操作该页面上下文，通过URL(uniform resource locator；统一资源定位系统)定向到运行真实页面代码的HTTP地址，通过HTTP地址获取源网页的HTML文件，并获取对应的CSS文件及JavaScript；
如前所述，在源网页加载时可以先根据HTTP地址获取HTML文件，根据HTML文件获取对应的CSS文件及JavaScript。
步骤503，利用JavaScript根据CSS文件，执行对HTML文件对应的源网页进行加载的过程，在加载过程中，根据所述源网页内容描述文件，将源网页转换为骨架屏所对应的内容描述文件；
通过前述步骤，期望预发布页面能够正常载入的，本步骤实现的是加载过程中将真实页面(预发布环境)转换为骨架屏样式的过程，具体是通过peppeteer工具来进入到载入的真实页面上下文环境中去，通过JavaScript代码的执行来修改页面的显示内容和样式。具体流程如图6所示，包括：
步骤601，获取HTML文件的所有节点；
使用API来获取HTML文件所有的DOM节点，并一一检查，具体可以使用函数document.getElementsByTagName(‘*’)来获取HTML文件所有的节点；
步骤602，过滤掉HTML文件中以非框架形式输出的节点；
上述所有的节点包括head中的节点和根节点html，为避免进一步筛选的麻烦，使用函数document.body.querySelectorAll(‘*’)来获取body下的节点，滤除各非框架形式输出的节点，这样筛选工作就会比较少。
在获取body下的节点后，根据节点类型对节点进一步筛选，滤除各非框架形式输出的节点，如滤除script、音频audio、object、embed等少数没有渲染效果的标签节点。
步骤603，预先创建占用单位区域的灰度图片；
定义FADE_COLOR为骨架屏灰色调的色值，并创建一张宽高各为一像素，以FADE_COLOR填充的图片，为避免不必要的http请求，可以转换为base64格式，设为FADE_IMG。
步骤604，对经过上述滤除后得到的节点进行遍历，每遍历到一个新的节点时，执行步骤605；
步骤605，判断该节点是否为图片节点，若是，执行步骤606a，否则，执行步骤606b；
步骤606a，如果遍历到的新节点P为图片节点，获取该图片尺寸并赋值给预先创建的灰色图片，再覆盖其图片显示内容；
具体可以先来测量图片节点的当前尺寸，因为往往该节点的渲染尺寸取决于图片的真实尺寸，而真实尺寸几乎肯定与FADE_IMG不同。通过宽度P.width和高度P.height两个元素值，即可获取当前图片节点的尺寸，然后通过JavaScript修改CSS，重复设置该尺寸：
P.style.width＝P.width；
P.style.height＝P.height；
再利用灰度图片来覆盖其图片显示内容：
P.src＝FADE_IMG；
步骤606b，如果遍历到的新节点P不是图片节点，判断该节点的属性节点是否有背景图、边框、轮廓线和阴影，如为背景图，执行步骤607a，若为背景色，执行步骤607b，若为边框、轮廓线或阴影，执行步骤607c，若都不是，执行步骤608；
步骤607a，如果节点有背景图，将背景图修改为灰色框图；
该步骤与图片节点的修改非常类似，区别在于背景图的图片内容由CSS控制，而图片节点则是由HTML标签属性控制。通过window.getComputedStyle原生方法可以获取该节点的backgroundImage样式，如果其值不为“none”，则存在背景图，应以FADE_IMG覆盖，同时还要以重复的方式布局，以填充整个节点：
P.style.backgroundImage＝“url(“+FADE_IMG+”)repeat”；
当然，也可以移除背景图片，而直接以背景色填充：
P.style.background＝FADE_COLOR；
步骤607b，如果该节点的属性为背景色，将背景色修改为灰色；
同样以window.getComputedStyle方法来获取节点的backgroundColor样式，如果其值不为“rgba(0,0,0,0)”，则存在背景色。
因此，可以同时判断是否存在背景色或背景图片，只要满足任意条件，即可设置：
P.style.background＝FADE_COLOR；
步骤607c，如果节点属性为边框、轮廓线或阴影，将边框、轮廓线和阴影均修改为灰色框；
边框、轮廓线和阴影都可以设置颜色，但只有在有宽度值的时候颜色才有意义，因此无需判断当前的颜色取值，直接强制设置FADE_COLOR，其中阴影在骨架屏中可有可无，所以也可以直接删除：
P.style.borderColor＝FADE_COLOR；
P.style.outlineColor＝FADE_COLOR；
P.style.boxShadow＝“none”；
P.style.textShadow＝“none”；
步骤608，判断该节点是否有文本节点，若是，执行步骤609，否则，执行步骤610；
步骤609，如果节点有文本节点，将文本节点修改为灰色框；
一般来说，如果一个元素内部存在文本节点，就可以认为只有文本节点或者其他行内元素，可以将文字颜色设成透明，并以FADE_COLOR填充背景。
先获取节点P的所有子字节(子元素P.childNodes)，这里面可能存在文本节点。遍历，对于任意一个子节点Q，判断其节点类型Q.nodeType是否等于表示文本类型的指示值3，如等于3，则进行如下操作：
P.style.color＝“transparent”；
P.style.background＝FADE_COLOR；
步骤610，如果节点无文本节点，判断是否遍历完所有节点，若是，结束，否则，继续遍历下一个节点，返回执行步骤605。
步骤504，将预发布环境中取出的HTML文件填入离线的源网页HTML文件，得到打包在一起的骨架屏HTML文件和源网页HTML文件；替换从而得到与源网页对应的骨架屏内容描述文件；
步骤505，将打包在一起的骨架屏HTML文件和源网页HTML文件，发送到运行环境中对应的服务器。
peppeteer这类工具提供从页面上下文环境返回信息到node.js上下文环境的能力。在页面上下文中，可以通过document.body.innerHTML获取HTML标签文本，其中大多数元素上都已经携带了样式覆盖代码，如<p style＝”color:transparent；background:#f1f1f1”></p>。
接下来使用node.js的文件读写模块，修改HTML文件中body标签内部的内容即可，这属于简单的字符串替换，不再冗述。
如图7所示，为本公开实施例执行上述流程得到骨架屏示意图，可见，除了基本的轮廓线之外，其它所有信息就以灰色替代，其中包括：
1、文字消失，代之以灰色填充；
2、图片消失，代之以灰色填充；
3、边框色彩消失，代之以灰色；
实施例2
本公开实施例提供一种网页数据加载方法，如图8，包括：
步骤801，响应于网页加载指令，获取内容描述文件，所述内容描述文件为预先在虚拟浏览器执行源网页加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件后，将所述源网页内容描述文件和骨架屏内容描述文件进行打包得到的文件；
步骤802，加载所述骨架屏内容描述文件输出骨架屏，并同时下载获得所述源网页对应的脚本语言和内容样式文件；
步骤803，利用所述脚本语言按所述内容样式文件，加载所述源网页内容描述文件输出源网页。
可选地，所述骨架屏内容描述文件包括骨架屏不同框架部分对应的第一节点，所述源网页内容描述文件包括源网页不同内容部分对应的第二节点；
其中，所述第一节点包括在虚拟浏览器加载源网页时，加载并解析所述源网页内容描述文件中各第二节点，通过修改各第二节点，将各第二节点对应的源网页内容部分转换为对应的骨架屏框架部分，所得到的节点。
可选地，所述修改各第二节点包括对以非框架形式输出的第二节点的滤除，和/或对以框架形式输出的第二节点对应的框架部分以灰色色度的填充。
可选地，所述骨架屏内容描述文件中的第一节点包括如下至少一种：
确定解析出的第二节点为图片形式的父节点时，将所述父节点以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，并遍历所述父节点的子节点后，将文字形式的子节点以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括背景图，将所述背景图以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括边框时，将所述边框以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括轮廓线时，将所述轮廓线所在的区域以灰色色度填充后对应的节点。
可选地，所述第一节点为所述源网页对应的脚本语言运行过程，通过对修改各第二节点，将各第二节点对应的源网页内容转换为对应的骨架屏部分，所得到的节点。
可选地，所述在虚拟浏览器加载源网页时，首先在虚拟浏览器上加载并运行所述源网页对应的脚本语言；利用所述脚本语言按所述源网页对应的内容样式文件，加载并解析所述源网页内容描述文件中的第二节点。
可选地，所述对以框架形式输出的第二节点对应的框架部分以灰色色度的填充，包括：
预先创建占用单位区域的灰度图片；
通过调整所述灰度图片与第二节点对应的框架部分尺寸相适配，并覆盖所述第二节点对应的框架部分。
可选地，所述骨架屏内容描述文件为通过在虚拟浏览器完成第二节点的修改后并输出，根据输出的第一节点，对源网页内容描述文件中的对应第二节点进行替换后得到的文件。
本公开还提供一种网页数据处理方法，流程如图9，,包括：
步骤901，在虚拟浏览器执行源网页的加载；
步骤902，加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件；
步骤903，将所述源网页内容描述文件和骨架屏内容描述文件进行打包，得到内容描述文件。
所述将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件，包括：
加载过程中解析所述源网页内容描述文件描述的源网页不同内容部分对应的第二节点；
通过修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点。
可选地，所述修改所述第二节点，包括：
滤除以非框架形式输出的第二节点；和/或
对以框架形式输出的第二节点对应的框架部分，以灰色色度填充。
可选地，所述修改所述第二节点，包括如下至少一个步骤：
确定解析出的第二节点为图片形式的父节点时，将所述父节点以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，遍历所述父节点的子节点后，将文字形式的子节点以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括背景图，将所述背景图以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括边框时，将所述边框以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括轮廓线时，将所述轮廓线所在的区域以灰色色度填充。
可选地，所述通过修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点，包括：
在所述源网页对应的脚本语言运行过程中，修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点。
可选地，所述在虚拟浏览器执行源网页的加载，包括：
在虚拟浏览器上加载并运行所述源网页对应的脚本语言；
利用所述脚本语言按所述源网页对应的内容样式文件，加载并解析所述源网页内容描述文件中的第二节点。
可选地，所述对以框架形式输出的第二节点对应的框架部分，以灰色色度填充，包括：
预先创建占用单位区域的灰度图片；
通过调整所述灰度图片与第二节点对应的框架部分尺寸相适配，并覆盖所述第二节点对应的框架部分。
可选地，得到骨架屏的框架部分所对应的第一节点之后，还包括：
根据输出的第一节点，对源网页内容描述文件中的对应第二节点进行替换后得到的骨架屏内容描述文件。
关于上述实施例中的方法的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
实施例3
本公开提供一种网页数据处理装置，如图10，包括：
内容描述文件获取模块1001，用于响应于网页加载指令，获取内容描述文件，所述内容描述文件为预先在虚拟浏览器执行源网页加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件后，将所述源网页内容描述文件和骨架屏内容描述文件进行打包得到的文件；
骨架屏加载模块1002，用于加载所述骨架屏内容描述文件输出骨架屏，并同时下载获得所述源网页对应的脚本语言和内容样式文件；
源网页输出模块1003，用于利用所述脚本语言按所述内容样式文件，加载所述源网页内容描述文件输出源网页。
可选地，所述骨架屏内容描述文件包括骨架屏不同框架部分对应的第一节点，所述源网页内容描述文件包括源网页不同内容部分对应的第二节点；
其中，所述第一节点包括在虚拟浏览器加载源网页时，加载并解析所述源网页内容描述文件中各第二节点，通过修改各第二节点，将各第二节点对应的源网页内容部分转换为对应的骨架屏框架部分，所得到的节点。
可选地，所述修改各第二节点包括对以非框架形式输出的第二节点的滤除，和/或对以框架形式输出的第二节点对应的框架部分以灰色色度的填充。
可选地，所述骨架屏内容描述文件中的第一节点包括如下至少一种：
确定解析出的第二节点为图片形式的父节点时，将所述父节点以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，并遍历所述父节点的子节点后，将文字形式的子节点以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括背景图，将所述背景图以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括边框时，将所述边框以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括轮廓线时，将所述轮廓线所在的区域以灰色色度填充后对应的节点。
可选地，所述第一节点为所述源网页对应的脚本语言运行过程，通过对修改各第二节点，将各第二节点对应的源网页内容转换为对应的骨架屏部分，所得到的节点。
可选地，所述在虚拟浏览器加载源网页时，首先在虚拟浏览器上加载并运行所述源网页对应的脚本语言；利用所述脚本语言按所述源网页对应的内容样式文件，加载并解析所述源网页内容描述文件中的第二节点。
可选地，所述对以框架形式输出的第二节点对应的框架部分以灰色色度的填充，包括：
预先创建占用单位区域的灰度图片；
通过调整所述灰度图片与第二节点对应的框架部分尺寸相适配，并覆盖所述第二节点对应的框架部分。
可选地，所述骨架屏内容描述文件为通过在虚拟浏览器完成第二节点的修改后并输出，根据输出的第一节点，对源网页内容描述文件中的对应第二节点进行替换后得到的文件。
本公开还提供一种网页数据处理装置，如图11，该装置包括：
源网页加载模块1101，用于在虚拟浏览器执行源网页的加载；
骨架屏文件生成模块1102，用于加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件；
内容文件生成模块1103，用于将所述源网页内容描述文件和骨架屏内容描述文件进行打包，得到内容描述文件。
所述骨架屏文件生成模块将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件，包括：
加载过程中解析所述源网页内容描述文件描述的源网页不同内容部分对应的第二节点；
通过修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点。
可选地，所述骨架屏文件生成模块修改所述第二节点，包括：
滤除以非框架形式输出的第二节点；和/或
对以框架形式输出的第二节点对应的框架部分，以灰色色度填充。
可选地，所述骨架屏文件生成模块修改所述第二节点，包括如下至少一个步骤：
确定解析出的第二节点为图片形式的父节点时，将所述父节点以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，遍历所述父节点的子节点后，将文字形式的子节点以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括背景图，将所述背景图以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括边框时，将所述边框以灰色色度填充；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括轮廓线时，将所述轮廓线所在的区域以灰色色度填充。
可选地，所述骨架屏文件生成模块通过修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点，包括：
在所述源网页对应的脚本语言运行过程中，修改所述第二节点，将所述第二节点从源网页样式转换为骨架屏样式，得到骨架屏的框架部分所对应的第一节点。
可选地，所述源网页加载模块在虚拟浏览器执行源网页的加载，包括：
在虚拟浏览器上加载并运行所述源网页对应的脚本语言；
利用所述脚本语言按所述源网页对应的内容样式文件，加载并解析所述源网页内容描述文件中的第二节点。
可选地，所述骨架屏文件生成模块对以框架形式输出的第二节点对应的框架部分，以灰色色度填充，包括：
预先创建占用单位区域的灰度图片；
通过调整所述灰度图片与第二节点对应的框架部分尺寸相适配，并覆盖所述第二节点对应的框架部分。
可选地，所述骨架屏文件生成模块得到骨架屏的框架部分所对应的第一节点之后，还用于：
根据输出的第一节点，对源网页内容描述文件中的对应第二节点进行替换后得到的骨架屏内容描述文件。
关于上述实施例中的装置，其中所有模块执行的方法具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
实施例5
本公开提供一种电子设备1200的框图，如图12，该电子设备包括：
处理器1201；用于存储所述处理器1201可执行指令的存储器1202。
本公开实施例揭示的流程，可以应用于处理器1201中，或者由处理器1201实现。在实现过程中，信号处理流程的各步骤可以通过处理器1201中的硬件的集成逻辑电路或者软件形式的指令完成。处理器1201可以是通用处理器、数字信号处理器、专用集成电路、现场可编程门阵列或者其它可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件，可以实现或者执行本公开实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本公开实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器1202，处理器1201读取存储器1202中的信息，结合其硬件完成信号处理流程的步骤。
其中，所述处理器1201被配置为执行所述指令，以实现执行本公开实施例2提供的网页数据加载方法的步骤。
本公开还提供一种电子设备1300的框图，如图13，该电子设备包括：
处理器1301；
用于存储所述处理器1301可执行指令的存储器1302。
本公开实施例揭示的流程，可以应用于处理器1301中，或者由处理器1301实现。在实现过程中，信号处理流程的各步骤可以通过处理器1301中的硬件的集成逻辑电路或者软件形式的指令完成。处理器1301可以是通用处理器、数字信号处理器、专用集成电路、现场可编程门阵列或者其它可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件，可以实现或者执行本公开实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本公开实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器1302，处理器1301读取存储器1302中的信息，结合其硬件完成信号处理流程的步骤。
其中，所述处理器1301被配置为执行所述指令，以实现执行本公开实施例2提供的网页数据处理方法的步骤。
关于上述实施例中的电子设备，其中处理器执行的方法具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
在示例性实施例中，还提供了一种包括指令的非易失性存储介质，例如包括指令的存储器，上述指令可由电子设备的处理器执行以完成上述方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
本公开实施例还提供一种计算机程序产品，当所述计算机程序产品在电子设备上运行时，使得所述电子设备执行实现本公开实施例上述任意一项信息推荐方法或任意一项信息推荐方法任一可能涉及的方法。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种网页数据加载方法，其特征在于，包括：
响应于网页加载指令，获取内容描述文件，所述内容描述文件为预先在虚拟浏览器执行源网页加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件后，将所述源网页内容描述文件和骨架屏内容描述文件进行打包得到的文件；
加载所述骨架屏内容描述文件输出骨架屏，并同时下载获得所述源网页对应的脚本语言和内容样式文件；
利用所述脚本语言按所述内容样式文件，加载所述源网页内容描述文件输出源网页。
2.根据权利要求1所述的方法，其特征在于，
所述骨架屏内容描述文件包括骨架屏不同框架部分对应的第一节点，所述源网页内容描述文件包括源网页不同内容部分对应的第二节点；
其中，所述第一节点包括在虚拟浏览器加载源网页时，加载并解析所述源网页内容描述文件中各第二节点，通过修改各第二节点，将各第二节点对应的源网页内容部分转换为对应的骨架屏框架部分，所得到的节点。
3.根据权利要求2所述的方法，其特征在于，所述修改各第二节点包括对以非框架形式输出的第二节点的滤除，和/或对以框架形式输出的第二节点对应的框架部分以灰色色度的填充。
4.根据权利要求2所述的方法，其特征在于，所述骨架屏内容描述文件中的第一节点包括如下至少一种：
确定解析出的第二节点为图片形式的父节点时，将所述父节点以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，并遍历所述父节点的子节点后，将文字形式的子节点以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括背景图，将所述背景图以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括边框时，将所述边框以灰色色度填充后对应的节点；
确定解析出的第二节点为非图片形式的父节点时，且所述父节点的属性节点包括轮廓线时，将所述轮廓线所在的区域以灰色色度填充后对应的节点。
5.根据权利要求2所述的方法，其特征在于，所述第一节点为所述源网页对应的脚本语言运行过程，通过对修改各第二节点，将各第二节点对应的源网页内容转换为对应的骨架屏部分，所得到的节点。
6.根据权利要求2所述的方法，其特征在于，所述在虚拟浏览器加载源网页时，首先在虚拟浏览器上加载并运行所述源网页对应的脚本语言；利用所述脚本语言按所述源网页对应的内容样式文件，加载并解析所述源网页内容描述文件中的第二节点。
7.一种网页数据处理方法，其特征在于，
在虚拟浏览器执行源网页的加载；
加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件；
将所述源网页内容描述文件和骨架屏内容描述文件进行打包，得到内容描述文件。
8.一种网页数据加载装置，其特征在于，包括：
内容描述文件获取模块，用于响应于网页加载指令，获取内容描述文件，所述内容描述文件为预先在虚拟浏览器执行源网页加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件后，将所述源网页内容描述文件和骨架屏内容描述文件进行打包得到的文件；
骨架屏加载模块，用于加载所述骨架屏内容描述文件输出骨架屏，并同时下载获得所述源网页对应的脚本语言和内容样式文件；
源网页加载模块，用于利用所述脚本语言按所述内容样式文件，加载所述源网页内容描述文件输出源网页。
9.一种网页数据处理装置，其特征在于，包括：
源网页加载模块，用于在虚拟浏览器执行源网页的加载；
骨架屏文件生成模块，用于加载过程中，将源网页内容描述文件描述的源网页样式转换为骨架屏样式，生成对应的骨架屏内容描述文件；
内容文件生成模块，用于将所述源网页内容描述文件和骨架屏内容描述文件进行打包，得到内容描述文件。
10.一种电子设备，其特征在于，包括：存储器和处理器；
其中，所述存储器用于存储所述处理器可执行指令的存储器；
所述处理器用于读取所述存储器中的程序并执行实现如权利要求1～6任一所述的网页数据加载方法，或者执行实现如权利要求7所述的网页数据加载方法。
CN202011139372.4A 2020-10-22 2020-10-22 网页数据加载和处理方法、装置、电子设备及存储介质 Pending CN112307385A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011139372.4A CN112307385A (zh) 2020-10-22 2020-10-22 网页数据加载和处理方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011139372.4A CN112307385A (zh) 2020-10-22 2020-10-22 网页数据加载和处理方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
CN112307385A true CN112307385A (zh) 2021-02-02

Family

ID=74328575

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011139372.4A Pending CN112307385A (zh) 2020-10-22 2020-10-22 网页数据加载和处理方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN112307385A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112905280A (zh) * 2021-02-07 2021-06-04 腾竞体育文化发展(上海)有限公司 页面显示方法、装置、设备及存储介质
CN113569177A (zh) * 2021-07-16 2021-10-29 上海淇玥信息技术有限公司 一种跳转网页优化的方法、装置及电子设备

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130073946A1 (en) * 2011-09-21 2013-03-21 Mstar Semiconductor, Inc. Method and apparatus for loading webpage content of webkit browser
CN110187913A (zh) * 2019-05-17 2019-08-30 北京百度网讯科技有限公司 小程序的发布、运行方法和装置
CN111124574A (zh) * 2019-12-18 2020-05-08 南京三百云信息科技有限公司 首屏渲染加速方法、开发端、服务器、系统和电子设备
CN111552473A (zh) * 2020-04-27 2020-08-18 腾讯科技（深圳）有限公司 一种应用程序的处理方法、装置及设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130073946A1 (en) * 2011-09-21 2013-03-21 Mstar Semiconductor, Inc. Method and apparatus for loading webpage content of webkit browser
CN110187913A (zh) * 2019-05-17 2019-08-30 北京百度网讯科技有限公司 小程序的发布、运行方法和装置
CN111124574A (zh) * 2019-12-18 2020-05-08 南京三百云信息科技有限公司 首屏渲染加速方法、开发端、服务器、系统和电子设备
CN111552473A (zh) * 2020-04-27 2020-08-18 腾讯科技（深圳）有限公司 一种应用程序的处理方法、装置及设备

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
郭慧敏: "基于携程旅行APP特卖汇项目的前端优化设计与实现", 中国优秀硕士学位论文全文数据库 信息科技辑 *
马蜂窝技术: "对开发更友好的前端骨架屏自动生成方案", Retrieved from the Internet <URL:https://www.163.com/dy/article/EOBICN6J05389MSH.html> *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112905280A (zh) * 2021-02-07 2021-06-04 腾竞体育文化发展(上海)有限公司 页面显示方法、装置、设备及存储介质
CN112905280B (zh) * 2021-02-07 2023-12-15 腾竞体育文化发展(上海)有限公司 页面显示方法、装置、设备及存储介质
CN113569177A (zh) * 2021-07-16 2021-10-29 上海淇玥信息技术有限公司 一种跳转网页优化的方法、装置及电子设备

Similar Documents

Publication Publication Date Title
JP6629848B2 (ja) モバイルアプリ用ページ処理
KR101824222B1 (ko) 동적 컨텐츠 및 스테일 컨텐츠를 포함하는 웹사이트들의 고속 렌더링
CN107885848B (zh) 基于web技术的网页截屏方法
US9158745B2 (en) Optimization of media content using generated intermediate media content
US8990289B2 (en) Server based framework for improving Ajax performance
CN109491744A (zh) 一种网页截图系统和方法
US8682964B1 (en) Progressively loading network content
KR20150079867A (ko) Html5-프로토콜 기반 웹페이지 표시 방법 및 장치
US20090085921A1 (en) Populate Web-Based Content Based on Space Availability
CN110516186A (zh) 页面骨架自动化生成方法、设备、存储介质及装置
US9679075B1 (en) Efficient delivery of animated image files
CN112307385A (zh) 网页数据加载和处理方法、装置、电子设备及存储介质
US20150317405A1 (en) Web Page Variation
US20230334113A1 (en) Image processing method and apparatus, and computer readable storage medium
WO2019080796A1 (zh) web系统的前后端分离方法、装置、设备及存储介质
JP2006331142A (ja) 情報提供システム、情報提供方法等
CN109683978A (zh) 一种流式布局界面渲染的方法、装置以及电子设备
CN113536179A (zh) 页面的生成方法、装置、电子设备和存储介质
CN114791988A (zh) 一种基于浏览器的pdf文件解析方法、系统、存储介质
JP2009289206A (ja) ユニフォームリソースロケータ情報を書き換えるプログラム
CN114756228A (zh) 页面处理方法、装置、设备及存储介质
US10997261B2 (en) System and method that facilitate display responsive message rendering on client device
CN116578795A (zh) 网页页面的生成方法及装置、存储介质、电子设备
CN115474074B (zh) 一种视频背景替换方法、装置、计算设备和存储介质
CN115659087A (zh) 页面渲染方法、系统、设备、存储介质及程序产品

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination