CN113076504B - 骨架屏生成方法、装置、设备、存储介质 - Google Patents

Abstract

本公开关于一种网页的骨架屏生成方法、装置、电子设备、存储介质，其中方法包括：获取网页的骨架屏的配置文件，所述配置文件包含终端中的静态文件路径；在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序；基于所述静态文件应用程序对所述网页的网页数据进行渲染；当所述网页数据渲染完毕时，将骨架屏生成脚本注入到所述终端的浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏。本公开避免了利用专用的插件生成网页的骨架屏，降低了网页开发者的专业技能要求，通过配置文件和骨架屏生成脚本即可简单地生成网页的骨架屏。

Description

骨架屏生成方法、装置、设备、存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种网页的骨架屏生成方法、装置、电子设备、计算机可读存储介质。

背景技术

在用户访问网页时，受网络环境的影响，可能较长时间无法获得网页的网页数据，导致浏览器只能展示空白网页或者展示部分网页内容。为了解决上述问题，在获取网页的网页数据之前，在网页中展示网页的骨架屏，该骨架屏表示网页的大致轮廓。

相关技术中，网页的骨架屏的生成方案通常依赖专用的插件，导致网页开发者需要具备该专用的插件的相关技术，对网页开发者的专业技能要求较高，网页的骨架屏的生成难度较高。

发明内容

本公开提供了一种网页的骨架屏的生成方法、装置、电子设备、计算机可读存储介质，以至少解决相关技术中对网页开发者的专业技能要求较高，网页的骨架屏的生成难度较高的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供了一种网页的骨架屏生成方法，包括：获取网页的骨架屏的配置文件，所述配置文件包含终端中的静态文件路径；在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序；基于所述静态文件应用程序对所述网页的网页数据进行渲染；当所述网页数据渲染完毕时，将骨架屏生成脚本注入到所述终端的浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏。

可选地，在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序之后，所述方法还包括：从所述配置文件中读取出所述网页的路径；根据所述网页的路径和所述终端的IP生成所述网页的本地网络地址。

可选地，所述基于所述静态文件应用程序对所述网页的网页数据进行渲染，包括：基于所述静态文件应用程序访问所述网页的本地网络地址，并将所述网页数据在所述网页中渲染。

可选地，所述当所述网页数据渲染完毕时，将骨架屏生成脚本注入到所述终端的浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏，包括：从所述配置文件中读取出目标元素和等待时间段；当所述网页中加载所述目标元素，且从加载所述目标元素开始，经过所述等待时间段时，将所述骨架屏生成脚本注入到所述浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏。

可选地，在所述网页数据渲染完毕之后，所述方法还包括：对所述网页进行截图得到网页效果图。

可选地，在所述得到所述网页的骨架屏之后，所述方法还包括：对所述骨架屏进行截图得到骨架屏效果图。

可选地，所述方法还包括：将所述配置文件、所述网页效果图和所述骨架屏效果图上传至与所述终端通信连接的服务器，以便在所述服务器中对所述配置文件进行修改，对所述网页效果图和所述骨架屏效果图进行预览。

可选地，所述得到所述网页的骨架屏之后，所述方法还包括：在所述浏览器中运行HTML获取脚本，以便获取所述骨架屏的HTML。

可选地，所述方法还包括：从所述配置文件中读取出所述网页的HTML路径；根据所述HTML路径获取所述网页的HTML；将所述网页的HTML中的替换标记位替换为所述骨架屏的HTML。

可选地，在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序之前，所述方法还包括：从所述配置文件中读取出项目标识；根据所述项目标识获取cookie内容；将所述cookie内容注入到所述网页的网页数据请求中；根据注入所述cookie内容的网页数据请求获取所述网页数据。

可选地，在所述根据所述项目标识获取cookie内容之前，所述方法还包括：根据所述项目标识调用网络请求接口进行cookie校验；所述根据所述项目标识获取cookie内容，包括：当cookie校验通过时，根据所述项目标识获取所述cookie内容。

可选地，在将所述cookie内容注入到所述网页的网页数据请求中时，所述方法还包括：从所述配置文件中读取出代理网络接口的路径和目标网络地址；将所述代理网络接口的路径转发到所述目标网络地址。

根据本公开实施例的第二方面，提供了一种网页的骨架屏生成装置，包括：获取单元，被配置为执行获取网页的骨架屏的配置文件，所述配置文件包含终端中的静态文件路径；初始化单元，被配置为执行在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序；渲染单元，被配置为执行基于所述静态文件应用程序对所述网页的网页数据进行渲染；生成单元，被配置为执行当所述网页数据渲染完毕时，将骨架屏生成脚本注入到所述终端的浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏。

可选地，所述装置还包括：路径读取单元，被配置为执行在所述初始化单元在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序之后，从所述配置文件中读取出所述网页的路径；本地网络地址生成单元，被配置为执行根据所述网页的路径和所述终端的IP生成所述网页的本地网络地址。

可选地，所述渲染单元，被配置为执行基于所述静态文件应用程序访问所述网页的本地网络地址，并将所述网页数据在所述网页中渲染。

可选地，所述生成单元，包括：元素时间读取单元，被配置为执行从所述配置文件中读取出目标元素和等待时间段；脚本执行单元，被配置为执行当所述网页中加载所述目标元素，且从加载所述目标元素开始，经过所述等待时间段时，将所述骨架屏生成脚本注入到所述浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏。

可选地，所述装置还包括：截图单元，被配置为执行在所述网页数据渲染完毕之后，对所述网页进行截图得到网页效果图。

可选地，所述截图单元，还被配置为执行对所述骨架屏进行截图得到骨架屏效果图。

可选地，所述装置还包括：上传单元，被配置为执行将所述配置文件、所述网页效果图和所述骨架屏效果图上传至与所述终端通信连接的服务器，以便在所述服务器中对所述配置文件进行修改，对所述网页效果图和所述骨架屏效果图进行预览。

可选地，所述装置还包括：HTML获取单元，被配置为执行在所述浏览器中运行HTML获取脚本，以便获取所述骨架屏的HTML。

可选地，所述路径读取单元，还被配置为执行从所述配置文件中读取出所述网页的HTML路径；所述HTML获取单元，还被配置为执行根据所述HTML路径获取所述网页的HTML；所述装置还包括：HTML替换单元，被配置为执行将所述网页的HTML中的替换标记位替换为所述骨架屏的HTML。

可选地，所述装置还包括：项目标识读取单元，被配置为执行在所述初始化单元在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序之前，从所述配置文件中读取出项目标识；Cookie获取单元，被配置为执行根据所述项目标识获取cookie内容；Cookie注入单元，被配置为执行将所述cookie内容注入到所述网页的网页数据请求中；网页数据获取单元，被配置为执行根据注入所述cookie内容的网页数据请求获取所述网页数据。

可选地，所述装置还包括：Cookie检验单元，被配置为执行在所述Cookie获取单元根据所述项目标识获取cookie内容之前，根据所述项目标识调用网络请求接口进行cookie校验；所述Cookie获取单元，被配置为执行当cookie校验通过时，根据所述项目标识获取所述cookie内容。

可选地，所述路径读取单元，还被配置为执行在所述Cookie注入单元将所述cookie内容注入到所述网页的网页数据请求中时，从所述配置文件中读取出代理网络接口的路径和目标网络地址；所述装置还包括：路径转发单元，被配置为执行将所述代理网络接口的路径转发到所述目标网络地址。

根据本公开实施例的第三方面，提供了一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现如第一方面所述的网页的骨架屏生成方法。

根据本公开实施例的第四方面，提供了一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如第一方面所述的网页的骨架屏生成方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

本公开的实施例提供的网页的骨架屏生成方案，获取网页的骨架屏的配置文件，该配置文件中包含终端中的静态文件路径，在终端中与静态文件路径对应的位置处初始化静态文件应用程序，基于静态文件应用程序对网页的网页数据进行渲染。也就是说，在终端本地利用静态文件应用程序访问终端本地的HTML（Hyper Text Markup Language，超文本标记语言）、CSS（Cascading Style Sheets，层叠样式表）和JS（JavaScript，一种编程语言）等静态文件。当网页数据渲染完毕时，将骨架屏生成脚本注入到终端的浏览器中，并在浏览器中运行骨架屏生成脚本得到网页的骨架屏。本公开的实施例避免了利用专用的插件生成网页的骨架屏，降低了网页开发者的专业技能要求，通过配置文件和骨架屏生成脚本即可简单地生成网页的骨架屏。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种网页的骨架屏生成方法的流程图。

图2是根据一示例性实施例示出的一种基于骨架屏生成工具的骨架屏生成方案流程示意图。

图3是根据一示例性实施例示出的配置文件的代码示意图。

图4是根据一示例性实施例示出的网页效果图。

图5是根据一示例性实施例示出的骨架屏效果图。

图6是根据一示例性实施例示出的后台服务针对cookie的功能的界面示意图。

图7是根据一示例性实施例示出的网页项目中待生成骨架屏的网页的示意图。

图8是根据一示例性实施例示出的一种网页的骨架屏生成装置的框图。

图9是根据一示例性实施例示出的一种网页的骨架屏生成设备的框图。

图10是根据一示例性实施例示出的一种用于生成网页的骨架屏的电子设备的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

图1是根据一示例性实施例示出的一种网页的骨架屏生成方法的流程图，如图1所示，该网页的骨架屏生成方法应用于终端中。

图1所示的网页的骨架屏生成方法具体包括以下步骤。

在步骤S11中，获取网页的骨架屏的配置文件。

在本公开的实施例中，网页开发者预先设置网页的骨架屏的配置文件。该配置文件包含但不限于：项目标识、网页列表和代理配置信息等。其中，项目标识用于获取cookie（浏览器访问网站的数据一个凭证，只有拥有网站有效合法的cookie才能正常的访问网页）。网页列表表示需要生成骨架屏的网页。代理配置信息表示网络接口转发网页数据的相关信息。除此之外，配置文件还包含终端中的静态文件路径。该静态文件路径表示静态文件在终端本地的存储位置。静态文件通常指不是由服务器生成的文件，如CSS、HTML、JS、图片等文件。

在步骤S12中，在终端中与静态文件路径对应的位置处初始化静态文件应用程序。

在本公开的实施例中，静态文件应用程序理解为待生成骨架屏的网页的运行环境。在实际应用中，将静态文件路径作为静态文件应用程序的根目录，在根目录中启动静态文件应用程序，终端上的浏览器在终端本地访问网页。

在步骤S13中，基于静态文件应用程序对网页的网页数据进行渲染。

在本公开的实施例中，在终端本地基于静态文件应用程序访问HTML、CSS和JS等静态文件，以实现对网页数据的渲染。

在步骤S14中，当网页数据渲染完毕时，将骨架屏生成脚本注入到终端的浏览器中，并在浏览器中运行骨架屏生成脚本，得到网页的骨架屏。

在本公开的实施例中，若网页数据渲染完毕，将骨架屏生成脚本注入到浏览器中，以实现自动化生成网页的骨架屏。

本公开的实施例提供的网页的骨架屏生成方案，获取网页的骨架屏的配置文件，该配置文件中包含终端中的静态文件路径，在终端中与静态文件路径对应的位置处初始化静态文件应用程序，基于静态文件应用程序对网页的网页数据进行渲染。也就是说，在终端本地利用静态文件应用程序访问终端本地的HTML、CSS和JS等静态文件。当网页数据渲染完毕时，将骨架屏生成脚本注入到终端的浏览器中，并在浏览器中运行骨架屏生成脚本得到网页的骨架屏。本公开的实施例避免了利用专用的插件生成网页的骨架屏，降低了网页开发者的专业技能要求，通过配置文件和骨架屏生成脚本即可简单地生成网页的骨架屏。

在本公开的一种示例性实施例中，参照图2，图2示出了一种基于骨架屏生成工具的骨架屏生成方案流程示意图。网页开发者构建网页项目。该网页项目包含项目名称、HTML、CSS、JS等。

传入配置文件至骨架屏生成工具。执行shell（一种应用程序，这个应用程序提供了一个界面，用户通过这个界面访问操作系统内核的服务）脚本（如build-skeleton shell命令），以传入指定的配置文件至骨架屏生成工具。例如，执行build-skeleton shellconfig myConfig.js，表示将指定的配置文件myConfig.js传入到骨架屏生成工具中。如果执行shell脚本未传入指定的配置文件，则将shell脚本所在的目录下的配置文件skeleton.config.js传入到骨架屏生成工具。

根据骨架屏生成工具读取配置文件中的内容。配置文件中的内容包含但不限于：项目标识、代理网络接口的路径、目标网络地址、网页的HTML路径、目标元素、等待时间段、网页的路径等等。在实际应用中，根据骨架屏生成工具读取配置文件中的项目标识（如projectName）。根据项目标识调用网络请求接口进行cookie校验，若cookie校验通过，则根据项目标识获取cookie内容；若cookie校验不通过，则提醒网页开发者更新cookie。

若cookie校验通过，还根据骨架屏生成工具读取出配置文件中的静态文件路径，以静态文件路径为根路径启动一个本地的静态文件应用程序。并根据骨架屏生成工具读取出配置文件中的代理网络接口的路径和目标网络地址，进而使用http-proxy-middleware（一个用于代理转发网络请求的node库，利用这个库解决跨域请求的问题）将代理网络接口的路径转发到目标网络地址。同时，将获取到的cookie内容注入到网页数据请求中，根据注入cookie内容的网页数据请求获取网页数据。通常，代理网络接口对cookie内容进行鉴权，并在鉴权通过后返回网页数据。

本公开实施例在获取网页的网页数据时，在网页数据请求中注入项目标识对应的cookie内容，进而根据cookie内容判断是否允许获取网页数据。若cookie内容验证通过，则允许获取网页数据；若cookie内容验证未通过，则禁止获取网页数据。本公开实施例通过对网页数据请求中的cookie内容进行验证，根据验证结果确定是否获取网页数据，提升了获取网页数据的安全性。

本公开实施例在根据项目标识获取cookie内容之前，需要调用网络请求接口进行cookie校验，并在cookie校验通过的情况下根据项目标识获取cookie内容。本公开实施例在获取cookie内容之前增加了cookie校验的过程，提升了获取cookie内容的安全性。

本公开实施例的配置文件中包含代理网络接口的路径和目标网络地址。其中，代理网络接口用于对cookie内容进行鉴权，若cookie内容鉴权通过，则允许根据注入cookie内容的网页数据请求获取网页数据；若cookie内容鉴权未通过，则禁止根据注入cookie内容的网页数据请求获取网页数据。目标网络地址为用户指定的网络地址。本公开实施例将代理网络接口的路径转发到目标网络地址。本公开实施例将代理网络接口的路径转发到目标网络地址，在用户指定的网络地址，基于代理网络接口对cookie内容进行鉴权，提升了cookie内容鉴权的自由度。

在启动静态文件应用程序之后，骨架屏生成工具使用puppeteer（google chrome团队官方提供的一个无界面的chrome工具，它是一个node库，提供了一系列的api来控制chrome）的launch（启动）方法连接浏览器，从配置文件中读取出网页的路径，再调用puppeteer的newPage（新页面）方法打开一个页面，该页面用于加载完整的网页数据。浏览器访问本地IP即可访问静态文件应用程序。根据网页的路径和终端的IP生成网页的本地网络地址，然后再调用page.load（加载页面）加载本地网络地址。在基于静态文件应用程序对网页的网页数据进行渲染时，基于静态文件应用程序访问网页的本地网络地址，并将网页数据在网页中渲染。本公开的实施例通过配置文件中网页的路径和终端的IP生成网页的本地网络地址，实现了在终端本地即可加载完整的网页数据，避免在终端之外加载网页数据，提高了网页数据的加载速度。而且，基于静态文件应用程序访问网页的本地网络地址，将网页数据在终端本地的网页中进行渲染，提高了网页数据的渲染速度。

根据骨架屏生成工具从配置文件中读取出目标元素和等待时间段。当网页中加载目标元素，且从加载目标元素开始，经过等待时间段时，认为网页数据渲染完毕。在实际应用中，骨架屏生成工具调用页面的waitForSelector（等待选择）方法，该waitForSelector方法传入骨架屏生成工具一个元素选择器，该元素选择器用于获取网页数据中的网页元素。在元素选择器获取的网页元素为目标元素时，Puppeteer触发回调函数，该回调函数通知骨架屏生成工具网页中加载了目标元素。骨架屏生成工具从回调函数通知开始计时，若计时时间段为等待时间段，则认为网页数据渲染完毕。由于网页数据中包含大量的网页元素，若将全部的网页元素加载完毕作为网页数据渲染完毕的判断条件，需要等待较长时间。本公开实施例的配置文件中包含用于确定网页数据是否渲染完毕的目标元素和等待时间段。在确定网页数据是否渲染完毕时，需要满足两方面要求，一方面要求为元素选择器获取到目标元素；另一方面要求为从获取到目标元素开始计时，计时时间段达到等待时间段。本公开的实施例保证了网页数据渲染完毕时，既加载了需要的网页元素（目标元素），又维持了一段时间段，减少了网页数据渲染的等待时间，进而为后续注入骨架屏生成脚本至浏览器，运行骨架屏生成脚本得到骨架屏提供了两方面基础要求。

在网页数据渲染完毕之后，骨架屏生成工具调用screeshot（截取）方法对网页进行截图得到网页效果图，为后续在服务器中对网页效果图进行预览提供了基础。骨架屏生成工具再调用addScriptTag（添加脚本标签）方法将骨架屏生成脚本注入到浏览器中。本公开的实施例对骨架屏生成脚本的内容、来源等不做具体限制。骨架屏生成工具再调用evaluate（评估）方法在浏览器中运行骨架屏生成脚本，在骨架屏生成脚本运行完毕后，再调用screenshot方法对骨架屏进行截图得到骨架屏效果图，为后续在服务器中对骨架屏效果图进行预览提供了基础。

骨架屏生成工具将配置文件、网页效果图和骨架屏效果图上传至与终端通信连接的服务器，以便在服务器中对配置文件进行修改，和/或对网页效果图和骨架屏效果图进行预览。本公开实施例在服务器中根据实际需要对配置文件进行修改，以令配置文件满足骨架屏的生成需求。除此之外，还在服务器中对网页效果图和/或估计平效果图进行预览，以评估根据配置文件是否生成了满足要求的网页和/或骨架屏，若通过对网页效果图和/或估计平效果图进行预览，确定根据配置文件未生成满足要求的网页和/或骨架屏，则对配置文件进行修改。参照图3、图4和图5，其中，图3示出了配置文件的代码示意图。图4示出了网页效果图。图5示出了骨架屏效果图。

骨架屏生成工具调用evaluate方法在浏览器中运行HTML获取脚本，该HTML脚本通过浏览器的document.documentElement.outerHTML（一种获取HTML的方法）获取骨架屏的HTML。骨架屏生成工具再从配置文件中读取出网页的HTML路径，根据HTML路径获取网页的HTML，网页的HTML中存在替换标记位（如<！-skeleton-html-->），将网页的HTML中的替换标记位替换为骨架屏的HTML。本公开实施例在得到网页的骨架屏之后，运行浏览器中的HTML获取脚本，从而获取骨架屏的HTML，为后续将骨架屏HTML插入到网页的HTML做准备。本公开实施例中的配置文件还包含网页的HTML路径，在根据HTML路径获取网页的HTML之后，将网页的HTML中的替换标记位替换为骨架屏的HTML，从而实现网页的HTML包含网页的骨架屏的HTML，方便在根据网页的HTML加载网页数据时，直接从网页的HTML中提取处骨架屏的HTML，进而快速地根据骨架屏的HTML生成网页的骨架屏，提升了骨架屏的生成效率。

在本公开的一种示例性实施例中，终端中除了存在骨架屏生成工具，还运行有一个后台服务。该后台服务提供如下几种功能：针对cookie的功能，如添加cookie、获取cookie、检测cookie、更新cookie，上传骨架屏生成结果，对骨架屏生成结果进行预览，根据骨架屏生成结果编辑配置文件等。

参照图6，图6示出了后台服务针对cookie的功能的界面示意图。例如，针对项目名为“ks-fe-h5-creator-platform”的网页项目添加cookie，checkUrl为鉴权接口的地址。VaildKey表示鉴权接口返回的结果（result）。返回的结果用于cookie校验。检测cookie用于检测cookie是否合法。如果鉴权接口返回{code:1}表示鉴权成功，{code:2}表示鉴权失败，那么需要设置validKey为code，result为1。cookie由网页开发者根据实际情况设定。在实际应用中，添加cookie时设置的项目名与配置文件中的项目标识相同。由于cookie具有时效性，因此还对cookie进行更新。

参照图7，图7示出了网页项目中待生成骨架屏的网页的示意图。其中，项目名为ks-fe-h5-creator-platform。网页项目的创建时间为02-03 20：13。待生成骨架屏的网页利用route列表表示，“creator-center”和“task”为待生成骨架屏的网页的名称。

本公开的实施例利用骨架屏的配置文件，并通过简单的shell脚本即可生成网页的骨架屏，避免了开发者在网页调整之后手动调整骨架屏生成代码，降低了骨架屏的盛恒难度，减少了开发者的工作量。

图8是根据一示例性实施例示出的一种网页的骨架屏生成装置的框图。该装置应用于终端中，该装置具体包括如下单元。

获取单元81，被配置为执行获取网页的骨架屏的配置文件，所述配置文件包含所述终端中的静态文件路径；

初始化单元82，被配置为执行在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序；

渲染单元83，被配置为执行基于所述静态文件应用程序对所述网页的网页数据进行渲染；

生成单元84，被配置为执行当所述网页数据渲染完毕时，将骨架屏生成脚本注入到所述终端的浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏。

在本公开的一种示例性实施例中，所述装置还包括：

路径读取单元，被配置为执行在所述初始化单元82在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序之后，从所述配置文件中读取出所述网页的路径；

本地网络地址生成单元，被配置为执行根据所述网页的路径和所述终端的IP生成所述网页的本地网络地址。

在本公开的一种示例性实施例中，所述渲染单元83，被配置为执行基于所述静态文件应用程序访问所述网页的本地网络地址，并将所述网页数据在所述网页中渲染。

在本公开的一种示例性实施例中，所述生成单元84，包括：

元素时间读取单元，被配置为执行从所述配置文件中读取出目标元素和等待时间段；

脚本执行单元，被配置为执行当所述网页中加载所述目标元素，且从加载所述目标元素开始，经过所述等待时间段时，将所述骨架屏生成脚本注入到所述浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏。

在本公开的一种示例性实施例中，所述装置还包括：

截图单元，被配置为执行在所述网页数据渲染完毕之后，对所述网页进行截图得到网页效果图。

在本公开的一种示例性实施例中，所述截图单元，还被配置为执行对所述骨架屏进行截图得到骨架屏效果图。

在本公开的一种示例性实施例中，所述装置还包括：

上传单元，被配置为执行将所述配置文件、所述网页效果图和所述骨架屏效果图上传至与所述终端通信连接的服务器，以便在所述服务器中对所述配置文件进行修改，和/或对所述网页效果图和所述骨架屏效果图进行预览。

在本公开的一种示例性实施例中，所述装置还包括：

HTML获取单元，被配置为执行在所述浏览器中运行HTML获取脚本，以便获取所述骨架屏的HTML。

在本公开的一种示例性实施例中，所述路径读取单元，还被配置为执行从所述配置文件中读取出所述网页的HTML路径；

所述HTML获取单元，还被配置为执行根据所述HTML路径获取所述网页的HTML；

所述装置还包括：

HTML替换单元，被配置为执行将所述网页的HTML中的替换标记位替换为所述骨架屏的HTML。

在本公开的一种示例性实施例中，所述装置还包括：

项目标识读取单元，被配置为执行在所述初始化单元82在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序之前，从所述配置文件中读取出项目标识；

Cookie获取单元，被配置为执行根据所述项目标识获取cookie内容；

Cookie注入单元，被配置为执行将所述cookie内容注入到所述网页的网页数据请求中；

网页数据获取单元，被配置为执行根据注入所述cookie内容的网页数据请求获取所述网页数据。

在本公开的一种示例性实施例中，所述装置还包括：

Cookie检验单元，被配置为执行在所述Cookie获取单元根据所述项目标识获取cookie内容之前，根据所述项目标识调用网络请求接口进行cookie校验；

所述Cookie获取单元，被配置为执行当cookie校验通过时，根据所述项目标识获取所述cookie内容。

在本公开的一种示例性实施例中，所述路径读取单元，还被配置为执行在所述Cookie注入单元将所述cookie内容注入到所述网页的网页数据请求中时，从所述配置文件中读取出代理网络接口的路径和目标网络地址；

所述装置还包括：

路径转发单元，被配置为执行将所述代理网络接口的路径转发到所述目标网络地址。

关于上述实施例中的装置，其中各个单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图9是根据一示例性实施例示出的一种网页的骨架屏生成设备900的框图。例如，电子设备900是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图9，电子设备900包括以下一个或多个组件：处理组件902，存储器904，电力组件906，多媒体组件908，音频组件910，输入/输出（I/ O）的接口912，传感器组件914，以及通信组件916。

处理组件902通常控制电子设备900的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件902包括一个或多个处理器920来执行指令，以完成上述网页的骨架屏生成方法的全部或部分步骤。此外，处理组件902包括一个或多个模块，便于处理组件902和其他组件之间的交互。例如，处理组件902包括多媒体模块，以方便多媒体组件908和处理组件902之间的交互。

存储器904被配置为执行存储各种类型的数据以支持在电子设备900的操作。这些数据的示例包括用于在电子设备900上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图像，视频等。存储器904由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器（SRAM），电可擦除可编程只读存储器（EEPROM），可擦除可编程只读存储器（EPROM），可编程只读存储器（PROM），只读存储器（ROM），磁存储器，快闪存储器，磁盘或光盘。

电源组件906为电子设备900的各种组件提供电力。电源组件906包括电源管理系统，一个或多个电源，及其他与为电子设备900生成、管理和分配电力相关联的组件。

多媒体组件908包括在所述电子设备900和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕包括液晶显示器（LCD）和触摸面板（TP）。如果屏幕包括触摸面板，屏幕被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件908包括一个前置摄像头和/或后置摄像头。当电子设备900处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头接收外部的多媒体数据。每个前置摄像头和后置摄像头是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件910被配置为执行输出和/或输入音频信号。例如，音频组件910包括一个麦克风（MIC），当电子设备900处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为执行接收外部音频信号。所接收的音频信号被进一步存储在存储器904或经由通信组件916发送。在一些实施例中，音频组件910还包括一个扬声器，用于输出音频信号。

I/ O接口912为处理组件902和外围接口模块之间提供接口，上述外围接口模块是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件914包括一个或多个传感器，用于为电子设备900提供各个方面的状态评估。例如，传感器组件914检测到电子设备900的打开/关闭状态，组件的相对定位，例如所述组件为电子设备900的显示器和小键盘，传感器组件914还检测电子设备900或电子设备900一个组件的位置改变，用户与电子设备900接触的存在或不存在，电子设备900方位或加速/减速和电子设备900的温度变化。传感器组件914包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件914还包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件914还包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件916被配置为执行便于电子设备900和其他设备之间有线或无线方式的通信。电子设备900接入基于通信标准的无线网络，如WiFi，运营商网络（如2G、3G、4G或5G），或它们的组合。在一个示例性实施例中，通信组件916经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件916还包括近场通信（NFC）模块，以促进短程通信。例如，在NFC模块可基于射频识别（RFID）技术，红外数据协会（IrDA）技术，超宽带（UWB）技术，蓝牙（BT）技术和其他技术来实现。

在示例性实施例中，电子设备900被一个或多个应用专用集成电路（ASIC）、数字信号处理器（DSP）、数字信号处理设备（DSPD）、可编程逻辑器件（PLD）、现场可编程门阵列（FPGA）、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述网页的骨架屏生成方法。

在示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器904，上述指令可由电子设备900的处理器920执行以完成上述网页的骨架屏生成方法。可选地，计算机可读存储介质是ROM、随机存取存储器（RAM）、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供了一种计算机程序产品，该计算机程序产品包括计算机程序，该计算机程序可由电子设备900的处理器920执行以完成上述网页的骨架屏生成方法。可选地，该计算机程序存储在电子设备900的计算机可读存储介质中，该计算机可读存储介质是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质是ROM、随机存取存储器（RAM）、CD-ROM、磁带、软盘和光数据存储设备等。

图10是根据一示例性实施例示出的一种用于生成网页的骨架屏的电子设备1000的框图。例如，电子设备1000被提供为一服务器。参照图10，电子设备1000包括处理组件1022，其进一步包括一个或多个处理器，以及由存储器1032所代表的存储器资源，用于存储可由处理组件1022的执行的指令，例如应用程序。存储器1032中存储的应用程序包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件1022被配置为执行指令，以执行上述网页的骨架屏生成方法。

电子设备1000还包括一个电源组件1026被配置为执行电子设备1000的电源管理，一个有线或无线网络接口1050被配置为执行将电子设备1000连接到网络，和一个输入输出（I/O）接口1058。电子设备1000操作基于存储在存储器1032的操作系统，例如WindowsServerTM，Mac OS XTM，UnixTM，LinuxTM，FreeBSDTM或类似。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (22)

1.一种网页的骨架屏生成方法，其特征在于，包括：

获取网页的骨架屏的配置文件，所述配置文件包含终端中的静态文件路径和需要生成骨架屏的网页；

在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序，所述静态文件应用程序为待生成骨架屏的网页的运行环境，所述静态文件应用程序在以所述静态文件路径为根目录中启动；

基于所述静态文件应用程序对所述网页的网页数据进行渲染；

当所述网页数据渲染完毕时，将骨架屏生成脚本注入到所述终端的浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏，在所述浏览器中运行HTML获取脚本，以便获取所述骨架屏的HTML；

其中，所述当所述网页数据渲染完毕时，将骨架屏生成脚本注入到所述终端的浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏，包括：

从所述配置文件中读取出目标元素和等待时间段；

当所述网页中加载所述目标元素，且从加载所述目标元素开始，经过所述等待时间段时，将所述骨架屏生成脚本注入到所述浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏。

2.根据权利要求1所述的方法，其特征在于，在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序之后，所述方法还包括：

从所述配置文件中读取出所述网页的路径；

根据所述网页的路径和所述终端的IP生成所述网页的本地网络地址。

3.根据权利要求2所述的方法，其特征在于，所述基于所述静态文件应用程序对所述网页的网页数据进行渲染，包括：

基于所述静态文件应用程序访问所述网页的本地网络地址，并将所述网页数据在所述网页中渲染。

4.根据权利要求1所述的方法，其特征在于，在所述网页数据渲染完毕之后，所述方法还包括：

对所述网页进行截图得到网页效果图。

5.根据权利要求4所述的方法，其特征在于，在所述得到所述网页的骨架屏之后，所述方法还包括：

对所述骨架屏进行截图得到骨架屏效果图。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

将所述配置文件、所述网页效果图和所述骨架屏效果图上传至与所述终端通信连接的服务器，以便在所述服务器中对所述配置文件进行修改，对所述网页效果图和所述骨架屏效果图进行预览。

7.根据权利要求1所述的方法，其特征在于，所述方法还包括：

从所述配置文件中读取出所述网页的HTML路径；

根据所述HTML路径获取所述网页的HTML；

将所述网页的HTML中的替换标记位替换为所述骨架屏的HTML。

8.根据权利要求1所述的方法，其特征在于，在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序之前，所述方法还包括：

从所述配置文件中读取出项目标识；

根据所述项目标识获取cookie内容；

将所述cookie内容注入到所述网页的网页数据请求中；

根据注入所述cookie内容的网页数据请求获取所述网页数据。

9.根据权利要求8所述的方法，其特征在于，在所述根据所述项目标识获取cookie内容之前，所述方法还包括：

根据所述项目标识调用网络请求接口进行cookie校验；

所述根据所述项目标识获取cookie内容，包括：

当cookie校验通过时，根据所述项目标识获取所述cookie内容。

10.根据权利要求8所述的方法，其特征在于，在将所述cookie内容注入到所述网页的网页数据请求中时，所述方法还包括：

从所述配置文件中读取出代理网络接口的路径和目标网络地址；

将所述代理网络接口的路径转发到所述目标网络地址。

11.一种网页的骨架屏生成装置，其特征在于，包括：

获取单元，被配置为执行获取网页的骨架屏的配置文件，所述配置文件包含终端中的静态文件路径和需要生成骨架屏的网页；

初始化单元，被配置为执行在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序，所述静态文件应用程序为待生成骨架屏的网页的运行环境，所述静态文件应用程序在以所述静态文件路径为根目录中启动；

渲染单元，被配置为执行基于所述静态文件应用程序对所述网页的网页数据进行渲染；

生成单元，被配置为执行当所述网页数据渲染完毕时，将骨架屏生成脚本注入到所述终端的浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏；

HTML获取单元，被配置为执行在所述浏览器中运行HTML获取脚本，以便获取所述骨架屏的HTML；

其中，所述生成单元，包括：

元素时间读取单元，被配置为执行从所述配置文件中读取出目标元素和等待时间段；

脚本执行单元，被配置为执行当所述网页中加载所述目标元素，且从加载所述目标元素开始，经过所述等待时间段时，将所述骨架屏生成脚本注入到所述浏览器中，并在所述浏览器中运行所述骨架屏生成脚本，得到所述网页的骨架屏。

12.根据权利要求11所述的装置，其特征在于，所述装置还包括：

路径读取单元，被配置为执行在所述初始化单元在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序之后，从所述配置文件中读取出所述网页的路径；

本地网络地址生成单元，被配置为执行根据所述网页的路径和所述终端的IP生成所述网页的本地网络地址。

13.根据权利要求12所述的装置，其特征在于，所述渲染单元，被配置为执行基于所述静态文件应用程序访问所述网页的本地网络地址，并将所述网页数据在所述网页中渲染。

14.根据权利要求11所述的装置，其特征在于，所述装置还包括：

截图单元，被配置为执行在所述网页数据渲染完毕之后，对所述网页进行截图得到网页效果图。

15.根据权利要求14所述的装置，其特征在于，所述截图单元，还被配置为执行对所述骨架屏进行截图得到骨架屏效果图。

16.根据权利要求15所述的装置，其特征在于，所述装置还包括：

上传单元，被配置为执行将所述配置文件、所述网页效果图和所述骨架屏效果图上传至与所述终端通信连接的服务器，以便在所述服务器中对所述配置文件进行修改，对所述网页效果图和所述骨架屏效果图进行预览。

17.根据权利要求11所述的装置，其特征在于，

所述路径读取单元，还被配置为执行从所述配置文件中读取出所述网页的HTML路径；

所述HTML获取单元，还被配置为执行根据所述HTML路径获取所述网页的HTML；

所述装置还包括：

HTML替换单元，被配置为执行将所述网页的HTML中的替换标记位替换为所述骨架屏的HTML。

18.根据权利要求12所述的装置，其特征在于，所述装置还包括：

项目标识读取单元，被配置为执行在所述初始化单元在所述终端中与所述静态文件路径对应的位置处初始化静态文件应用程序之前，从所述配置文件中读取出项目标识；

Cookie获取单元，被配置为执行根据所述项目标识获取cookie内容；

Cookie注入单元，被配置为执行将所述cookie内容注入到所述网页的网页数据请求中；

网页数据获取单元，被配置为执行根据注入所述cookie内容的网页数据请求获取所述网页数据。

19.根据权利要求18所述的装置，其特征在于，所述装置还包括：

Cookie检验单元，被配置为执行在所述Cookie获取单元根据所述项目标识获取cookie内容之前，根据所述项目标识调用网络请求接口进行cookie校验；

所述Cookie获取单元，被配置为执行当cookie校验通过时，根据所述项目标识获取所述cookie内容。

20.根据权利要求18所述的装置，其特征在于，

所述路径读取单元，还被配置为执行在所述Cookie注入单元将所述cookie内容注入到所述网页的网页数据请求中时，从所述配置文件中读取出代理网络接口的路径和目标网络地址；

所述装置还包括：

路径转发单元，被配置为执行将所述代理网络接口的路径转发到所述目标网络地址。

21.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至10中任一项所述的网页的骨架屏生成方法。

22.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如权利要求1至10中任一项所述的网页的骨架屏生成方法。

Images