CN112905922A - 页面加载方法、装置、电子设备、存储介质及程序产品 - Google Patents

Abstract

本公开关于一种页面加载方法、装置、电子设备、计算可读存储介质及计算机程序产品。所述方法包括：解析接收到的页面代码，得到文档对象模型；将所述页面代码中的页面元素插入至所述文档对象模型中的模型节点；模型节点记录有元素初始样式；在所述插入钩子函数被调用时，将所述元素初始样式替换为骨架屏样式，并记录所述元素初始样式；在根据所述骨架屏样式对所述页面元素进行渲染的过程中，根据接收到的元素数据更新所述模型节点；在所述更新钩子函数被调用时，将所述骨架屏样式还原为所述元素初始样式，以根据所述元素初始样式对所述页面元素进行重新渲染。上述方法可以避免页面上出现大片异常空白的问题。

Description

页面加载方法、装置、电子设备、存储介质及程序产品

技术领域

本公开涉及页面处理技术领域，尤其涉及一种页面加载方法、装置、电子设备、计算可读存储介质及计算机程序产品。

背景技术

随着页面处理技术的发展，出现了骨架屏(Skeleton Screen)技术，通过骨架屏技术，浏览器可以在页面的数据加载之前，显示出相应的骨架屏样式，让用户预先了解到页面的基本布局，在浏览器接收到数据并加载后，则取消骨架屏样式，恢复正常的页面内容。

目前，通常采用填入图片的方式来实现骨架屏技术，在未加载任何数据时，填入一张可以体现页面基本布局的骨架屏图片，在加载数据后则移除该图片。

然而在实际应用中，当只加载了部分数据之后，在有大部分的数据未加载的情况下，仍然会移除骨架屏图片，导致整个页面会出现大片的异常空白。

因此，传统的页面加载方法存在着导致页面出现异常空白的问题。

发明内容

本公开提供一种页面加载方法、装置、电子设备、计算可读存储介质及计算机程序产品，以至少解决相关技术中页面出现异常空白的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种页面加载方法，包括：

解析接收到的页面代码，得到文档对象模型；

将所述页面代码中的页面元素插入至所述文档对象模型中的模型节点；所述页面元素在被插入至所述模型节点时，触发调用预置的插入钩子函数；所述模型节点记录有元素初始样式；

在所述插入钩子函数被调用时，将所述元素初始样式替换为骨架屏样式，并记录所述元素初始样式；

在根据所述骨架屏样式对所述页面元素进行渲染的过程中，根据接收到的元素数据更新所述模型节点；所述模型节点在被更新时，触发调用预置的更新钩子函数；

在所述更新钩子函数被调用时，将所述骨架屏样式还原为所述元素初始样式，以根据所述元素初始样式对所述页面元素进行重新渲染。

在一个示例性实施例中，所述具有模型节点多个，在所述更新钩子函数被调用时，还包括：

遍历各个所述模型节点的数据内容；

当确定所述模型节点的数据内容不为空时，则将所述骨架屏样式替换为所述元素初始样式。

在一个示例性实施例中，还包括：

当确定所述模型节点的数据内容为空时，判断所述骨架屏样式是否已被替换为所述元素初始样式；

当所述骨架屏样式已被替换为所述元素初始样式，则在所述模型节点中，将所述元素初始样式还原为所述骨架屏样式。

在一个示例性实施例中，在所述插入钩子函数被调用时，还包括：

判断所述模型节点中的所述页面元素是否携带有骨架屏标识；

当所述页面元素携带有所述骨架屏标识，则将所述元素初始样式替换为所述骨架屏样式。

在一个示例性实施例中，所述遍历各个所述模型节点的数据内容，包括：

确定所述模型节点中的数据内容起始标签和数据内容结束标签；

当所述数据内容起始标签和所述数据内容结束标签之间存在数据值，则判定所述模型节点的数据内容为空；

当所述数据内容起始标签和所述数据内容结束标签之间不存在数据值，则判定所述模型节点的数据内容不为空。

根据本公开实施例的第二方面，提供一种页面加载装置，包括：

代码处理单元，被配置为执行解析接收到的页面代码，得到文档对象模型；

元素插入单元，被配置为执行将所述页面代码中的页面元素插入至所述文档对象模型中的模型节点；所述页面元素在被插入至所述模型节点时，触发调用预置的插入钩子函数；所述模型节点记录有元素初始样式；

样式替换单元，被配置为执行在所述插入钩子函数被调用时，将所述元素初始样式替换为骨架屏样式，并记录所述元素初始样式；

节点更新单元，被配置为执行在根据所述骨架屏样式对所述页面元素进行渲染的过程中，根据接收到的元素数据更新所述模型节点；所述模型节点在被更新时，触发调用预置的更新钩子函数；

样式还原单元，被配置为执行在所述更新钩子函数被调用时，将所述骨架屏样式还原为所述元素初始样式，以根据所述元素初始样式对所述页面元素进行重新渲染。

在一个示例性实施例中，所述具有模型节点多个，所述样式还原单元，被配置为执行：

遍历各个所述模型节点的数据内容；

当确定所述模型节点的数据内容不为空时，则将所述骨架屏样式替换为所述元素初始样式。

在一个示例性实施例中，所述样式还原单元，被配置为执行：

当确定所述模型节点的数据内容为空时，判断所述骨架屏样式是否已被替换为所述元素初始样式；

当所述骨架屏样式已被替换为所述元素初始样式，则在所述模型节点中，将所述元素初始样式还原为所述骨架屏样式。

在一个示例性实施例中，所述样式替换单元，被配置为执行：

判断所述模型节点中的所述页面元素是否携带有骨架屏标识；

当所述页面元素携带有所述骨架屏标识，则将所述元素初始样式替换为所述骨架屏样式。

在一个示例性实施例中，所述样式还原单元，被配置为执行：

确定所述模型节点中的数据内容起始标签和数据内容结束标签；

当所述数据内容起始标签和所述数据内容结束标签之间存在数据值，则判定所述模型节点的数据内容为空；

当所述数据内容起始标签和所述数据内容结束标签之间不存在数据值，则判定所述模型节点的数据内容不为空。

根据本公开实施例的第三方面，提供一种电子设备，包括：

处理器；

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

其中，所述处理器被配置为执行所述指令，以实现如第一方面的任一项所述的页面加载方法。

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

根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现第一方面的任一项所述的页面加载方法。

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

利用页面构建框架在页面元素插入至模型节点、在接收到元素数据时更新模型节点该两个生命周期中会自动触发调用插入钩子函数、更新钩子函数该两个生命周期钩子函数的特性，通过插入钩子函数执行将元素初始样式替换为骨架屏样式并记录元素初始样式的处理，通过更新钩子函数执行将骨架屏样式还原为元素初始样式的处理，由此，通过对骨架屏样式进行更细粒度的控制，实现了骨架屏的动态配置，从而在接收到元素数据时显示页面元素原本的元素初始样式，在未接收到元素数据时显示骨架屏样式，避免了页面上出现大片异常空白的问题。

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

附图说明

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

图1是根据一示例性实施例示出的一种页面加载方法的应用环境图。

图2是根据一示例性实施例示出的一种页面加载方法的流程图。

图3A是一示例性实施例的一种未包含任何数据的骨架屏页面示意图。

图3B是一示例性实施例的一种包含有部分数据的骨架屏页面示意图。

图4是根据一示例性实施例示出的一种骨架屏样式还原步骤的流程图。

图5是根据一示例性实施例示出的一种初始样式还原步骤的流程图。

图6是根据一示例性实施例示出的一种页面加载装置框图。

图7是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

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

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

本公开所提供的页面加载方法，可以应用于如图1所示的应用环境中。其中，终端110通过网络与服务器120进行交互。其中，终端110可以是但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，服务器120可以是用于提供网页浏览服务的服务器，服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。终端110可以向服务器120请求某个页面，服务器120可以反馈相应的页面代码，供终端110通过浏览器进行页面加载。

在用户浏览页面的应用场景中，用户可以在终端110启动浏览器，通过终端110的浏览器与提供页面内容的服务器120进行连接，在连接成功后，终端110可以向服务器120请求某个页面内容，服务器120根据请求，向终端110提供页面内容相应的页面代码。终端110的浏览器根据页面代码进行解析、渲染的处理，从而完成页面的加载供用户浏览。

例如，服务器120可以提供一个商品详情页面给用户，用户可以在该页面上浏览商品价格、商品属性等内容。在加载商品详情页面时，终端110的浏览器可以首先从服务器120下载该页面的页面代码，根据该页面代码渲染出与商品详情页面中各个页面元素(例如：商品价格栏、商品属性栏)的初始样式相似的骨架屏样式，供用户预先了解该页面的基本布局。然后，浏览器再向服务器120请求具体的元素数据(例如：商品价格数据、商品规格数据)。在接收到具体的元素数据后，则会将商品详情页面的各个页面元素恢复为初始样式，此时可能会出现大片的异常空白。

又例如，服务器120经常会首先提供一个用户登录页面，用户可以在用户登录页面进行账户登录、账户注册等操作。在加载用户登录页面时，终端110可以首先渲染出与用户登录页面中各个页面元素(例如：账户输入框、密码输入框、消息提示栏等弹框)的初始样式相似的骨架屏样式，供用户预先了解该页面的基本布局。然后，接收到用户通过终端110针对某个页面元素输入的元素数据时，则会将用户登录页面中各个页面元素恢复为初始样式，此时可能会出现大片的异常空白。

实际应用中，可以采用VUE(一种用户交互界面的渐进式框架)进行页面的构建，以加载出供用户进行交互的页面。VUE在控制加载页面的过程中，可以将页面元素的初始样式替换为骨架屏样式。然而，在页面中只存在有部分数据时，VUE框架仍然会将全部骨架屏样式恢复为初始样式，导致页面上出现大片异常空白。

需要说明的是，除了采用VUE构建具有骨架屏样式的页面，通常还可以采用JS(JavaScript)脚本的方式实现。其中一种常见的方式，是通过JS脚本在页面上查找可视化的页面元素，并针对查找到的页面元素添加相应尺寸的占位色块，形成骨架屏样式。然而，该方法经常无法准确识别页面元素的尺寸，导致占位色块的尺寸和页面元素不符，导致骨架屏样式无法反映出真实的页面布局。另一种常见的方式，是利用JS脚本的事件机制，监控页面上各个页面元素的变化，根据变化情况添加骨架屏样式。然而，利用JS脚本的事件机制在功能上限制较多，无法如VUE框架提供多种功能。因此，在基于VUE框架构建具有骨架屏样样式的页面的现有技术中，均会导致页面上出现大片异常空白的问题。

针对于上述问题，发明人经过对基于VUE等的页面构建框架程序进行页面加载的方法的深入研究，发现可以利用VUE等的页面构建框架程序中的生命周期钩子函数，通过更细粒度的控制，实现骨架屏的动态配置，以解决上述页面上出现大片异常空白的问题。

图2是根据一示例性实施例示出的一种页面加载方法的流程图，如图2所示，页面加载方法用于终端110中，包括以下步骤。

在步骤S210中，解析接收到的页面代码，得到文档对象模型。

其中，页面代码可以为用于加载页面的代码。

其中，文档对象模型(Document Object Model，DOM)是一种应用程序接口，其提供了整个代码文档的访问模型，该文档对象模型由模型节点构成，模型节点包括有父节点、子节点等，由此呈现出树状结构，因此也称为DOM模型树。

具体地，终端110可以接收服务器120反馈的页面代码，终端110可以通过浏览器对页面代码进行解析，形成文档对象模型，以便进一步根据文档对象模型中的各个模型节点的内容进行页面加载。

在步骤S220中，将所述页面代码中的页面元素插入至所述文档对象模型中的模型节点；所述页面元素在被插入至所述模型节点时，触发调用预置的插入钩子函数；所述模型节点记录有元素初始样式。

其中，元素初始样式可以为页面元素所具有的原本的样式。例如，账户输入框该页面元素的元素初始样式可以为一个空白内容的黑边方框。

其中，插入钩子函数是页面构建框架中的一种用于在页面元素插入至模型节点时调用的生命周期钩子函数。

具体地，终端110的浏览器解析出文档对象模型之后，将会进一步将页面代码中的各个页面元素，分别插入至文档对象模型中对应的模型节点中。

VUE等的页面构建框架会在将页面元素插入至模型节点该生命周期中，触发调用插入钩子函数该生命周期钩子函数。

需要说明的是，如VUE等的页面构建框架在执行页面加载时，通常存在有多个生命周期，例如，元素绑定生命周期、创建事件生命周期、组件更新生命周期等。页面构建框架也会相应地设计有多种的如bind、created等的生命周期钩子函数。在进入至各个生命周期时，将会自动地触发调用相应的生命周期钩子函数。

例如，在基于VUE框架加载页面的过程中，当浏览器将页面元素插入至文档对象模型的某个模型节点时，VUE框架则会调用插入钩子函数inserted。又例如，在vue实例创建之后，则会调用created该生命周期钩子函数。

在步骤S230中，在所述插入钩子函数被调用时，将所述元素初始样式替换为骨架屏样式，并记录所述元素初始样式。

其中，骨架屏样式可以为用于代表页面元素的位置和形状的样式，由于其在页面元素所处的位置上，也称为骨架屏占位块。例如，骨架屏样式可以为一张纯色方块图片。

具体地，在本实施例的页面加载方法中，用户可以预先编辑页面构建框架的插入钩子函数的函数内容，使得插入钩子函数在被调用时，执行将元素初始样式替换为骨架屏替换为骨架屏样式、并记录元素初始样式的处理步骤。

当插入钩子函数被调用时，终端110将会对各个模型节点中的页面元素所具有的元素初始样式进行替换，例如，模型节点中记录有页面元素的代码内容，还对应记录有该页面元素的样式的代码内容，可以将该样式的代码内容替换为骨架屏样式的代码内容，在根据文档对象模型进行页面加载时，将会根据模型节点中骨架屏样式的代码内容确定对应的图片，并对该图片进行渲染，以显示出骨架屏样式。

此外，当插入钩子函数被调用时，还会缓存页面元素的元素初始样式，以便在该页面元素具有相应的元素数据时还原为所缓存的元素初始样式。

需要补充说明的是，在实际应用中，是针对需要进行骨架屏样式渲染的页面元素的模型节点，才会触发执行上述的将元素初始样式替换为骨架屏样式、并记录元素初始样式的步骤，对于无须进行骨架屏样式渲染的页面元素，则无须执行上述步骤。

在步骤S240中，在根据所述骨架屏样式对所述页面元素进行渲染的过程中，根据接收到的元素数据更新所述模型节点；所述模型节点在被更新时，触发调用预置的更新钩子函数。

其中，元素数据可以为与页面元素关联的数据。元素数据可以为服务器120针对页面元素反馈的数据，例如，页面元素为提示消息栏，服务器120可以提供该提示消息栏的文本消息内容作为上述的元素数据，又例如，页面元素为密码输入框，用户可以通过终端110输入密码，该密码即为密码输入框的元素数据。

具体地，在解析出文档对象模型之后，终端110的浏览器会根据各个模型节点中页面元素的样式内容进行页面渲染，以在页面上显示出各个页面元素的样式。在进行页面渲染时，如果某个模型节点中的页面元素的样式内容为骨架屏样式，浏览器则会渲染出骨架屏样式的页面元素。

图3A是一示例性实施例的一种未包含任何数据的骨架屏页面示意图。如图所示，由于未接收到任何的元素数据，因此，页面上的页面元素301、302均被渲染为圆状占位块、长条占位块等的骨架屏样式。

在对骨架屏样式进行渲染时，终端110可能会接收到服务器120发送的或者用户输入的与某个页面元素相关联的元素数据，由此终端110接收到元素数据。浏览器会根据新的元素数据，对文档对象模型中的相应的模型节点进行更新，例如，将元素数据插入至某个页面元素的模型节点中，作为该页面元素的元素数据，由此，整个文档对象模型被更新。

VUE等的页面构建框架会在文档对象模型中的模型节点出现更新的生命周期中，触发调用更新钩子函数该生命周期钩子函数。

例如，在基于VUE框架加载页面的过程中，当浏览器更新了文档对象模型中的某个模型节点，VUE框架则会调用更新钩子函数Component Updated。

在步骤S250中，在所述更新钩子函数被调用时，将所述骨架屏样式还原为所述元素初始样式，以根据所述元素初始样式对所述页面元素进行重新渲染。

具体地，在本实施例的页面加载方法中，用户可以预先编辑页面构建框架的更新钩子函数的函数内容，使得更新钩子函数在被调用时，执行将骨架屏样式还原为元素初始样式的处理步骤。

当更新钩子函数被调用时，终端110则会遍历文档对象模型中的各个模型节点，判断各个模型节点中是否包含有元素数据，如果某个页面元素的模型节点中包含有元素数据，则可以将该模型节点中所记录的骨架屏样式还原为此前记录的元素初始样式。对于没有包含有元素数据的模型节点，则不会进行处理，使得模型节点中没有元素数据的页面元素仍然记录骨架屏样式。

由于终端110的浏览器会在文档对象模型出现更新时根据各个模型节点中页面元素的样式内容进行重新渲染，因此，如果某个模型节点的样式内容为元素初始样式，浏览器则会渲染出元素初始样式的页面元素，对于模型节点的样式内容为骨架屏样式的，浏览器则仍然会渲染出骨架屏样式的页面元素。

需要说明的是，文档对象模型每次出现节点更新的生命周期时，均会调用更新钩子函数，也即是说，在每个节点更新的生命周期中，均会执行将骨架屏样式还原为元素初始样式的处理。

图3B是一示例性实施例的一种包含有部分数据的骨架屏页面示意图。如图所示，假设商品标题栏该页面元素302接收到“5G手机”的元素数据，通过本实施例的页面加载方法，可以将页面元素302渲染为一个黑边方框的元素初始样式，并显示出接收到的元素数据“5G手机”。而另一未有元素数据的页面元素301，则仍然为圆状占位块的骨架屏样式。

上述页面加载方法中，利用页面构建框架在页面元素插入至模型节点、在接收到元素数据时更新模型节点该两个生命周期中会自动触发调用插入钩子函数、更新钩子函数该两个生命周期钩子函数的特性，通过插入钩子函数执行将元素初始样式替换为骨架屏样式并记录元素初始样式的处理，通过更新钩子函数执行将骨架屏样式还原为元素初始样式的处理，由此，通过对骨架屏样式进行更细粒度的控制，实现了骨架屏的动态配置，从而在接收到元素数据时显示页面元素原本的元素初始样式，在未接收到元素数据时显示骨架屏样式，避免了页面上出现大片异常空白的问题。

在一示例性实施例中，所述具有模型节点多个，如图4所示，步骤S250具体包括以下步骤：

在步骤S251中，在所述更新钩子函数被调用时，遍历各个所述模型节点的数据内容；

在步骤S252中，当确定所述模型节点的数据内容不为空时，则将所述骨架屏样式替换为所述元素初始样式。

具体地，文档对象模型通常包括有多个模型节点，在调用更新钩子函数时，可以遍历全部模型节点，逐一判断模型节点的数据内容是否为空，当某个模型节点的数据不为空时，则可以利用在将页面元素插入至模型节点该生命周期中、通过调用插入钩子函数所记录的元素初始样式，将模型节点中的骨架屏样式替换为元素初始样式。在浏览器进行渲染时，对于模型节点的样式内容为元素初始样式的，浏览器则会重新渲染出元素初始样式的页面元素。

例如，对于基于VUE框架构建页面的应用中，可以预先编辑VUE框架的更新钩子函数Component Updated的函数内容，插入innerHTML函数，从而在Component Updated被调用时，执行上述遍历各个模型节点的数据内容的处理。

上述的页面加载方法，通过在节点更新该生命周期中更新钩子函数被调用时，遍历各个模型节点的数据内容，将数据内容不为空的模型节点中的骨架屏样式还原为元素初始样式，由此，可以保证有元素数据的页面元素通过元素初始样式显示，从而更准确地控制骨架屏样式的显示。

在一示例性实施例中，如图5所示，页面加载方法可以还包括：

在步骤S253中，当确定所述模型节点的数据内容为空时，判断所述骨架屏样式是否已被替换为所述元素初始样式；

在步骤S254中，当所述骨架屏样式已被替换为所述元素初始样式，则在所述模型节点中，将所述元素初始样式还原为所述骨架屏样式。

需要说明的是，在实际应用中，用户在通过终端110输入部分数据后，可能会清除所输入的数据，由此，会引起文档对象模型的更新，将模型节点中相应的元素数据清除。例如，用户在密码输入框中输入数字密码，在发现输入错误后又删除已输入的全部数字。

在用户清除所输入数据的情形下，可能会出现模型节点不包含数据、但按照元素初始样式进行显示的问题，导致页面出现异常空白。

具体地，在确定模型节点的数据内容为空时，可以进一步判断该模型节点的样式内容是否为元素初始样式，如果样式内容为元素初始样式，即，骨架屏样式已被替换为元素初始样式，则可以将该元素初始样式还原为骨架屏样式。由此，通过在数据内容为空、但骨架屏样式被替换为元素初始样式时、将元素初始样式还原为骨架屏样式，保证没有元素数据的页面元素显示为骨架屏样式，避免页面出现异常空白。

在一示例性实施例中，在所述插入钩子函数被调用时，还包括：

判断所述模型节点中的所述页面元素是否携带有骨架屏标识；当所述页面元素携带有所述骨架屏标识，则将所述元素初始样式替换为骨架屏样式。

其中，骨架屏标识为用于标记需要替换骨架屏样式的页面元素的标识。

具体地，用户可以预先对页面代码中需要显示骨架屏的页面元素添加骨架屏标识。在调用插入钩子函数时，则会遍历各个模型节点中的页面元素是否携带有骨架屏标识，针对有骨架屏标识的页面元素，则将该页面元素的模型节点中所记录的元素初始样式替换为骨架屏样式。

例如，采用VUE框架构建页面时，可以在用页面的页面代码中，对页面元素“title”，添加指令代码v-skeleton作为上述的骨架屏标识，得到<div class＝"title"v-skeleton>{{title}}></div>。在VUE框架调用inserted钩子函数时，则会将页面元素“title”的元素初始样式替换为骨架屏样式。

上述的页面加载方法，通过对携带骨架屏标识的页面元素进行骨架屏样式的替换，从而可以对需要骨架屏样式的页面元素进行处理，避免对无须显示骨架屏样式的页面元素进行处理，减少了运算量，提升了页面加载的处理速度。

在一示例性实施例中，步骤S251，可以具体包括：

确定所述模型节点中的数据内容起始标签和数据内容结束标签；当所述数据内容起始标签和所述数据内容结束标签之间存在数据值，则判定所述模型节点的数据内容为空；当所述数据内容起始标签和所述数据内容结束标签之间不存在数据值，则判定所述模型节点的数据内容不为空。

具体地，用户可以预先编辑更新钩子函数的函数内容，在函数内容中插入用于确定模型节点中的数据内容起始标签和数据内容结束标签、并将两个标签之间的数据值输出的函数。例如，可以通过插入innerHTML函数实现上述的处理，

在调用更新钩子函数时，则会通过上述的函数输出数据内容起始标签和数据内容结束标签之间的数据值，如果存在有数据值，则可以判定页面元素在模型节点中的数据内容为空，暂时还不存在有该页面元素相应的元素数据，此时则执行将骨架屏样式替换为元素初始样式的步骤。反之则判定数据内容不为空，此时则执行判断骨架屏样式是否已被替换为元素初始样式的步骤。

上述的页面加载方法，通过根据模型节点中的数据内容起始标签和数据内容结束标签之间是否存在数据值来判断数据内容是否为空，从而可以通过少量运算实现对各个模型节点的数据内容的遍历，提升了页面加载的效率。

应该理解的是，虽然图2、4和5的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2、4和5中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

图6是根据一示例性实施例示出的一种页面加载装置框图。参照图6，该装置包括代码处理单元602、元素插入单元604、样式替换单元606、节点更新单元608和样式还原单元610。其中：

代码处理单元602，被配置为执行解析接收到的页面代码，得到文档对象模型；

元素插入单元604，被配置为执行将所述页面代码中的页面元素插入至所述文档对象模型中的模型节点；所述页面元素在被插入至所述模型节点时，触发调用预置的插入钩子函数；所述模型节点记录有元素初始样式；

样式替换单元606，被配置为执行在所述插入钩子函数被调用时，将所述元素初始样式替换为骨架屏样式，并记录所述元素初始样式；

节点更新单元608，被配置为执行在根据所述骨架屏样式对所述页面元素进行渲染的过程中，根据接收到的元素数据更新所述模型节点；所述模型节点在被更新时，触发调用预置的更新钩子函数；

样式还原单元610，被配置为执行在所述更新钩子函数被调用时，将所述骨架屏样式还原为所述元素初始样式，以根据所述元素初始样式对所述页面元素进行重新渲染。

在一个示例性实施例中，所述具有模型节点多个，样式还原单元610，被配置为执行：

遍历各个所述模型节点的数据内容；当确定所述模型节点的数据内容不为空时，则将所述骨架屏样式替换为所述元素初始样式。

在一个示例性实施例中，所述样式还原单元610，被配置为执行：

当确定所述模型节点的数据内容为空时，判断所述骨架屏样式是否已被替换为所述元素初始样式；当所述骨架屏样式已被替换为所述元素初始样式，则在所述模型节点中，将所述元素初始样式还原为所述骨架屏样式。

在一个示例性实施例中，所述样式替换单元606，被配置为执行：

判断所述模型节点中的所述页面元素是否携带有骨架屏标识；当所述页面元素携带有所述骨架屏标识，则将所述元素初始样式替换为所述骨架屏样式。

在一个示例性实施例中，所述样式还原单元610，被配置为执行：

确定所述模型节点中的数据内容起始标签和数据内容结束标签；当所述数据内容起始标签和所述数据内容结束标签之间存在数据值，则判定所述模型节点的数据内容为空；当所述数据内容起始标签和所述数据内容结束标签之间不存在数据值，则判定所述模型节点的数据内容不为空。

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

图7是根据一示例性实施例示出的一种用于页面加载的设备700的框图。例如，设备700可以是移动电话、计算机、数字广播终端、消息收发设备、游戏控制台、平板设备、医疗设备、健身设备、个人数字助理等。

参照图7，设备700可以包括以下一个或多个组件：处理组件702、存储器704、电源组件706、多媒体组件708、音频组件710、输入/输出(I/O)的接口712、传感器组件714以及通信组件716。

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

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

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

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

音频组件710被配置为输出和/或输入音频信号。例如，音频组件710包括一个麦克风(MIC)，当设备700处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器704或经由通信组件716发送。在一些实施例中，音频组件710还包括一个扬声器，用于输出音频信号。

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

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

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

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

在一示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器704，上述指令可由设备700的处理器720执行以完成上述的页面加载方法。例如，计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在一示例性实施例中，还提供一种计算机程序产品，包括计算机程序，计算机程序被处理器720执行时实现上述的页面加载方法。

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

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

Claims (10)

1.一种页面加载方法，其特征在于，包括：

解析接收到的页面代码，得到文档对象模型；

将所述页面代码中的页面元素插入至所述文档对象模型中的模型节点；所述页面元素在被插入至所述模型节点时，触发调用预置的插入钩子函数；所述模型节点记录有元素初始样式；

在所述插入钩子函数被调用时，将所述元素初始样式替换为骨架屏样式，并记录所述元素初始样式；

在根据所述骨架屏样式对所述页面元素进行渲染的过程中，根据接收到的元素数据更新所述模型节点；所述模型节点在被更新时，触发调用预置的更新钩子函数；

在所述更新钩子函数被调用时，将所述骨架屏样式还原为所述元素初始样式，以根据所述元素初始样式对所述页面元素进行重新渲染。

2.根据权利要求1所述的页面加载方法，其特征在于，所述具有模型节点多个，在所述更新钩子函数被调用时，还包括：

遍历各个所述模型节点的数据内容；

当确定所述模型节点的数据内容不为空时，则将所述骨架屏样式替换为所述元素初始样式。

3.根据权利要求2所述的页面加载方法，其特征在于，还包括：

当确定所述模型节点的数据内容为空时，判断所述骨架屏样式是否已被替换为所述元素初始样式；

当所述骨架屏样式已被替换为所述元素初始样式，则在所述模型节点中，将所述元素初始样式还原为所述骨架屏样式。

4.根据权利要求1所述的页面加载方法，其特征在于，在所述插入钩子函数被调用时，还包括：

判断所述模型节点中的所述页面元素是否携带有骨架屏标识；

当所述页面元素携带有所述骨架屏标识，则将所述元素初始样式替换为所述骨架屏样式。

5.根据权利要求3所述的页面加载方法，其特征在于，所述遍历各个所述模型节点的数据内容，包括：

确定所述模型节点中的数据内容起始标签和数据内容结束标签；

当所述数据内容起始标签和所述数据内容结束标签之间存在数据值，则判定所述模型节点的数据内容为空；

当所述数据内容起始标签和所述数据内容结束标签之间不存在数据值，则判定所述模型节点的数据内容不为空。

6.一种页面加载装置，其特征在于，包括：

代码处理单元，被配置为执行解析接收到的页面代码，得到文档对象模型；

元素插入单元，被配置为执行将所述页面代码中的页面元素插入至所述文档对象模型中的模型节点；所述页面元素在被插入至所述模型节点时，触发调用预置的插入钩子函数；所述模型节点记录有元素初始样式；

样式替换单元，被配置为执行在所述插入钩子函数被调用时，将所述元素初始样式替换为骨架屏样式，并记录所述元素初始样式；

节点更新单元，被配置为执行在根据所述骨架屏样式对所述页面元素进行渲染的过程中，根据接收到的元素数据更新所述模型节点；所述模型节点在被更新时，触发调用预置的更新钩子函数；

样式还原单元，被配置为执行在所述更新钩子函数被调用时，将所述骨架屏样式还原为所述元素初始样式，以根据所述元素初始样式对所述页面元素进行重新渲染。

7.根据权利要求6所述的页面加载装置，其特征在于，所述具有模型节点多个，所述样式还原单元，被配置为执行：

遍历各个所述模型节点的数据内容；

当确定所述模型节点的数据内容不为空时，则将所述骨架屏样式替换为所述元素初始样式。

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

处理器；

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

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至5中任一项所述的页面加载方法。

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

10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-5任一项所述的页面加载方法。

Images