动态页面加载方法和装置与流程

本发明涉及互联网应用技术领域，特别涉及一种动态页面加载方法和装置。

背景技术：

随着互联网的发展，各类终端得到广泛普及，人们获取信息的工具并不在仅限于台式电脑、笔记本电话等设备，而越来越多地依赖于智能手机、平板电脑等移动终端。各种通过互联网获取得到的页面作为信息的载体，也随之越来越多地被各种移动终端加载，以通过加载页面为人们提供所需要的信息。

然而，如若此页面为动态页面，该动态页面大都是通过一定的插件实现其动态效果的，因此往往需要占用较多的传输资源和移动终端中的系统资源，由此造成移动终端中动态页面的加载非常困难，极大地影响了动态页面的实现。

技术实现要素：

基于此，有必要提供一种动态页面加载方法，所述方法占用较少传输资源和系统资源，以实现动态页面的快速加载。

另外，还有必要提供一种动态页面加载装置，所述装置占用较少传输资源和系统资源，以实现动态页面的快速加载。

为解决上述技术问题，将采用如下技术方案：

一种动态页面加载方法，包括：

通过动态页面访问的触发请求获取页面文件；

解析所述页面文件得到所述动态页面对应的标签和描述所述标签的样式描述信息，

根据所述标签进行动态页面绘制，以进行所述标签分别对应的遮罩元素和动画元素的显示；

在所述遮罩元素和动画元素上执行对应的样式描述信息，以得到动态页面。

一种动态页面加载装置，包括：

请求发起模块，用于通过动态页面访问的触发请求获取页面文件；

解析模块，用于解析所述页面文件得到所述动态页面对应的标签和描述所述标签的样式描述信息；

页面绘制模块，用于根据所述标签进行动态页面绘制，以进行所述标签分别对应的遮罩元素和动画元素的显示；

效果实现模块，用于在所述遮罩元素和动画元素上执行对应的样式描述信息，以得到动态页面。

由上述技术方案可知，通过用户触发的动态页面访问，将触发请求获取此动态页面相应的页面文件，解析页面文件得到动态页面对应的标签和描述标签的样式描述信息，根据标签进行动态页面绘制，以进行遮罩元素和动画元素的显示，该遮罩元素和动画元素相配合，用以实现页面中的动态效果，将对应的样式描述信息分别应用到显示的遮罩元素和动画元素上，以在显示的遮罩元素和动画元素上执行对应的样式描述信息，得到动态页面，在此动态页面的加载过程中，并不需要通过一定的插件即可实现动态效果，所占用的传输资源和系统资源较小，对于移动设备的动态页面加载而言，极大地提高了加载速度和性能，优化了移动端页面中动态效果的实现。

附图说明

图1是本发明实施例提供的一种终端设备的结构示意图；

图2是一个实施例中动态页面加载方法的流程图；

图3是图2中解析页面文件得到动态页面对应的标签和描述标签的样式描述信息的方法流程图；

图4是图2中根据标签进行动态页面绘制，以进行标签分别对应的遮罩 元素和动画元素的显示的方法流程图；

图5是一个实施例中动态页面加载的动态页面示意图；

图6是一个实施例中动态页面加载装置的结构示意图；

图7是图6中解析模块的结构示意图；

图8是图6中页面绘制模块的结构示意图。

具体实施方式

体现本发明特征与优点的典型实施方式将在以下的说明中详细叙述。应理解的是本发明能够在不同的实施方式上具有各种的变化，其皆不脱离本发明的范围，且其中的说明及图示在本质上是当作说明之用，而非用以限制本发明。

如前所述的，各种页面访问的实现越来越多地发生于移动终端，与之相对应的，移动端页面的实现也将成为开发所需要考虑的重要方面，任一页面访问的实现都需要充分考虑移动终端中的实现。而现有动态页面的实现存在着占用较多传输资源和系统资源的缺陷，无法实现动态页面的快速加载。

相比各种电脑设备，对于动态页面的加载而言移动终端存在着诸多限制，例如，其处理性能较差，浏览器或者请求进行页面访问的应用所具备的解析性能较差等。由此将导致现有的动态页面在移动终端的实现存在着各种困难，缺乏通用性。

因此，为确保动态页面在移动终端中的实现，特提出了一种动态页面加载方法，该动态页面加载方法由计算机程序实现，与之相对应的，所构建的实现动态页面加载的装置则被存储于带有屏幕的终端设备中，以在终端设备中运行，进而实现动态页面的加载。

需要说明的是，该终端设备包括但并不仅限于移动终端。

图1示出了本发明实施例提供的一种终端设备的结构。该终端设备100只是一个适用本发明的示例，不能认为是提供了对本发明的使用范围的任何限制。该终端设备100也不能解释为需要依赖于或具有图示的示例性的终端设备100中的一个或者多个部件的组合。

如图1所示，终端设备100包括处理器110、存储器120和系统总线130。包括存储器120和处理器110在内的各种部件将连接到系统总线130上。处 理器110是一个用于通过计算机系统中基本的算术和逻辑运算来执行计算机程序指令的硬件。存储器120是一个用于临时或永久性存储计算机程序或数据的物理设备。

其中，存储器120中存储了程序指令；处理器110将执行存储器120中的程序指令，侦听输入的各种操作，并对侦听得到的操作进行响应。

终端设备100还包括各种输入接口170、输入装置140，以实现各种操作的输入。其中，该输入装置140可以是触摸屏幕、按键、键盘和鼠标等至少一种。

终端设备100还包括存储设备180，存储设备180可以从多种计算机可读存储介质中选择，计算机可读存储介质是指可以进行访问的任何可利用的介质，包括移动的和固定的两种介质。例如，计算机可读存储介质，包括但不限于闪速存储器(微型SD卡)、CD-ROM、数字通用光盘(DVD)或其它光盘、磁带盒、磁带存储或其它存储设备、或者可用于存储所需信息并可访问的任何其它介质。

如上面所详细描述的，适用本发明的终端设备100将执行实现动态页面加载的指定操作，即通过处理器110运行存储器120中的程序指令的形式执行该指定操作，以实现动态页面的加载。

此外，通过硬件电路或者硬件电路结合软件指令也能同样实现本发明，因此，实现本发明并不限于任何特定硬件电路、软件以及两者的组合。

在一个实施例中，具体的，动态页面加载方法如图2所示，包括：

步骤210，通过动态页面访问的触发请求获取页面文件。

动态页面的访问是在用户侧触发的，其可通过用户侧的浏览器或者运行的其它应用触发。具体的，通过浏览器中进行的网页地址跳转触发，或者运行的应用中通过动态页面的跳转触发的。例如，社交应用中，通过用户所进行的二维码扫描进行页面跳转，以触发动态页面的访问。

该动态页面可以是当前所期望访问的任意具备动态效果的页面，在触发进行动态页面的访问之后，将向远端发起请求，以获取得到返回的页面文件。

所得到的页面文件是与请求访问的动态页面相对应的，其作为动态页面中内容的载体，用以实现动态页面在用户侧的内容显示。

步骤230，解析页面文件得到动态页面对应的标签和描述标签的样式描 述信息。

由页面文件可得到至少两个标签以及每一标签对应的样式描述信息，样式描述信息用以进行标签的描述。由页面文件所解析得到的标签将分别对应于动态页面中包含的元素，相应的样式描述信息被应用于对应的元素上，以为元素实现一定的显示效果。

进一步的，页面文件的解析将是由浏览器内核所实现的。移动终端等终端设备中，浏览器和应用均内置了浏览器内核，所需要进行的动态页面访问只需要触发运行该浏览器内核即可进行动态页面的加载。

步骤250，根据标签进行动态页面绘制，以进行标签分别对应的遮罩元素和动画元素的显示。

按照解析所得到的标签进行动态页面的绘制，以确定动态页面中包含的元素以及每一元素在屏幕中的布设情况，从而所有元素以及其在屏幕中的布设便形成的动态页面中的显示内容。

通过动态页面绘制，使得在屏幕中完成各元素的渲染，该渲染显示的元素至少包括了遮罩元素和动画元素。

其中，遮罩元素将作为遮罩层进行显示，其是静态的；而动画元素则用于提供动态变化的显示内容。

步骤270，在遮罩元素和动画元素上执行对应的样式描述信息，以得到动态页面。

将样式描述信息应用到相应的元素上，为元素实现各种显示效果。具体的，根据对应的样式描述信息，将遮罩元素设置为动态页面中的遮罩层，置于顶层且进行静态显示，所占据的位置将遮盖该位置所存在的其它内容。

另一方面的，对于动画元素，也将在其上执行对应的样式描述信息，以实现动画元素中内容的动态变化。

由此将在遮罩元素和动画元素的配合下，遮罩元素置于最上层，动态元素在遮罩元素下进行动态变化，进而使得触发动态页面访问的浏览器或应用得以对此进行显示，并产生意想不到的动画效果。

此外，通过页面文件的解析来得到遮罩元素和动画元素所形成的动态页面，并不需要额外的插件或者强大的硬件性能，从而使得动态页面可在诸如电脑设备、移动终端中随意实现，增强了动态页面加载的通用性和兼容性， 避免出现低级别浏览器中无法实现动态效果的情况发生。

进一步的，在本实施例中，页面文件包括脚本文件和关联的CSS文件，该步骤230如图3所示，包括：

步骤231，解析脚本文件得到动态页面对应的标签，该标签中标示出关联的CSS文件。

如前所述的，页面文件作为动态页面中内容的载体，包括了脚本文件和关联的CSS(Cascading Style Sheets，层叠样式表)文件两部分，其中，脚本文件用以实现页面中各元素的布局，以提供页面的显示内容，而关联的CSS文件则为页面中的各元素实现了所需要的显示效果。

具体的，元素作为页面中的内容，其在脚本文件中是以标签的形式存在的，也就是说，通过脚本文件中的标签，将对页面中的元素进行了描述，进而得以通过脚本文件实现页面中各元素的布局。

例如，标签中标示了其所使用的图片以及获取该图片的路径，以便于在后续页面绘制的过程中得以通过该图片的路径获取得到相应的图片。

另外，对于脚本文件中的各标签，其也标示了关联的CSS文件，这一关联的CSS文件是对相应元素的样式描述。

由此将使得进行动态页面加载的浏览器或者应用得以通过脚本文件得到元素在页面中的布局，并由关联的CSS文件实现元素的显示效果，进而使得动态页面的实现简易，不需要占用较多资源。

步骤233，根据标签解析关联的CSS文件得到描述标签的样式描述信息。

在解析得到动态页面对应的标签之后，读取标签中关联的CSS文件，进而由CSS文件得到描述标签的样式描述信息。

如上所述的解析过程即为脚本文件中标签与样式描述信息的匹配过程，由于样式描述信息是由CSS文件所得到的，相对其它的一些实现方式，CSS文件所实现的动态页面加载占用的内存较少，并且均由浏览器或者应用中运行的浏览器内核完成，因此极大地提高了效率，且其潜在的性以有优越，能够满足后续发展的需求。

进一步的，在一个实施例中，如上所述的步骤250如图4所示，包括：

步骤251，根据标签相对屏幕进行元素布局，以得到显示的元素及其相对屏幕的位置，显示的元素包括遮罩元素和动画元素。

通过由脚本文件所解析得到的标签将得到页面中包含的元素以及每一元素相对屏幕的位置。其中，该元素实质为实现某些内容显示的图片，例如，如若动态页面中存在着文字内容的显示，则文字内容所对应的字图形图像即为此动态页面中的元素，而并且通过脚本文件的相应标签实现其在页面中的显示。

动态页面中显示的元素至少包括遮罩元素和动画元素，以保证其动态效果的实现。遮罩元素将作为动画元素的遮罩层，通过动画元素实现动态显示效果的同时，由于遮罩元素是在动画元素之上静止不动的表层，将极大地突显了动态显示效果，优化了动态页面。

具体的，对于实际的动态页面加载的实现，该元素实际为一图像或都一系列图像的集合，通过标签中标示的路径即可读取得到，并相应得到其布局在屏幕中的位置。

步骤253，按照相对屏幕的位置进行元素的显示，以使遮罩元素和动画元素显示于屏幕中。

每一元素都有其相对屏幕的位置，以用于对元素在屏幕中的显示进行控制。通过浏览器内核在屏幕中渲染各元素，以得到包含了各种内容的页面。

进一步的，在一个实施例中，动画元素对应的样式描述信息包括将元素设置为背景的属性，步骤253的具体过程为：

按照相对屏幕的位置，在屏幕中以动画元素为背景进行动画元素和遮罩元素的动态页面显示，以使屏幕的显示中遮罩元素遮罩下方的动画元素。

通过将动画元素设置为背景的属性，在页面绘制的过程中将动画元素置为动态页面中的背景图像，以得到背景内容能够进行动态变化的动态页面。其中，将元素设置为背景的属性为CSS3的background-image属性。

具体的，在由标签得到显示的元素以及每一元素相对屏幕的位置之后，将动画元素作为背景图像，并在此背景图像上布设遮罩元素，使得浏览器或者应用的显示中，各种动画画面在遮罩元素下展示。

另外，此背景图像上除了布设遮罩元素之外，其根据需要，还可布设其它的一些元素，以提供内容丰富，且显示效果丰富的动态页面，在此不进行限定。

在另一个实施例中，遮罩元素对应的样式描述信息为CSS遮罩属性，动 画元素对应的样式描述信息为动画属性，因此，步骤270的具体过程为：

显示的遮罩元素和动画元素中，将CSS遮罩属性应用于遮罩元素，动画属性应用于动画元素，以得到相对遮罩元素进行动态变化的动态页面。

CSS遮罩属性是运用CSS3的最新属性mask-image，以为动态页面提供基于像素级别的遮罩层，进而也能进行透明度的控制。

动态页面的实现中，通过CSS的应用极大地提高了处理速度，并且使得动态页面在移动终端中的实现能够得到移动终端中浏览器内核的支持，具有较佳的性能和兼容性，对于移动终端中低级别的浏览器内核也能够得到支持。

另一方面的，动画属性可以是CSS3动画的animation属性，其定义了动画名称、持续时间、关键帧、完成页面加载后动画延迟运行的时间以及所应用的元素等。换而言之，动画属性是定义了动画元素中指定图像的动态变化执行方法。

例如，对于作为动态页面中背景图像的动画属性而言，其就是一个动态变化背景图像的执行方法，浏览器或者应用中加载并显示的动态页面中背景图像就是按照该方法进行动态变化的。

在实际运营中，将CSS遮罩属性与background-imagent联合使用，所得到的动态页面能够通过背景图像渐变的方式进行动画效果的展现，实现简单但能够得到不错的显示效果。

下面结合一个具体的实施例来说阐述如上所述的动态页面加载方法。该实施例中，如图5所示，所实现的动态页面将是背景图像的位置改变作为动态显示效果的，而“天桥老奶奶”的字图形图像310于此位置改变的背景图像330上，且静止不动。

在此实现中，将运用CSS遮罩属性和CSS3动画的animation属性来实现，以在“天桥老奶奶”的字图形图像310背后改变背景图像330的位置，例如，进行从上往下的移动。

对于此动态页面的页面文件，首先，将“天桥老奶奶”的字图形切出，得到“天桥老奶奶”的字图形图像310以及对应的图像地址，以封装至页面文件的标签中。

在这个标签中应用CSS遮罩属性，其具体的示例可如下所示：

-webkit-mask-image:url(img/images/section6-title.png？)；

mask-image:url(img/images/section6-title.png？)；

其中，由于有的低级别浏览器内核还需要-webkit-前缀的写法，因此，在此将提供两种示例以便说明。

然而在背景图像330的标签中应用动画属性，具体的示例如下所示：

-webkit-animation:bgTrans 3.5s both；

animation:bgTrans 3.5s both；

-webkit-animation-delay:.5s；

animation-delay:.5s；

如前所述的，对于动画属性，也将提供两种示例来进行说明。

在此动画属性中，定义了应用的动画名是bgTrans以及该动画执行所相关的信息。

其中，对于动画bgTrans而言，其实质为一个改变背景图像330位置的方法，该方法进行了关键帧以及时间帧的定义，具体如下示例：

通过如上所述的示例，可实现轻量级的移动端动态页面，并且能够支持 移动终端中的浏览器和应用所使用的webkit内核。

进而由如上所述的示例生成动态页面的页面文件，以供后续使用。

在一个实施例中，还相应地提供了一种动态页面加载装置，如图6所示，该装置包括请求发起模块410、解析模块430、页面绘制模块450和效果实现模块470，其中：

请求发起模块410，用于通过动态页面访问的触发请求获取页面文件。

解析模块430，用于解析页面文件得到动态页面对应的标签和描述标签的样式描述信息。

页面绘制模块450，用于根据标签进行动态页面绘制，以进行标签分别对应的遮罩元素和动画元素的显示。

效果实现模块470，用于在遮罩元素和动画元素上执行对应的样式描述信息，以得到动态页面。

进一步的，在本实施例中，页面文件包括脚本文件和关联的CSS文件，解析模块430如图7所示，包括脚本解析单元431和关联解析单元433，其中：

脚本解析单元431，用于解析脚本文件得到动态页面对应的标签，标签中标示出关联的CSS文件。

关联解析单元433，用于根据标签解析关联的CSS文件得到描述标签的样式描述信息。

进一步的，在本实施例中，页面绘制模块450如图8所示，包括元素布局单元451和显示单元453，其中：

元素布局单元451，用于根据标签相对屏幕进行元素布局，以得到显示的元素及其相对屏幕的位置，显示的元素包括遮罩元素和动画元素。

显示单元453，用于按照相对屏幕的位置进行元素的显示，以使遮罩元素和动画元素显示于屏幕中。

在一个实施例中，动画元素对应的样式描述信息包括将元素设置为背景的属性，显示单元453进一步用于按照相对屏幕的位置，在屏幕中以动画元素为背景进行动画元素和遮罩元素的显示，以使屏幕的显示中所遮罩元素遮罩下方的动画元素。

在另一个实施例中，遮罩元素对应的样式描述信息为CSS遮罩属性，动 画元素对应的样式描述信息为动画属性，效果实现模块进一步用于显示的遮罩元素和动画元素中，将CSS遮罩属性应用于遮罩元素，动画属性应用于动画元素，以得到相对遮罩元素进行动态变化的动态页面。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

虽然已参照几个典型实施方式描述了本发明，但应当理解，所用的术语是说明和示例性、而非限制性的术语。由于本发明能够以多种形式具体实施而不脱离发明的精神或实质，所以应当理解，上述实施方式不限于任何前述的细节，而应在随附权利要求所限定的精神和范围内广泛地解释，因此落入权利要求或其等效范围内的全部变化和改型都应为随附权利要求所涵盖。