CN113468454A - 渲染html页面的方法和装置 - Google Patents

Abstract

本公开提供了一种渲染HTML页面的方法，该方法包括：确定应用程序中的网络视图控件需要加载和显示的HTML页面；确定应用程序中是否内置有用于构建HTML页面的网页模板；以及响应于确定应用程序中内置有用于构建HTML页面的网页模板，通过网络视图控件加载网页模板和用于填充网页模板的填充数据，以渲染出HTML页面。本公开还公开了一种针对应用程序的处理方法、一种渲染HTML页面的装置、一种针对应用程序的处理装置、一种应用程序、一种电子设备和一种计算机可读存储介质。

Description

渲染HTML页面的方法和装置

技术领域

本公开涉及互联网技术领域，更具体地，涉及一种渲染HTML页面的方法、一种渲染HTML页面的装置、一种针对应用程序的处理方法、一种针对应用程序的处理装置、一种应用程序、一种电子设备和一种计算机可读存储介质。

背景技术

在App内基于WebView加载H5页面是目前比较常见的做法。

然而，在实现本公开构思的过程中，发明人发现：现有技术中，在App内基于原生WebView加载H5页面时，所有的内容(如页面框架以及用于填充页面框架的页面内容)都是基于“即用即下载”的方式解析构建的，由此导致H5页面加载速度缓慢甚至出现白屏。

发明内容

有鉴于此，本公开实施例提供了一种能够快速在网络视图控件中启动HTML页面的渲染HTML页面的方法和装置以及针对应用程序的处理方法和装置以及应用程序。

本公开实施例的一个方面提供了一种渲染HTML页面的处理方法，包括：确定应用程序中的网络视图控件需要加载和显示的HTML页面；确定所述应用程序中是否内置有用于构建所述HTML页面的网页模板；以及响应于确定所述应用程序中内置有用于构建所述HTML页面的网页模板，通过所述网络视图控件加载所述网页模板和用于填充所述网页模板的填充数据，以渲染出所述HTML页面。

根据本公开的实施例，所述通过所述网络视图控件加载所述网页模板和用于填充所述网页模板的填充数据，包括：通过所述网络视图控件预加载所述网页模板和所述填充数据，以便提前渲染出所述HTML页面。

根据本公开的实施例，还包括：响应于确定所述应用程序中没有内置用于构建所述HTML页面的网页模板，确定所述应用程序中是否内置有用于构建所述HTML页面的控件和/或组件；以及响应于确定所述应用程序中内置有用于构建所述HTML页面的控件和/或组件，通过所述网络视图控件执行以下操作：预加载所述控件和/或所述组件，以便提前渲染出所述HTML页面的页面布局；以及预加载用于填充所述控件和/或所述组件的填充数据，以便提前渲染出所述HTML页面的页面内容。

根据本公开的实施例，还包括：响应于确定所述应用程序中没有内置用于构建所述HTML页面的控件和/或组件，通过所述网络视图控件预加载所述HTML页面，以便提前进行页面渲染。

根据本公开的实施例，还包括：响应于确定所述应用程序中没有内置用于构建所述HTML页面的网页模板，基于内置于所述应用程序中的CSS文件和JS文件构建所述网页模板。

根据本公开的实施例，还包括：在基于内置于所述应用程序中的CSS文件和JS文件构建所述网页模板之后，生成针对所述网页模板的标识符。

根据本公开的实施例，还包括：将通过所述网络视图控件预加载的填充数据存储在本地数据库中。

根据本公开的实施例，还包括：通过预设图片加载组件加载用于填充所述网页模板的图片。

本公开实施例的一个方面提供了一种针对应用程序的处理方法，包括：在所述应用程序中内置用于构建HTML页面的页面布局的页面元素，其中：所述页面元素包括以下中的一种或多种：网页模板、控件、组件；所述应用程序包括：网络视图控件；以及所述网络视图控件，用于需要在所述应用程序中加载和显示所述HTML页面时，加载或预加载所述页面元素和用于填充所述页面元素的填充数据，以渲染出或提前渲染出所述HTML页面。

根据本公开的实施例，还包括：在所述应用程序中内置用于构建所述网页模板的CSS文件和JS文件。

根据本公开的实施例，还包括：在所述应用程序中内置预设图片加载组件，其中，所述预设图片加载组件，用于加载所述填充数据中包含的图片。

本公开实施例的另一个方面提供了一种渲染HTML页面的装置，包括：第一确定模块，用于确定应用程序中的网络视图控件需要加载和显示的HTML页面；第二确定模块，用于确定所述应用程序中是否内置有用于构建所述HTML页面的网页模板；以及加载模块，用于响应于确定所述应用程序中内置有用于构建所述HTML页面的网页模板，通过所述网络视图控件加载所述网页模板和用于填充所述网页模板的填充数据，以渲染出所述HTML页面。

根据本公开的实施例，所述加载模块还用于：通过所述网络视图控件预加载所述网页模板和所述填充数据，以便提前渲染出所述HTML页面。

本公开实施例的另一个方面提供了一种针对应用程序的处理装置，包括：配置模块，用于在所述应用程序中内置用于构建HTML页面的页面布局的页面元素，其中：所述页面元素包括以下中的一种或多种：网页模板、控件、组件；所述应用程序包括：网络视图控件；以及所述网络视图控件，用于需要在所述应用程序中加载和显示所述HTML页面时，加载或预加载所述页面元素和用于填充所述页面元素的填充数据，以渲染出或提前渲染出所述HTML页面。

本公开实施例的另一个方面提供了一种应用程序，包括：页面元素，用于构建HTML页面的页面布局，其中，所述页面元素包括以下中的一种或多种：网页模板、控件、组件；网络视图控件，用于当需要在所述应用程序中加载和显示所述HTML页面时，加载或预加载所述页面元素和用于填充所述页面元素的填充数据，以渲染出或提前渲染出所述HTML页面。

根据本公开的实施例，还包括：用于构建所述网页模板的CSS文件和JS文件。

根据本公开的实施例，还包括：预设图片加载组件，其中，所述预设图片加载组件，用于加载所述填充数据中包含的图片。

本公开实施例的另一个方面提供了一种电子设备，包括：一个或多个处理器；以及存储器，用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现本公开实施例的方法。

本公开实施例的另一方面提供了一种计算机可读存储介质，存储有计算机可执行指令，所述指令在被执行时用于实现本公开实施例的方法。

本公开实施例的另一方面提供了一种计算机程序，所述计算机程序包括计算机可执行指令，所述指令在被执行时用于实现本公开实施例的方法。

根据本公开的实施例，通过在App中内置一定数量的能够实现常用网页布局的网页元素，如网页模板、控件、组件中的一种或几种，并使这些网页元素随App一起发布，由此当在App内基于WebView等网络视图控件打开H5等HTML页面时，即使是首次打开一个HTML页面，网络视图控件也至少可以直接从本地加载部分资源数据。例如，可以直接从本地加载对应的网页模板用于渲染HTML页面的布局。由此即使是首次打开一个HTML页面，也可以节省部分资源的加载和部分服务的启动，因而整体上可以缩短加载时间，进而可以加快HTML页面的启动速度。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了现有技术中在WebView中启动H5页面的效果图；

图2示意性示出了适于本公开实施例的应用场景；

图3A～3D示意性示出了根据本公开实施例的渲染HTML页面的方法的流程图；

图4示意性示出了根据本公开实施例的针对应用程序的处理方法的流程图；

图5示意性示出了根据本公开实施例的渲染HTML页面的装置的框图；

图6示意性示出了根据本公开实施例的针对应用程序的处理装置的框图；

图7示意性示出了根据本公开实施例的应用程序的框图；以及

图8示意性示出了适于实现本公开实施例的电子设备的框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。在使用类似于“A、B或C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B或C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。

本公开的实施例提供了一种渲染HTML页面的方法以及能够应用该方法的渲染HTML页面的装置。该方法包括确定应用程序中的网络视图控件需要加载和显示的HTML页面；确定上述应用程序中是否内置有用于构建上述HTML页面的网页模板；以及响应于确定上述应用程序中内置有用于构建上述HTML页面的网页模板，通过上述网络视图控件加载上述网页模板和用于填充上述网页模板的填充数据，以渲染出上述HTML页面。

图1示意性示出了现有技术中在WebView中启动H5页面的效果图。

如图1所示，现有技术中，在App内基于原生WebView加载H5页面时，用户会发现H5页面加载速度缓慢甚至白屏一段时间。

在实现本公开发明构思的过程中，发明人发现：现有技术中，在App内基于原生WebView加载H5页面时，所有的内容(如页面框架以及用于填充页面框架的页面内容)都是基于“即用即下载”的方式解析构建的，而文件下载要耗时，WebView创建页面也要耗时，页面渲染还要耗时，由此导致H5页面加载速度缓慢甚至出现白屏。

此外，在实现本公开发明构思的过程中，发明人还发现：在App内基于原生WebView首次加载一个H5页面的速度比后续再次打开同一个H5页面的速度要慢很多，原因预计是WebView首次加载一个H5页面时需要启动的资源和服务都较多。于是发明人尝试在App内启动一个H5页面之前，先基于WebView预加载该H5页面。这样做果然使得第一次打开H5页面变快了。

基于发明人的上述发现，本公开实施例提供了改进的用于在App内基于WebView等网络视图控件加载H5等HTML页面的处理方法。该方法优化了移动端H5页面的启动速度，尤其解决了现有技术中WebView首次加载页面速度较慢的问题，实现了优化用户体验的技术效果。

以下将结合应用场景、附图和具体实施例详细阐述本公开。

图2示意性示出了适于本公开实施例的应用场景。需要注意的是，图2所示仅为可以应用本公开实施例的应用场景的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他场景。

如图2所示，在该应用场景中，App 200内置有多个网页模板201(即网页框架，比如可以是一些常见的网页模板)、多个控件202和多个组件203(即基础组件)，同时还内置有CSS文件204(即层叠样式表文件)和JS文件205。

其中，每个网页模板201对应一种网页布局，因而使用不同的网页模板201可以渲染出不同的网页布局。

此外，一定数量的控件202经过单独组合可以设计出对应的网页布局。同理，一定数量的组件203经过单独组合也可以设计出对应的网页布局。而一定数量的控件202和一定数量的组件203经过混合组合也可以设计出对应的网页布局。

此外，对于当前需要加载的任意一个HTML页面，如果通过上述网页模板201、控件202和组件203都无法实现其网页布局，则还可以通过CSS文件204和JS文件205构建一个能够实现其网页布局的网络模板206。

在该应用场景下，在App 200内基于网络视图控件如WebView加载一个H5页面时，可以通过上述任意一种方式构建其网页布局的渲染。从节约时间的角度出发，可以先从多个网页模板201中选取与其网页框架一致的网页模板201加载。如果无法选取，则再通过对多个控件202和/或多个组件203进行组合得到与其网页框架一致的网页布局进行加载。如果还无法得到，则再通过CSS文件204和JS文件205构建一个能够实现其网页布局的网络模板进行加载。如果还无法得到，则还可以基于该页面的URL通过网络下载得到。

应该理解，图2中的App 200仅仅是示意性的。根据实现需要，还可以选择在的App中内置网页模板、控件和组件中的一种或几种作为网页元素。此外，根据实现需要，还可以在App中内置任意数目的网页模板、和/或控件和/或组件。

图3A～3D示意性示出了根据本公开实施例的渲染HTML页面的方法的流程图。

如图3A所示，该方法例如可以包括操作S310～S330。

在操作S310，确定应用程序中的网络视图控件需要加载和显示的HTML页面。

具体地，在操作S310，例如可以通过读取服务器的目标接口的接口数据来确定应用程序App中的网络视图控件需要加载和显示的HTML页面。

其中，上述服务器的目标接口用于负责下发上述HTML页面。

上述应用程序例如可以是任意安装于移动端的且能够基于网络视图控件加载和显示的HTML页面的App。

上述网络视图控件例如可以是任意能够用于在App内加载HTML页面的控件。例如，可以是WebView。

在操作S320，确定应用程序中是否内置有用于构建HTML页面的网页模板。

在本公开实施例中，内置在App中的网页模板都是基于CSS文件和JS文件等网页资源预先建构的，网络视图控件可以直接加载现成的网页模板来渲染目标HTML页面的网页布局。

此外，App版本不同，在其内打开相同或者类似的HTML页面所使用的网页模板可能也不同。因此，在本公开实施例中，为了使App版本与对应的网页模板相适应，可以使用不同的标记对不同版本的App进行标记，以示区别。

由于App中可以通过内置一定数量的网页模板、控件和组件中的一种或几种作为网页元素来加速启动移动端HTML页面，而使用网页模板时无需进行组合操作，也无需基于CSS文件和JS文件进行构建操作，因而在基于网络视图控件加载和显示HTML页面时，优先考虑加载与该HTML页面匹配的网页模板来渲染网页布局。

具体地，操作S320例如可以包括先确定是否存在与上述应用程序一起发布的一个或者多个网页模板。如果确定存在，则再从这一个或者多个网页模板中选取与上述HTML页面匹配的网页模板。其中，如果能够选取到与上述HTML页面匹配的网页模板，则执行操作S330。如果无法选取到与上述HTML页面匹配的网页模板，则可以执行操作S340，或者可以执行操作S380，或者还可以直接基于上述HTML页面的URL通过网络视图控件加载或者预加载用于构建上述HTML页面的相关文件。

在操作S330，响应于确定应用程序中内置有用于构建HTML页面的网页模板，通过网络视图控件加载网页模板和用于填充网页模板的填充数据，以渲染出HTML页面。

在操作S330中，通过网络视图控件加载网页模板用于渲染HTML页面的布局，通过网络视图控件加载填充数据用于渲染HTML页面的内容。

在一个实施例中，为了在打开HTML页面时(包括第一次打开HTML页面)能够直接展示页面内容，App例如可以在页面打开前预拉取填充数据并进行缓存，这样以来可以减少通过网络视图控件加载填充数据时的请求时间，由此可以尽量避免打开移动端HTML页面时出现白屏。

在一个实施例中，例如可以通过懒加载模式预拉取填充数据。尤其在填充数据包括数据量较大的图片等数据时，可以通过懒加载模式预拉取数据。

在一个实施例中，填充数据中可能包括大量的图片数据。对此，可以使用图片加载控件加载图片数据。即，作为一种可选的实施例，该方法例如还可以包括：通过预设图片加载组件加载用于填充网页模板的图片。

在本公开实施例中，预设图片加载组件例如可以包括但不限于Fresco、Glide和Universal Image Loader。这些组件都具有合理的缓存设计，例如框架中包含的三级缓存设计(依次为内存缓存、本地缓存和网络缓存)，便可以直接给前端带来了良好的交互体验。

在一个优选的实施例中，预设图片加载组件例如可以是Fresco。由此在缓存图片时，不仅可以使用内存缓存，而且还可以使用除此之外的本地缓存空间。因而，通过本公开实施，可以提高图片的加载效率并减少App对内存的消耗，这不仅可以加快页面的启动速度，而且还可以降低内存问题产生的风险。

通过本公开的实施例，通过在App中内置一定数量的能够构建常用网页布局的网页元素，如网页模板、控件、组件中的一种或几种，并使这些网页元素随App一起发布，由此当在App内基于WebView等网络视图控件打开H5等HTML页面时，即使是首次打开一个HTML页面，网络视图控件也至少可以直接从本地加载部分资源数据。例如，可以直接从本地加载对应的网页模板用于渲染HTML页面的布局。由此即使是首次打开一个HTML页面，也可以节省部分资源的加载和部分服务的启动，因而整体上可以缩短加载时间，进而可以加快HTML页面的启动速度，同时可以有效的加快App的响应速度。

作为一个可选的实施例，如图3B所示，操作S330包括操作S331。

在操作S331，通过网络视图控件预加载网页模板和填充数据，以便提前渲染出HTML页面。

具体地，例如可以先通过WebView预创建对象，同时预加载一个使用Java代码拼接的HTML，提前对JS文件和CSS文件等资源进行解析。由此等到WebView真正需要创建对象时便可以直接使用预创建的对象进行替代。这样做的最终效果是替代完成之后可直接调用JS文件来设置页面内容进行界面渲染，不需要再对WebView对象进行重新构建。

通过本公开实施例，采用预加载模式代替即用即下载模式，可以避免加载速度缓慢甚至出现白屏。由此即使首次加载也可以提高加载速度、防止出现白屏。即，采用资源预加载可以构建App内嵌H5等HTML页面的快速响应。

作为一种可选的实施例，如图3C所示，该方法除了包括如图3A和图3B中的操作之外，例如还可以还包括操作S340～S370。

在操作S340，响应于确定应用程序中没有内置用于构建HTML页面的网页模板，确定应用程序中是否内置有用于构建HTML页面的控件和/或组件。

在一个实施例中，如果App中没有内置的网页模板，则可以进一步确定App中是否内置有用于构建HTML页面的控件和/或组件。

在另一个实施例中，如果App中有内置的网页模板但没有与当前的HTML页面匹配的网页模板，则也可以进一步确定App中是否内置有用于构建HTML页面的控件和/或组件。

在操作S340，在一个实施例中，可以确定是否存在一定数量的控件经过单独组合可构建HTML页面的网页布局的场景。在另一个实施例中，可以确定是否存在一定数量的组件经过单独组合可构建HTML页面的网页布局的场景。在另一个实施例中，可以确定是否存在一定数量的控件和一定数量的组件经过混合组合可构建HTML页面的网页布局的场景。

其中，如果上述实施例中的任意一种或者几种场景存在，则可以执行操作S350。否则，如果上述实施例中的任意一种场景都不存在，则可以执行操作S380，或者可以直接基于上述HTML页面的URL通过网络视图控件加载或者预加载用于构建上述HTML页面的相关文件。

在操作S350，响应于确定应用程序中内置有用于构建HTML页面的控件和/或组件，通过网络视图控件执行以下操作(即操作S360和操作S370)。

在操作S360，预加载控件和/或组件，以便提前渲染出HTML页面的页面布局。

预加载控件和/或组件与预加载网页模板类似，在此不再赘述。

在操作S370，预加载用于填充控件和/或组件的填充数据，以便提前渲染出HTML页面的页面内容。

作为一种可选地的实施例，该方法例如还可以包括：将通过网络视图控件预加载的填充数据存储在本地数据库中。

通过本公开实施例，将预加载的填充数据进行本地持久化存储，可以便于应用切换时快速响应。

此外，作为一种可选地的实施例，该方法例如还可以包括：响应于确定应用程序中没有内置用于构建HTML页面的控件和/或组件，通过网络视图控件预加载HTML页面，以便提前进行页面渲染。

此外，作为一种可选地的实施例，如图3D所示，该方法除了包括如图3A和图3B中的操作之外，例如还可以还包括操作S380。

在操作S380，响应于确定应用程序中没有内置用于构建HTML页面的网页模板，基于内置于应用程序中的CSS文件和JS文件构建与该HTML页面匹配的网页模板。

其中，CSS文件为CSS层叠样式表的存放文件。CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述HTML页面上的信息格式化和实现的方式。JS文件用于为HTML页面添加各式各样的动态功能，从而为用户提供更流畅美观的浏览效果。

进一步，构建完成之后，可以将网页模板缓存在本地。

实际上，电商或者商铺举办的优惠活动经常变化，由此导致的与优惠活动关联的H5页面版本随之更新，因而可能导致内置的网页模板无法满足当前的需求。此时，为了保证App的响应速度不受影响，可以在App中内置CSS文件和JS文件，以便能够基于CSS文件和JS文件构建更多网页模板以适应不多更新的H5等HTML页面。

进一步，在基于内置于应用程序中的CSS文件和JS文件完成网页模板构建之后，生成针对网页模板的标识符，以便渲染页面时能够基于标识符引用对应的页面模板。

图4示意性示出了根据本公开实施例的针对应用程序的处理方法的流程图。

如图4所示，该方法例如可以包括操作S410。

在操作S410，在应用程序中内置用于构建HTML页面的页面布局的页面元素。

具体地，页面元素例如可以包括以下中的一种或多种：网页模板、控件、组件。应用程序例如可以包括：网络视图控件，如WebView。网络视图控件，用于需要在应用程序中加载和显示HTML页面时，加载或预加载页面元素和用于填充页面元素的填充数据，以渲染出或提前渲染出HTML页面。

作为一种可选的实施例，该方法例如还可以包括：在应用程序中内置用于构建网页模板的CSS文件和JS文件。

作为一种可选的实施例，该方法例如还可以包括：在应用程序中内置预设图片加载组件。其中，预设图片加载组件如Fresco，用于加载填充数据中包含的图片。

需要说明的是，针对应用程序的处理方法的相关实施例与前述针对HTML页面的处理方法的相关实施例对应相同或类似，在此不再赘述。

图5示意性示出了根据本公开实施例的渲染HTML页面的装置的框图。

如图5所示，针对HTML页面的处理装置500包括第一确定模块510、第二确定模块520和加载模块530。

具体地，第一确定模块510，用于确定应用程序中的网络视图控件需要加载和显示的HTML页面。

第二确定模块520，用于确定应用程序中是否内置有用于构建HTML页面的网页模板。

加载模块530，用于响应于确定应用程序中内置有用于构建HTML页面的网页模板，通过网络视图控件加载网页模板和用于填充网页模板的填充数据，以渲染出HTML页面。

作为一种可选的实施例，上述加载模块还用于通过网络视图控件预加载网页模板和填充数据，以便提前渲染出HTML页面。

图6示意性示出了根据本公开实施例的针对应用程序的处理装置的框图。

如图6所示，针对应用程序的处理装置600包括配置模块610。

配置模块610，用于在应用程序中内置用于构建HTML页面的页面布局的页面元素。

其中，页面元素包括以下中的一种或多种：网页模板、控件、组件。应用程序包括：网络视图控件。网络视图控件，用于需要在应用程序中加载和显示HTML页面时，加载或预加载页面元素和用于填充页面元素的填充数据，以渲染出或提前渲染出HTML页面。

根据本公开的实施例的模块、子模块、单元、子单元中的任意多个、或其中任意多个的至少部分功能可以在一个模块中实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以被拆分成多个模块来实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式的硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，根据本公开实施例的模块、子模块、单元、子单元中的一个或多个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

例如，第一确定模块510、第二确定模块520和加载模块530中的任意多个可以合并在一个模块/单元/子单元中实现，或者其中的任意一个模块/单元/子单元可以被拆分成多个模块/单元/子单元。或者，这些模块/单元/子单元中的一个或多个模块/单元/子单元的至少部分功能可以与其他模块/单元/子单元的至少部分功能相结合，并在一个模块/单元/子单元中实现。根据本公开的实施例，第一确定模块510、第二确定模块520和加载模块530中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，第一确定模块510、第二确定模块520和加载模块530中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

需要说明的是，本公开的实施例中装置部分实施方式与本公开的实施例中方法部分实施方式对应相同或类似，装置部分实施方式的描述具体请参考方法部分实施方式的描述，在此不再赘述。

图7示意性示出了根据本公开实施例的应用程序的框图。

如图7所示，应用程序700包括页面元素710和网络视图控件720。

页面元素710，用于构建HTML页面的页面布局，其中，页面元素包括以下中的一种或多种：网页模板、控件、组件；

网络视图控件720，用于当需要在应用程序700中加载和显示HTML页面时，加载或预加载页面元素710和用于填充页面元素710的填充数据，以渲染出或提前渲染出HTML页面。

具体地，例如可以基于CSS文件和JS文件制作常用的网页模版，并对网页模版进行标号，并在App开发过程中将这些模板内置于App中进行发布。在App使用过程中，如果需要基于App中已有的网页模版渲染HTML页面，则，不需要重新基于CSS文件和JS文件进行拼装构建。直接获取对应的模版标号进行文件加载即可

此外，在App开发过程中还可以将常用的控件和/或组件内置于App中一起发布。还可以对内置于App中的控件和组件进行标号，以便使用时直接获取对应的标号进行文件加载即可。

作为一种可选的实施例，该应用程序例如还可以包括：用于构建网页模板的CSS文件和JS文件。即，在App中内置CSS文件和JS文件，以便使用App中已有的网页模板、控件、组件无法渲染HTML页面时，可以基于这些内置的CSS文件和JS文件重新构建新的网页模板。

作为一种可选的实施例，该应用程序例如还可以包括：预设图片加载组件，其中，预设图片加载组件如Fresco，用于加载填充数据中包含的图片。

需要说明的是，应用程序的相关实施例与针对应用程序的处理方法的相关实施例以及与前述针对HTML页面的处理方法的相关实施例对应相同或类似，在此不再赘述。

图8示意性示出了适于实现本公开实施例的电子设备的框图。图8示出的计算机系统仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图8所示，根据本公开实施例的计算机系统800包括处理器801，其可以根据存储在只读存储器(ROM)802中的程序或者从存储部分808加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。处理器801例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))，等等。处理器801还可以包括用于缓存用途的板载存储器。处理器801可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 803中，存储有系统800操作所需的各种程序和数据。处理器801、ROM 802以及RAM 803通过总线804彼此相连。处理器801通过执行ROM 802和/或RAM 803中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 802和RAM 803以外的一个或多个存储器中。处理器801也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，系统800还可以包括输入/输出(I/O)接口805，输入/输出(I/O)接口805也连接至总线804。系统800还可以包括连接至I/O接口805的以下部件中的一项或多项：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分807；包括硬盘等的存储部分808；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入存储部分808。

根据本公开的实施例，根据本公开实施例的方法流程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。在该计算机程序被处理器801执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质。例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 802和/或RAM 803和/或ROM 802和RAM 803以外的一个或多个存储器。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (19)

1.一种渲染HTML页面的方法，包括：

确定应用程序中的网络视图控件需要加载和显示的HTML页面；

确定所述应用程序中是否内置有用于构建所述HTML页面的网页模板；以及

响应于确定所述应用程序中内置有用于构建所述HTML页面的网页模板，通过所述网络视图控件加载所述网页模板和用于填充所述网页模板的填充数据，以渲染出所述HTML页面。

2.根据权利要求1所述的方法，所述通过所述网络视图控件加载所述网页模板和用于填充所述网页模板的填充数据，包括：

通过所述网络视图控件预加载所述网页模板和所述填充数据，以便提前渲染出所述HTML页面。

3.根据权利要求1或2所述的方法，还包括：

响应于确定所述应用程序中没有内置用于构建所述HTML页面的网页模板，确定所述应用程序中是否内置有用于构建所述HTML页面的控件和/或组件；以及

响应于确定所述应用程序中内置有用于构建所述HTML页面的控件和/或组件，通过所述网络视图控件执行以下操作：

预加载所述控件和/或所述组件，以便提前渲染出所述HTML页面的页面布局；以及

预加载用于填充所述控件和/或所述组件的填充数据，以便提前渲染出所述HTML页面的页面内容。

4.根据权利要求3所述的方法，还包括：

响应于确定所述应用程序中没有内置用于构建所述HTML页面的控件和/或组件，通过所述网络视图控件预加载所述HTML页面，以便提前进行页面渲染。

5.根据权利要求1或2所述的方法，还包括：

响应于确定所述应用程序中没有内置用于构建所述HTML页面的网页模板，基于内置于所述应用程序中的CSS文件和JS文件构建所述网页模板。

6.根据权利要求5所述的方法，还包括：在基于内置于所述应用程序中的CSS文件和JS文件构建所述网页模板之后，

生成针对所述网页模板的标识符。

7.根据权利要求2所述的方法，还包括：

将通过所述网络视图控件预加载的填充数据存储在本地数据库中。

8.根据权利要求1或2所述的方法，还包括：

通过预设图片加载组件加载用于填充所述网页模板的图片。

9.一种针对应用程序的处理方法，包括：

在所述应用程序中内置用于构建HTML页面的页面布局的页面元素，

其中：

所述页面元素包括以下中的一种或多种：网页模板、控件、组件；

所述应用程序包括：网络视图控件；以及

所述网络视图控件，用于需要在所述应用程序中加载和显示所述HTML页面时，加载或预加载所述页面元素和用于填充所述页面元素的填充数据，以渲染出或提前渲染出所述HTML页面。

10.根据权利要求9所述的方法，还包括：

在所述应用程序中内置用于构建所述网页模板的CSS文件和JS文件。

11.根据权利要求9或10所述的方法，还包括：

在所述应用程序中内置预设图片加载组件，

其中，所述预设图片加载组件，用于加载所述填充数据中包含的图片。

12.一种渲染HTML页面的装置，包括：

第一确定模块，用于确定应用程序中的网络视图控件需要加载和显示的HTML页面；

第二确定模块，用于确定所述应用程序中是否内置有用于构建所述HTML页面的网页模板；以及

加载模块，用于响应于确定所述应用程序中内置有用于构建所述HTML页面的网页模板，通过所述网络视图控件加载所述网页模板和用于填充所述网页模板的填充数据，以渲染出所述HTML页面。

13.根据权利要求12所述的装置，所述加载模块还用于：

通过所述网络视图控件预加载所述网页模板和所述填充数据，以便提前渲染出所述HTML页面。

14.一种针对应用程序的处理装置，包括：

配置模块，用于在所述应用程序中内置用于构建HTML页面的页面布局的页面元素，

其中：

所述页面元素包括以下中的一种或多种：网页模板、控件、组件；

所述应用程序包括：网络视图控件；以及

所述网络视图控件，用于需要在所述应用程序中加载和显示所述HTML页面时，加载或预加载所述页面元素和用于填充所述页面元素的填充数据，以渲染出或提前渲染出所述HTML页面。

15.一种应用程序，包括：

页面元素，用于实现HTML页面的页面布局，其中，所述页面元素包括以下中的一种或多种：网页模板、控件、组件；

网络视图控件，用于当需要在所述应用程序中加载和显示所述HTML页面时，加载或预加载所述页面元素和用于填充所述页面元素的填充数据，以渲染出或提前渲染出所述HTML页面。

16.根据权利要求15所述的应用程序，还包括：

用于构建所述网页模板的CSS文件和JS文件。

17.根据权利要求15或16所述的应用程序，还包括：

预设图片加载组件，其中，所述预设图片加载组件，用于加载所述填充数据中包含的图片。

18.一种电子设备，包括：

一个或多个处理器；以及

存储器，用于存储一个或多个程序，

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现权利要求1至11中任一项所述的方法。

19.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器实现权利要求1至11中任一项所述的方法。

Images