CN117251653A - 一种页面渲染方法、装置、电子设备和存储介质 - Google Patents

Abstract

本申请涉及计算机技术领域，尤其涉及一种页面渲染方法、装置、电子设备和存储介质，用以实现高效的页面渲染。其中，方法包括：根据预设的模块构建信息，分别获取每个页面代码模块调用的子代码模块集合，每个页面代码模块包含用于实现相应网页页面渲染的专属代码；每个子代码模块包含用于实现网页页面渲染的公共代码；基于各子代码模块集合，分别获得各子代码模块所属的页面代码模块集合；在访问待渲染页面时，加载待渲染页面使用的第一页面代码模块；基于各页面代码模块集合，确定第一页面代码模块依赖的公共模块并进行预加载，公共模块为被至少两个页面代码模块调用的子代码模块。本申请可不浪费资源、有效保证系统性能，实现高效的页面渲染。

Description

一种页面渲染方法、装置、电子设备和存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面渲染方法、装置、电子设备和存储介质。

背景技术

相关技术中，网页页面内容可通过代码模块的形式体现，基于服务端渲染(ServerSide Render，SSR)框架进行页面渲染时，需要对页面中相关代码模块进行加载，然而，在代码模块按需加载方面，目前的SSR框架无法实现代码模块自动切割、按需加载。

例如，当首页和详情页面同时引入了同一个样式文件时，该文件的内容将会重复的被打包构建在两个页面各自的代码模块中，造成相同内容的重复加载，导致一定的代码冗余，进而引起不必要的资源浪费，造成性能下降。

针对上述问题，相关技术中，通常由开发人员基于自身的经验进行配置代码分割策略，不仅带来极大的操作负担，还受开发人员自身经验的限制，容易产生错误。

因而，如何在不浪费资源、保证性能的情况下，实现高效的页面渲染是亟待解决的。

发明内容

本申请实施例提供一种页面渲染方法、装置、电子设备和存储介质，用以在不浪费资源、保证性能的情况下，实现高效的页面渲染。

本申请实施例提供的一种页面渲染方法，包括：

根据预设的模块构建信息，分别获取每个页面代码模块调用的子代码模块集合，其中，每个页面代码模块包含：用于实现相应网页页面渲染的专属代码；每个子代码模块包含：用于实现至少一个网页页面渲染的公共代码；

基于各个子代码模块集合，分别获得每个子代码模块所属的页面代码模块集合；

在访问待渲染页面时，加载所述待渲染页面使用的第一页面代码模块；以及，基于各个页面代码模块集合，确定所述第一页面代码模块依赖的至少一个公共模块，并对所述至少一个公共模块进行预加载，其中，每个公共模块为被至少两个页面代码模块调用的子代码模块。

本申请实施例提供的一种页面渲染装置，包括：

第一分析单元，用于根据预设的模块构建信息，分别获取每个页面代码模块调用的子代码模块集合，其中，每个页面代码模块包含：用于实现相应网页页面渲染的专属代码；每个子代码模块包含：用于实现至少一个网页页面渲染的公共代码；

第二分析单元，用于基于各个子代码模块集合，分别获得每个子代码模块所属的页面代码模块集合；

渲染单元，用于在访问待渲染页面时，加载所述待渲染页面使用的第一页面代码模块；以及，基于各个页面代码模块集合，确定所述第一页面代码模块依赖的至少一个公共模块，并对所述至少一个公共模块进行预加载，其中，每个公共模块为被至少两个页面代码模块调用的子代码模块。

可选的，所述第二分析单元还用于：

基于各个页面代码模块集合，确定各个子代码模块中的公共模块；

分别根据使用各个公共模块的页面代码模块的模块名称，确定所述各个公共模块各自的模块名称，以使每个公共模块的模块名称表征使用所述公共模块的各个网页页面；

其中，在访问所述待渲染页面时，所述至少一个公共模块是基于所述各个公共模块的模块名称确定的。

可选的，所述第二分析单元具体用于：

针对每个公共模块，分别执行以下操作：

对于一个公共模块，将调用所述一个公共模块的各个页面代码模块的模块名称进行组合，获得所述一个公共模块对应的模块名称。

可选的，所述第二分析单元还用于：

通过哈希算法，将调用所述一个公共模块的各个页面代码模块的模块名称进行组合获得的组合结果，映射为固定长度的字符串；

基于所述字符串调整所述一个公共模块对应的模块名称。

可选的，所述第二分析单元还用于：

将映射得到的各个字符串，与相应的组合结果之间建立模块名称映射关系，所述模块名称映射关系用于表征使用相应的公共模块的各个网页页面。

可选的，所述渲染单元还用于：

由所述待渲染页面切换为下一级页面，所述下一级页面与所述待渲染页面共同调用目标公共模块；

加载所述下一级页面使用的第二页面代码模块，并获取预加载的所述目标公共模块以进行页面渲染。

本申请实施例提供的一种电子设备，包括处理器和存储器，其中，所述存储器存储有计算机程序，当所述计算机程序被所述处理器执行时，使得所述处理器执行上述任意一种页面渲染方法的步骤。

本申请实施例提供一种计算机可读存储介质，其包括计算机程序，当所述计算机程序在电子设备上运行时，所述计算机程序用于使所述电子设备执行上述任意一种页面渲染方法的步骤。

本申请实施例提供一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序存储在计算机可读存储介质中；当电子设备的处理器从计算机可读存储介质读取所述计算机程序时，所述处理器执行所述计算机程序，使得所述电子设备执行上述任意一种页面渲染方法的步骤。

本申请有益效果如下：

本申请实施例提供了一种页面渲染方法、装置、电子设备和存储介质。由于本申请在访问网页页面前的模块构建阶段，会预先根据一个网页页面所用到的代码模块是否被其他网页页面共用，来进行模块划分，确定包含用于实现相应网页页面渲染的专属代码的页面代码模块，及包含用于实现至少一个网页页面渲染的公共代码的子代码模块，进而，基于模块构建信息，分别获取每个页面代码模块调用的子代码模块集合，再基于获得的各个子代码模块集合，反推得到每个子代码模块会被哪些页面代码模块所调用，也即，本申请实施例中，在运行代码前，即可确定页面代码模块与子代码模块之间的依赖关系，进而，在访问页面时，即可直接参考上述构建的依赖关系，快速确定页面相关的各个代码模块，只需加载该页面所用到的代码部分，而不会加载没有用到的部分，且通过将不同页面共用的代码部分放在超文本标记语言(HyperText Markup Language，html)文件的头部预加载缓存，后续即可直接从缓存中读取使用，以保证不同页面也不会加载重复的代码，因而可不浪费资源、有效保证系统性能，实现高效的页面渲染。

本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为相关技术中的一种页面渲染过程的示意图；

图2为本申请实施例中的一种应用场景的一个可选的示意图；

图3为本申请实施例中的一种页面渲染方法的流程示意图；

图4为本申请实施例中的一种页面代码模块的模块名称示意图；

图5为本申请实施例中的一种依赖模块集合的示意图；

图6为本申请实施例中的一种模块依赖关系表的示意图；

图7为本申请实施例中的一种模块名称映射表的示意图；

图8为本申请实施例中的一种待渲染页面的示意图；

图9为本申请实施例中的一种下一级页面的示意图；

图10为本申请实施例中的一种具体的页面渲染方法的实施流程图；

图11A为本申请实施例中的一种页面渲染方法的逻辑示意图；

图11B为本申请实施例中的一种各模块的命名逻辑的示意图；

图12为本申请实施例中的一种页面渲染装置的组成结构示意图；

图13为应用本申请实施例的一种电子设备的一个硬件组成结构示意图；

图14为应用本申请实施例的一种计算装置的一个硬件组成结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请技术方案的一部分实施例，而不是全部的实施例。基于本申请文件中记载的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请技术方案保护的范围。

下面对本申请实施例中涉及的部分概念进行介绍。

网页页面：网页是一个包含html标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式，可通过网页浏览器来阅读。在网络环境中，信息以页面信息组织，用户可通过访问网页页面查看有关信息，网页页面中的信息一般包括但不限于：文本、图像、表格、超链接等基本元素。

页面渲染：就是将数据和模版组装成html，本质上可理解为是字符串的拼接，将数据渲染进一些固定格式的html代码中形成最终的html展示在页面上。其中，html是一种超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。一个网页主要由三部分组成：结构、表现和行为。其中，结构层是html，在html定义网页的结构，主要用于建立网页的骨架，表现层是层叠式样式表单(Cascading Style Sheets，css)，在css设定网页的表现样式，主要是这是html骨架元素的样式，比如位置、颜色等，行为层是编程语言js(JavaScript)，基于控制网页的行为，用于实现网页的功能，完成一些交互等。

css：是一种用来表现html或可扩展标记语言(Extensible Markup Language，XML，标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。css能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。主要的用途是对网页中字体、颜色、背景、图像及其他各种元素的控制，使网页能够完全按照设计者的要求来显示。

代码模块：网页页面的内容主要分为js逻辑内容和css样式内容，这些内容在页面渲染前，是以代码的形式存在的，在访问页面时，则需要加载这些代码进行页面渲染。以css样式内容为例，一个网页页面中，也会存在很多的元素，如各种图标、图片、文案等，这些元素的样式则是基于css代码表征的，因而，一个网页页面可划分为很多的代码模块，基于代码模块，可将从后台获取到的数据渲染到html页面上。

在本申请实施例中，每个代码模块中都会包含一些代码，这些代码可以很小，小到只有一两条语句；也可以很大，大到包含成千上万条语句和复杂的函数定义。具体地，本申请中，根据所包含代码作用的不同，可主要分为两大类代码模块，分别为页面级别的页面代码模块，及子级别的子代码模块。其中，页面代码模块仅包含用于实现相应网页页面渲染的专属代码，即每个网页页面所涉及的仅自身用到的代码可形成一个页面代码模块，而可由不同网页页面共用的公共代码形成的是子代码模块。

模块构建信息：指在构建代码模块时，用以表征相应代码模块及其所调用的代码模块的详情信息。比如页面级别的页面代码模块还可调用子级别的子代码模块，如某一网页中有搜索框时，搜索框可单独设置对应的子代码模块，而该网页的页面代码模块则需调用该子代码模块，也称该页面代码模块依赖该子代码模块。

公共模块：两个及以上页面都会使用到的公共模块代码集合。本申请中的公共模块是指被至少两个页面代码模块调用(依赖)的子代码模块。根据页面逻辑内容、页面样式内容的不同，公共模块中还包括异步样式类的公共模块。其中，异步模块是指不在首次访问页面时加载，而在需要用到的时候才会去加载的模块，异步样式模块则是指包含页面css样式的异步模块。基于此，异步样式类的公共模块即：不在首次访问页面时加载，而在需要用到的时候才会去加载的，包含页面css样式的，会被至少两个页面所使用的模块。

时间复杂度：同一问题可用不同算法解决，而一个算法的质量优劣将影响到算法乃至程序的效率。算法分析的目的在于选择合适算法和改进算法。计算机科学中，算法的时间复杂度是一个函数，它定量描述了该算法的运行时间。这是一个关于代表算法输入值的字符串的长度的函数。时间复杂度常用大O符号表述。

哈希(hash)算法：将任意长度的二进制值映射为较短的固定长度的字符串(可包含数字、字母等)，这个小的字符串称为哈希值。哈希值是一段数据唯一且极其紧凑的表示形式。在本申请实施例中，通过哈希算法可以将子代码模块的模块名称进行简化。

下面对本申请实施例的设计思想进行简要介绍：

常用的页面渲染方法主要包括SSR和客户端渲染(Client Side Render，CSR)。其中，SSR的原理是将超文本标记语言(Hyper TextMarkup Language，HTML)页面及其相应的动态数据在服务端进行组装，然后直接将完整的页面呈现在浏览器。在相关技术中，常见的SSR有：基于Vue的服务端渲染框架(Nuxt.js)；基于React的服务端渲染框架(Next.js)。

一个网页可能会有很多个页面，比如首页、详情页，相关技术是将一个网页所有的代码都打包在一起，在打开网页时，所有的代码都加载好，从首页跳转到详情页时不需要加载新的代码。该方式下，在第一次加载页面时，需要加载的代码比较大，速度较慢，且需要加载一些无用的东西(比如访问首页时，不需要加载详情页)。

除此之外，在异步样式的公共模块预加载方面，相关的SSR框架的实现逻辑全部涉及到运行时(指代码实际执行的时间节点)的逻辑，具体地，在运行时去探测本次请求所涉及到的模块，在运行的时候，根据一定的逻辑算法收集所有的依赖关系再注入页面中，造成一定的运行时性能损耗。

如图1所示，其为相关技术中的一种页面渲染过程的示意图。当不同页面加载相同模块时，比如首页和详情页头部都有搜索框样式(即公共模块)，则通过会单独拆分这个模块(如搜索框模块)出来动态加载，也就是常见的0.chunk1.chunk这样的文件，该方式下，需要清楚什么时候加载这个搜索框文件。很显然，图1所示的相关技术未做任何处理，只有在首页代码执行到了一定程度时，才知道首页有一个搜索框模块，进而才去加载该模块，这样会有一个延迟的现象，搜索框模块的样式在页面中出现的会晚(页面的底部的内容和样式都已渲染，顶部的搜索框才突然出现)，造成页面闪烁。

有鉴于此，本申请实施例提出了一种页面渲染方法、装置、电子设备和存储介质。由于本申请在访问网页页面前的模块构建阶段，会预先根据一个网页页面所用到的代码模块是否被其他网页页面共用，来进行模块划分，确定包含用于实现相应网页页面渲染的专属代码的页面代码模块，及包含用于实现至少一个网页页面渲染的公共代码的子代码模块，进而，基于模块构建信息，分别获取每个页面代码模块调用的子代码模块集合，再基于获得的各个子代码模块集合，反推得到每个子代码模块会被哪些页面代码模块所调用，也即，本申请实施例中，在运行代码前，即可确定页面代码模块与子代码模块之间的依赖关系，进而，在访问页面时，即可直接参考上述构建的依赖关系，快速确定页面相关的各个代码模块，只需加载该页面所用到的代码部分，而不会加载没有用到的部分，且通过将不同页面共用的代码部分放在html文件的头部预加载缓存，后续即可直接从缓存中读取使用，以保证不同页面也不会加载重复的代码，因而可不浪费资源、有效保证系统性能，实现高效的页面渲染。

以下结合说明书附图对本申请的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本申请，并不用于限定本申请，并且在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

如图2所示，其为本申请实施例的应用场景示意图。该应用场景图中包括两个终端设备210和一个服务器220。

在本申请实施例中，终端设备210包括但不限于手机、平板电脑、笔记本电脑、台式电脑、电子书阅读器、智能语音交互设备、智能家电、车载终端等设备；终端设备上可以安装有页面浏览、页面渲染等相关的客户端，该客户端可以是软件(例如浏览器)，也可以是网页、小程序等，服务器220则是与软件或是网页、小程序等相对应的后台服务器，或者是专门用于进行页面渲染的服务器，本申请不做具体限定。服务器220可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。

需要说明的是，本申请各实施例中的页面渲染方法可以由电子设备执行，该电子设备可以为终端设备210或者服务器220，即，该方法可以由终端设备210或者服务器220单独执行，也可以由终端设备210和服务器220共同执行。本申请实施例提出了一种新的页面渲染框架，基于上述概括，该框架可部署在终端设备210，也可部署在服务器220。一般情况下，该框架为SSR框架，即部署在服务器，相应地，该方法一般由服务器220单独执行。

在一种可选的实施方式中，终端设备210与服务器220之间可以通过通信网络进行通信。

在一种可选的实施方式中，通信网络是有线网络或无线网络。

需要说明的是，图2所示只是举例说明，实际上终端设备和服务器的数量不受限制，在本申请实施例中不做具体限定。

本申请实施例中，当服务器的数量为多个时，多个服务器可组成为一区块链，而服务器为区块链上的节点；如本申请实施例所公开的页面渲染方法，其中所涉及的模块构建信息、模块名称、模块之间的依赖关系、模块包含的代码等都可保存于区块链上。

此外，本申请实施例可应用于各种场景，包括但不限于云技术、人工智能、智慧交通、辅助驾驶等场景。

下面结合上述描述的应用场景，参考附图来描述本申请示例性实施方式提供的页面渲染方法，需要注意的是，上述应用场景仅是为了便于理解本申请的精神和原理而示出，本申请的实施方式在此方面不受任何限制。

参阅图3所示，为本申请实施例提供的一种页面渲染方法的实施流程图，以服务器为执行主体为例，该方法的具体实施流程如下步骤S31-S33：

S31：服务器根据预设的模块构建信息，分别获取每个页面代码模块调用的子代码模块集合。

其中，每个页面代码模块包含：用于实现相应网页页面渲染的专属代码；每个子代码模块包含：用于实现至少一个网页页面(可简称页面)渲染的公共代码。

在本申请实施例中，页面代码模块为页面级别的模块，页面代码模块只包含只在这个页面用到的代码，即实现相应网页页面渲染的专属代码，比如，首页的页面代码模块就只包含只在首页用到的代码；而子代码模块则是从属于页面级别的代码模块的子级别代码模块，可包含多个页面所公共用到的代码，比如某一子代码模块为搜索框模块，首页和详情页都有搜索框时，该模块中的代码在首页和详情页都用到了，即包含首页和搜索页所公共用到的搜索框部分的代码。

其中，子代码模块也可分为不同的级别，如一级别子代码模块、从属于一级子代码模块的二级别子代码模块、从属于二级子代码模块的三级子代码模块等。

比如，搜索框模块还可进一步划分，比如搜索框模块还可包括a模块(如输入框模块)、b模块(如放大镜图标模块)、c模块(下拉列表模块)，则搜索框模块可作为一级子代码模块，a模块、b模块和c模块为二级子代码模块，这些子代码模块都是可由至少一个页面共用的代码，而非专属于某个页面的专属代码。

本申请实施例中的页面渲染方法，摒弃了传统的运行时收集代码模块之间的依赖关系的思路。通过利用构建时模块的构建信息来显示的建立模块之间的联系。下面对模块的构建过程进行详细说明：

一种可选的实施方式为，通过模块名称来显示的建立模块与页面之间，模块与模块之间的联系：

在步骤S31之前，还可由服务器分别为每个网页页面构建各自的页面代码模块，并分别为各个页面代码模块分配模块名称，以使每个页面代码模块的模块名称表征该页面代码模块所属的网页页面。

在本申请实施例中，根据页面内容的不同，模块包含的代码分为两大类：js代码和css代码，其中，js代码与页面的逻辑内容相关，用于控制网页的行为(如用户点击某一图标时页面怎样跳转)，css与页面的样式内容相关，用于设定网页的表现样式(如页面中某一图标的展示位置、大小、图案等)。

具体地，为页面代码模块在构建的时候显示的分配模块名称，其中，每个网页页面组件构建出来的模块都可分为js文件(也即页面js代码模块)和css文件(也即页面css代码模块)两部分。

参阅图4所示，其为本申请实施例中的一种页面代码模块的模块名称示意图。比如首页模块构建出来的模块名称为：js文件名称为index.chunk.js(首页逻辑)，css文件为index.chunk.css(首页样式)；同理，详情页模块构建出来的模块名称：js文件名称为detail.chunk.js(详情页逻辑)，css文件为detail.chunk.css(详情页样式)；用户页模块构建出来的模块名称为：js文件名称为user.chunk.js(用户页逻辑)，css文件为user.chunk.css(用户页样式)。

需要说明的是，本申请中的基础开发背景是一个不同于相关技术中的SSR框架的一种新的框架(由开发人员自行开发的可控框架)，在此基础上，对于每个网页页面，例如用户页面，可新建一个user文件夹，代表用户页面，进而，基于该框架则可将user文件夹所对应的代码打包为user.xxx文件，在运行时，通过文件的名称user.xxx可知，该文件为用户模块相关的文件；同理index.xxx可代表首页，等等。

在上述实施方式中，上述所列举的首页记作index，详情页记作detail，用户页记作user…的方式只是举例说明，任何一种显示分配模块名称的方式都适用于本申请实施例。

在相关技术中，页面越复杂，对应的推断时间越长，而在本申请实施例中，结合模块名称，可直接将模块与页面之间显示的关联，因而，本申请可以通过O(1)时间复杂度得到模块与页面之间的关联，无论页面再复杂，推断时间固定，都为O(1)，即能在常数时间获得到模块与页面之间的关联。

在本申请实施例中，采用上述方式即可通过模块名称显示的建立页面级别的页面代码模块与页面之间的关联，通过页面级文件的命名，可以知道它属于哪个页面。

在此基础上，还可进一步通过框架中构建工具提供的信息(如每个页面代码模块解析的模块对象)，从中获取到每一个页面代码模块的importIds集合，importIds集合指页面代码模块的依赖模块集合，也即本文中的子代码模块集合，表征一个页面代码模块所依赖、加载的各个子代码模块。

比如有一个首页模块，基于构建工具提供的构建信息可以获得该首页模块一共要加载哪些子级别的子代码模块，比如通过构建信息获取到首页模块依赖搜索框模块、首页其他模块，则可形成首页模块对应的子代码模块集合，该集合可以是列表形式，也可以是其他形式，本文不做具体限定。

如图5所示，其为本申请实施例中的一种依赖模块集合的示意图，其中，首页的页面代码模块index.chunk.css(首页样式)又进一步依赖子代码模块：data1模块、data2模块、data3模块、首页其他模块；详情页的页面代码模块detail.chunk.css(详情页样式)又进一步依赖子代码模块：data2模块、data3模块、详情页其他模块；用户页的页面代码模块user.chunk.css(用户页样式)又进一步依赖子代码模块：data1模块、data3模块、用户页其他模块。

很显然，图5可以清晰的表示每个页面代码模块的依赖模块集合，也即子代码模块集合，该集合指的是一个页面级别的模块依赖了哪些子级别的模块，通过该信息可反推出一个子级别的模块会被哪些页面级别的模块依赖，以获得每个子代码模块对应的页面代码模块，具体过程如下：

S32：服务器基于各个子代码模块集合，分别获得每个子代码模块所属的页面代码模块集合。

在本申请实施例中，获取到每个页面代码模块各自的子代码模块集合后，则可建立模块依赖关系表，确定每一个子代码模块属于最顶层的哪一个页面代码模块。例如，首页加载了搜索框模块以及首页其他模块，用户页用到了搜索框模块以及用户页其他模块，这时则可推断出搜索框模块为首页和用户页共同用到的模块。同理，也可确定其他的子代码模块都被哪些页面代码模块所依赖，也即在本申请实施例中，通过模块的名称，可以知道模块被哪些页面用到，可以轻易的获得这种模块依赖关系。

具体地，本申请中的页面代码模块就是最顶层的，需要找寻每一个子代码模块最终会属于哪几个页面代码模块会用的，考虑到一个子代码模块可以在多个页面中被使用，因而，本申请实施例将遍历的记录保存在一个对象中，当某一子代码模块重复出现时则新增一条记录。例如，date模块首次在获取首页模块的依赖时发现了它，此时在模块依赖关系表中建立一个关系date:[index]，代表date模块会在index模块中被使用。当后续再在其他页面中例如详情页，再度发现到使用了date模块时，在它的依赖关系中添加一项date:[index，detail]，以此类推即可。

需要说明的是，考虑到本申请中的子代码模块也可以有多个级别，因而，该关系的获取过程可采用深度递归的方式，通过遍历各个页面代码模块的子代码模块集合并进行记录，获得各个子代码模块所属的页面代码模块集合，进而生成模块依赖关系表。

具体地，深度递归的过程指：比如首页和用户页都依赖搜索框模块，搜索框内部又依赖了其他子代码模块，则首先会记录搜索框模块是index和user共用，搜索框内依赖的其他子代码模块依赖于搜索框，因而这些其他子代码模块也是index和user共用，这样一层一层递归，最后则可记载每一个小文件都被哪些页面所引用，获得每一个级别的子代码模块所属的页面代码模块集合。

仍以图5所示为例，由图5可知，上述几个页面所依赖到的子代码模块有data1模块、data2模块、data3模块。具体地，data1模块被首页和用户页所依赖，data2模块被首页和详情页所依赖，data3模块被首页、详情页和用户页所依赖，基于上述特征，可确定每个子代码模块所属的页面代码模块所组成的集合，每个子代码模块对应有一个页面代码模块集合，该集合包含依赖相应的子代码模块的各个页面代码模块。

在本申请实施例中，可结合每个子代码模块所属的页面代码模块集合。通过模块依赖关系表来表示每个子代码模块与其对应的页面代码模块之间的依赖关系。

具体地，通过上述过程可得到图6所示的模块依赖关系表，该表列举了图5所示的三个子代码模块各自对应的页面代码模块集合，分别为：date1:[index，user]；date2:[index，detail]；date3:[index，detail，user]。

可选的，基于各个页面代码模块集合，可确定各个子代码模块中的被至少两个页面代码模块依赖的公共模块；进而，分别根据使用各个公共模块的页面代码模块的模块名称，确定各个公共模块各自的模块名称，以使每个公共模块的模块名称表征使用该公共模块的各个网页页面。这样，在后续访问待渲染页面或是待渲染页面的下一级页面时，都可直接根据各个公共模块的模块名称，快速的确定相关的公共模块。

具体地，在本申请实施例中，可以获取到任意一个子代码模块文件一共会在多少个顶层的页面代码模块中被使用，当一个子代码模块同时被两个以上的页面使用时，则可认为该子代码模块是一个公共模块，通过该方式，可以从各个子代码模块中筛选出公共模块。

以图5所示为例，对于首页、详情页和用户页，所依赖的子代码模块一共有6种，分别为：data1模块、data2模块、data3模块、首页其他模块、详情页其他模块和用户页其他模块。其中，data1模块被首页(index)和用户页(user)共同使用，data2模块被首页和详情页(detail)共同使用，data3模块被首页、用户页和详情页共同使用，这三个子代码模块属于公共模块。

进一步地，将这种被至少两个页面使用的子代码模块抽离出来，对于每个子代码模块，单独构建为一个文件。

进一步地，针对每个公共模块，分别将调用同一公共模块的各个页面代码模块的模块名称进行组合，获得该公共模块对应的模块名称，以直接通过模块名称确定该模块会在哪几个页面被使用。

仍以上述图6所列举的模块依赖关系表为例，则表示date1模块同时在首页和用户页被使用，则可将date1模块单独构建为index-user.chunk.css；同理，则可将date2模块单独构建为index-detail.chunk.css；将date3模块单独构建为index-detail-user.chunk.css。

基于上述实施方式，通过上述的关系，可以将模块粒度拆的很细，以保证每一个模块只包含它所用到的代码，不包含无需用到的代码。并且，本申请一切所需的信息都是在构建的时候生成，这样，在页面渲染时可直接使用这些信息。没有任何运行时的性能损耗。

进一步地，对于公共模块的命名，还可在此基础上进行优化。例如，当应用复杂度上升时，一个公共模块可能会在非常多的页面都被使用，如果此时用模块名称的组合作为最终的名称，那么文件名将会非常的长。因而，本申请采用hash算法来统一的优化模块名称，再建立一个模块名称映射表，以在不影响算法效率的情况下，保证最终生成的公共模块的模块名称是固定长度的。

具体地，通过哈希算法，将调用一个公共模块的各个页面代码模块的模块名称进行组合获得的组合结果，映射为固定长度的字符串；进而，基于字符串调整一个公共模块对应的模块名称。并且，将映射得到的各个字符串，与相应的组合结果之间建立模块名称映射关系，模块名称映射关系用于表征使用相应的公共模块的各个网页页面。

如图7所示，其为本申请实施例中的一种模块名称映射表的示意图，其中，hash1对应的模块名称组合为user-index，hash2对应的模块名称组合为detail-index，hash3对应的模块名称组合为user-detail-index。基于此，可将date1模块单独构建为hash1.chunk.css；同理，则可将date2模块单独构建为hash2.chunk.css；将date3模块单独构建为hash3.chunk.css。

在上述实施方式中，通过hash算法来统一的优化模块名称，并通过模块名称映射关系表征映射后的字符与映射前的模块名称的组合之间的关联，以便结合优化后公共模块的模块名称和模块名称映射关系，快速地确定使用相应的公共模块的各个网页页面。

因为本申请中主要解决的是如何提前搜集页面所需要的所有必须的css文件，然后将它们放在头部提前加载，以防止页面闪烁，因而通过上述所列举的方式，便于页面访问时查找相关所必须的公共模块。

S33：服务器在访问待渲染页面时，加载待渲染页面使用的第一页面代码模块；以及，基于各个页面代码模块集合，确定第一页面代码模块依赖的至少一个公共模块，并对至少一个公共模块进行预加载。

其中，每个公共模块为被至少两个页面代码模块调用的子代码模块，在步骤S33中的，第一页面代码模块依赖的公共模块则为除了被第一页面代码模块依赖之外，还会被至少一个其他页面的页面代码模块所依赖。

需要说明的是，本申请实施例中的公共模块也可分为js代码模块和css代码模块，考虑到页面渲染时，页面闪烁主要与样式内容的渲染相关，因而，本申请主要是解决的是如何提前搜集页面所需要的所有必须的css文件。

可选的，步骤S33中的至少一个公共模块包括异步样式的公共模块(可简称异步样式模块)，其中，异步样式的公共模块为包含网页页面层叠样式，且不在首次访问网页页面时加载的模块。

在相关技术中，异步模块的加载逻辑全部涉及到运行时的逻辑，即在访问网页页面时，才会去构建模块之间的依赖关系，而本申请实施例中，在运行前收集模块依赖关系，在访问页面时，则可直接利用之前收集的模块依赖关系，确定出待渲染页面所需要的所有必须的css文件，对其中属于公共模块的css文件进行预加载，以防止页面闪烁。

具体地，结合上述构建出来的模块清单(该清单中可记录各个模块的模块名称)和模块依赖关系，当访问一个页面时，可以通过O(1)的时间复杂度直接得到该页面会使用到的所有模块文件，即能在常数时间获得到该页面会使用到的所有模块文件，包括页面代码模块和该页面代码模块依赖的公共模块。

例如，当访问的待渲染页面为首页时，首先会加载只在首页出现的代码，比如index.chunk.css样式文件，进而，搜索之前建立的模块依赖关系中哪些公共模块有被首页模块(index.chunk.css)引用的部分(也即寻找有哪些公共模块的依赖中包含首页模块)，比如搜索框模块index-user.chunk.css，则在加载首页时，除了加载首页自己用到的代码，还会预加载公共模块的代码以进行缓存。具体地，可将这些公共模块提前放在html文件的头部来加载，以此来避免出现样式闪烁的问题。

在本申请实施例中，通过将css文件放在头部，在加载html生成文档对象化模型树(Document Object Model tree，DOM tree)的时候，就可以同时对DOM tree进行渲染。这样可以防止闪跳，白屏或者布局混乱。

仍以上述图5所列举的为例，假设待渲染页面为首页，则根据模块清单和模块依赖关系可知，在公共模块a(data1模块)、公共模块b(data2模块)、公共模块c(data3模块)的依赖中都包含首页模块(index.chunk.css)，因而需要将这三个公共模块中的部分或全部，提前放在html文件的头部来加载。

参阅图8所示，其为本申请实施例中的一种待渲染页面的示意图，图8所示的待渲染页面为某一浏览器中的首页，在用户打开浏览器时，即可呈现如图8所示的页面，该页面中显示有搜索图标S80和搜索框S81，除此之外，还有一些推荐的信息。其中，虚线框S80内的元素可看作是公共模块a(data1模块)对应的数据，虚线框S81内的元素可看作是公共模块b(data2模块)对应的数据。

可选的，在步骤S33之后，还可进行页面切换(页面跳转)，具体过程如下：

由待渲染页面切换为下一级页面，其中，该下一级页面与待渲染页面共同调用目标公共模块；加载下一级页面使用的第二页面代码模块，并获取预加载的目标公共模块以进行页面渲染。

例如，该下一级页面为详情页，则根据模块清单和模块依赖关系可知，详情页和首页共同调用的目标公共模块为：公共模块b(data2模块)、公共模块c(data3模块)，则在用户由首页切换为详情页时，加载详情页页面使用的第二页面代码模块(即detail.chunk.css)，并获取预加载的目标公共模块：data2模块、data3模块，基于获取到的这些代码进行页面渲染。

参阅图9所示，其为本申请实施例中的一种下一级页面的示意图，图9所示的下一级页面为图8所示的浏览器中的详情页，当用户在图8所示的搜索框中输入搜索关键词“张三”进行搜索时，即可呈现如图9所示的详情面，该页面中显示有搜索图标S90和搜索框S91，除此之外，还有一些搜索的结果，以信息卡片的形式在页面中展示，如图9中的“张三-BxDx百科”、“张三-热议”。其中，虚线框S90内的元素也可看作是公共模块a(data1模块)对应的数据，虚线框S91内的元素也可看作是公共模块b(data2模块)对应的数据。很显然，在由图8所示的首页跳转至图9所示的详情页时，元素1-搜索图标和元素2-搜索框的样式不变。

又比如，该下一级页面为用户页，则根据模块清单和模块依赖关系可知，用户页和首页共同调用的目标公共模块为：公共模块a(data1模块)、公共模块c(data3模块)，则在用户由首页切换为用户页时，加载用户页页面使用的第二页面代码模块(即user.chunk.css)，并获取预加载的目标公共模块：data1模块、data3模块，基于获取到的这些代码进行页面渲染。

在上述实施方式中，在由待渲染页面跳转到下一级页面时，只需要加载下一级页面的第二页面代码模块(只包含下一级页面自身用到的代码)，并从缓存中获取相关的公共模块的代码，由于待渲染页面和下一级页面的公共代码在访问待渲染页面时已经加载并缓存，因而在访问下一级页面时，可直接从缓存中获取相关的公共代码，没有任何的资源消耗，无需重新加载公共模块，按需加载所需模块就能实现页面切换效果，降低了重复加载公共文件的时间，从而减少了页面切换的时间，提高了页面访问效率；而且消除了用户在等待页面切换时候卡顿，页面空白等不友好体验。

并且，在本申请实施例中，通过模块命名可以快速知道公共模块被哪些页面用到，在通过哈希算法进行模块名称映射的情况下，结合模块名称映射关系，也可以快速的确定公共模块被哪些页面用到，基于此可有效提高模块代码的获取速度，进而实现高效的页面渲染。

参阅图10所示，其为本申请实施例中的一种具体的页面渲染方法的实施流程图。该方法的具体实施流程如下：

步骤S101：服务器分别为每个网页页面构建各自的页面代码模块，并分别为各个页面代码模块显示分配模块名称；

步骤S102：服务器根据模块构建信息，分别获取每个页面代码模块调用的子代码模块集合；

步骤S103：服务器基于各个子代码模块集合，分别获得每个子代码模块所属的页面代码模块集合；

步骤S104：服务器基于各个页面代码模块集合，确定各个子代码模块中的公共模块；

步骤S105：服务器分别根据使用各个公共模块的页面代码模块的模块名称，确定各个公共模块各自的模块名称；

步骤S106：服务器通过哈希算法，对公共模块的模块名称进行优化；

步骤S107：服务器在访问待渲染页面时，根据各模块名称和模块依赖关系，加载待渲染页面使用的第一页面代码模块，并基于各个页面代码模块集合，确定第一页面代码模块依赖的至少一个公共模块，对至少一个公共模块进行预加载；

步骤S108：由待渲染页面切换为下一级页面时，服务器根据各模块名称和模块依赖关系，加载下一级页面使用的第二页面代码模块，并获取预加载的目标公共模块以进行页面渲染。

在本申请实施例中，可通过自动化的在框架层面实现上述模块构建、模块依赖关系构建等的功能，不依赖开发者的手动优化，最大化的降低操作负担；此外，保证每一个页面在加载代码的时候，只会加载该页面所用到的部分，而不会去加载没有用到的部分，同时不同页面也不会去加载重复的东西。

下面结合图11A和图11B，对本申请实施例中的页面渲染的逻辑进行简要概括。

参阅图11A所示，其为本申请实施例中的一种页面渲染方法的逻辑示意图。图11A中主要是以css模块为例进行举例说明的(js模块也类似，重复之处不再赘述)：

在构建阶段：首先，需要为每个网页页面显示分配模块名称，如首页模块index.chunk.css，详情页模块detail.chunk.css，用户页模块user.chunk.css，…；进而，获取上述三个页面代码模块各自的依赖模块集合(即获取各个依赖模块集合)，如index.chunk.css：data1模块、data2模块、data3模块、首页其他模块，detail.chunk.css：data2模块、data3模块、详情页其他模块，user.chunk.css：data1模块、data3模块、用户页其他模块，…；进而通过构建模块依赖关系，确定公共模块并为公共模块命名(具体过程可参见上述实施例，重复之处不再赘述)，如：data1模块：index-user.chunk.css(也可以是user-index.chunk.css，附图未示出)，date2模块：index-detail.chunk.css(也可以是detail-index.chunk.css，附图未示出)；date3模块：index-detail-user.chunk.css(也可以是user-detail-index.chunk.css，附图未示出)。

基于上述基础，在运行阶段，则可根据模块清单(含模块名称)和模块依赖关系，加载/预加载模块代码，渲染页面。

基于上述过程，即可保证每一个页面在加载代码的时候，只会加载该页面所用到的部分，而不会去加载没有用到的部分，同时不同页面也不会去加载重复的东西。

下面对各模块的命名过程进行简要概括：

参阅图11B所示，其为本申请实施例中的一种各模块的命名逻辑的示意图。在本申请实施例中，所有页面都依赖header，具体地，首页详情页都依赖weui。其中，weui是一个用户界面(User Interface，UI)样式库。

比如，为首页模块分配模块名称(chunkName)：index.chunk.css，表示只在首页用到的样式代码；同理，详情页模块：detail.chunk.css，表示只在详情页用到的样式代码，用户页模块，user.chunk.css，表示只在用户页用到的样式代码；通过分析模块元信息，找到它们都使用的公共模块，再找到公共模块对应的最顶层页面(即上层chunk)，并分配特定名称，如包含首页详情页公共样式命名为：detail-index.chunk.css，包含首页详情页用户页公共样式命名为：user-detail-index.chunk.css。

在此基础上，还可通过哈希算法进行模块名称的优化。

在本申请实施例中，通过构建阶段各模块的命名，即可直接体现出模块与页面之间的联系，模块与模块之间的联系，便于运行阶段相关代码的加载。并且，该功能可自动化的在框架层面实现，不依赖开发者的手动优化。

基于相同的发明构思，本申请实施例还提供一种页面渲染装置。如图12所示，其为页面渲染装置1200的结构示意图，可以包括：

第一分析单元1201，用于根据预设的模块构建信息，分别获取每个页面代码模块调用的子代码模块集合，其中，每个页面代码模块包含：用于实现相应网页页面渲染的专属代码；每个子代码模块包含：用于实现至少一个网页页面渲染的公共代码；

第二分析单元1202，用于基于各个子代码模块集合，分别获得每个子代码模块所属的页面代码模块集合；

渲染单元1203，用于在访问待渲染页面时，加载待渲染页面使用的第一页面代码模块；以及，基于各个页面代码模块集合，确定第一页面代码模块依赖的至少一个公共模块，并对至少一个公共模块进行预加载，其中，每个公共模块为被至少两个页面代码模块调用的子代码模块。

可选的，至少一个公共模块包括异步样式的公共模块，其中，异步样式的公共模块为包含网页页面层叠样式，且不在首次访问网页页面时加载的模块。

可选的，装置还包括：

模块构建单元1204，用于在第一分析单元1201根据预设的模块构建信息，分别获取每个页面代码模块调用的子代码模块集合之前，分别为每个网页页面构建各自的页面代码模块，并分别为各个页面代码模块分配模块名称，以使每个页面代码模块的模块名称表征页面代码模块所属的网页页面；

其中，在访问待渲染页面时，第一页面代码模块是基于各个页面代码模块的模块名称确定的。

可选的，第二分析单元1202还用于：

基于各个页面代码模块集合，确定各个子代码模块中的公共模块；

分别根据使用各个公共模块的页面代码模块的模块名称，确定各个公共模块各自的模块名称，以使每个公共模块的模块名称表征使用公共模块的各个网页页面；

其中，在访问待渲染页面时，至少一个公共模块是基于各个公共模块的模块名称确定的。

可选的，第二分析单元1202具体用于：

针对每个公共模块，分别执行以下操作：

对于一个公共模块，将调用一个公共模块的各个页面代码模块的模块名称进行组合，获得一个公共模块对应的模块名称。

可选的，第二分析单元1202还用于：

通过哈希算法，将调用一个公共模块的各个页面代码模块的模块名称进行组合获得的组合结果，映射为固定长度的字符串；

基于字符串调整一个公共模块对应的模块名称。

可选的，第二分析单元1202还用于：

将映射得到的各个字符串，与相应的组合结果之间建立模块名称映射关系，模块名称映射关系用于表征使用相应的公共模块的各个网页页面。

可选的，渲染单元1203还用于：

由待渲染页面切换为下一级页面，下一级页面与待渲染页面共同调用目标公共模块；

加载下一级页面使用的第二页面代码模块，并获取预加载的目标公共模块以进行页面渲染。

由于本申请在访问网页页面前的模块构建阶段，会预先根据一个网页页面所用到的代码模块是否被其他网页页面共用，来进行模块划分，确定包含用于实现相应网页页面渲染的专属代码的页面代码模块，及包含用于实现至少一个网页页面渲染的公共代码的子代码模块，进而，基于模块构建信息，分别获取每个页面代码模块调用的子代码模块集合，再基于获得的各个子代码模块集合，反推得到每个子代码模块会被哪些页面代码模块所调用，也即，本申请实施例中，在运行代码前，即可确定页面代码模块与子代码模块之间的依赖关系，进而，在访问页面时，即可直接参考上述构建的依赖关系，快速确定页面相关的各个代码模块，只需加载该页面所用到的代码部分，而不会加载没有用到的部分，且通过将不同页面共用的代码部分放在html文件的头部预加载缓存，后续即可直接从缓存中读取使用，以保证不同页面也不会加载重复的代码，因而可不浪费资源、有效保证系统性能，实现高效的页面渲染。

为了描述的方便，以上各部分按照功能划分为各模块(或单元)分别描述。当然，在实施本申请时可以把各模块(或单元)的功能在同一个或多个软件或硬件中实现。

在介绍了本申请示例性实施方式的页面渲染方法和装置之后，接下来，介绍根据本申请的另一示例性实施方式的电子设备。

所属技术领域的技术人员能够理解，本申请的各个方面可以实现为系统、方法或程序产品。因此，本申请的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

与上述方法实施例基于同一发明构思，本申请实施例中还提供了一种电子设备。在一种实施例中，电子设备的结构可以如图13所示，包括存储器1301，通讯模块1303以及一个或多个处理器1302。

存储器1301，用于存储处理器1302执行的计算机程序。存储器1301可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统，以及运行即时通讯功能所需的程序等；存储数据区可存储各种即时通讯信息和操作指令集等。

存储器1301可以是易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储器1301也可以是非易失性存储器(non-volatilememory)，例如只读存储器，快闪存储器(flash memory)，硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)；或者存储器1301是能够用于携带或存储具有指令或数据结构形式的期望的计算机程序并能够由计算机存取的任何其他介质，但不限于此。存储器1301可以是上述存储器的组合。

处理器1302，可以包括一个或多个中央处理单元(central processing unit，CPU)或者为数字处理单元等等。处理器1302，用于调用存储器1301中存储的计算机程序时实现上述页面渲染方法。

通讯模块1303用于与终端设备和其他服务器进行通信。

本申请实施例中不限定上述存储器1301、通讯模块1303和处理器1302之间的具体连接介质。本申请实施例在图13中以存储器1301和处理器1302之间通过总线1304连接，总线1304在图13中以粗线描述，其它部件之间的连接方式，仅是进行示意性说明，并不引以为限。总线1304可以分为地址总线、数据总线、控制总线等。为便于描述，图13中仅用一条粗线描述，但并不描述仅有一根总线或一种类型的总线。

存储器1301中存储有计算机存储介质，计算机存储介质中存储有计算机可执行指令，计算机可执行指令用于实现本申请实施例的页面渲染方法。处理器1302用于执行上述的页面渲染方法，如图3所示。

在一些可能的实施方式中，根据本申请的计算装置可以至少包括至少一个处理器、以及至少一个存储器。其中，存储器存储有程序代码，当程序代码被处理器执行时，使得处理器执行本说明书上述描述的根据本申请各种示例性实施方式的页面渲染方法中的步骤。例如，处理器可以执行如图3中所示的步骤。

下面参照图14来描述根据本申请的这种实施方式的计算装置1400。图14的计算装置1400仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图14所示，计算装置1400以通用计算装置的形式表现。计算装置1400的组件可以包括但不限于：上述至少一个处理单元1401、上述至少一个存储单元1402、连接不同系统组件(包括存储单元1402和处理单元1401)的总线1403。

总线1403表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、外围总线、处理器或者使用多种总线结构中的任意总线结构的局域总线。

存储单元1402可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)14021和/或高速缓存存储器14022，还可以进一步包括只读存储器(ROM)14023。

存储单元1402还可以包括具有一组(至少一个)程序模块14024的程序/实用工具14025，这样的程序模块14024包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

计算装置1400也可以与一个或多个外部设备1404(例如键盘、指向设备等)通信，还可与一个或者多个使得用户能与计算装置1400交互的设备通信，和/或与使得该计算装置1400能与一个或多个其它计算装置进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口1405进行。并且，计算装置1400还可以通过网络适配器1406与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器1406通过总线1403与用于计算装置1400的其它模块通信。应当理解，尽管图中未示出，可以结合计算装置1400使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

在一些可能的实施方式中，本申请提供的页面渲染方法的各个方面还可以实现为一种程序产品的形式，其包括计算机程序，当程序产品在电子设备上运行时，计算机程序用于使电子设备执行本说明书上述描述的根据本申请各种示例性实施方式的页面渲染方法中的步骤，例如，电子设备可以执行如图3中所示的步骤。

程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

本申请的实施方式的程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括计算机程序，并可以在电子设备上运行。然而，本申请的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被命令执行系统、装置或者器件使用或者与其结合使用。

可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读计算机程序。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由命令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的计算机程序可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本申请操作的计算机程序，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。计算机程序可以完全地在用户电子设备上执行、部分地在用户电子设备上执行、作为一个独立的软件包执行、部分在用户电子设备上部分在远程电子设备上执行、或者完全在远程电子设备或服务器上执行。在涉及远程电子设备的情形中，远程电子设备可以通过任意种类的网络包括局域网(LAN)或广域网(WAN)连接到用户电子设备，或者，可以连接到外部电子设备(例如利用因特网服务提供商来通过因特网连接)。

应当注意，尽管在上文详细描述中提及了装置的若干单元或子单元，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多单元的特征和功能可以在一个单元中具体化。反之，上文描述的一个单元的特征和功能可以进一步划分为由多个单元来具体化。

此外，尽管在附图中以特定顺序描述了本申请方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用计算机程序的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (15)

1.一种页面渲染方法，其特征在于，该方法包括：

根据预设的模块构建信息，分别获取每个页面代码模块调用的子代码模块集合，其中，每个页面代码模块包含：用于实现相应网页页面渲染的专属代码；每个子代码模块包含：用于实现至少一个网页页面渲染的公共代码；

基于各个子代码模块集合，分别获得每个子代码模块所属的页面代码模块集合；

在访问待渲染页面时，加载所述待渲染页面使用的第一页面代码模块；以及，基于各个页面代码模块集合，确定所述第一页面代码模块依赖的至少一个公共模块，并对所述至少一个公共模块进行预加载，其中，每个公共模块为被至少两个页面代码模块调用的子代码模块。

2.如权利要求1所述的方法，其特征在于，所述至少一个公共模块包括异步样式的公共模块，其中，异步样式的公共模块为包含网页页面层叠样式，且不在首次访问网页页面时加载的模块。

3.如权利要求1所述的方法，其特征在于，在所述根据预设的模块构建信息，分别获取每个页面代码模块调用的子代码模块集合之前，还包括：

分别为每个网页页面构建各自的页面代码模块，并分别为各个页面代码模块分配模块名称，以使每个页面代码模块的模块名称表征所述页面代码模块所属的网页页面；

其中，在访问所述待渲染页面时，所述第一页面代码模块是基于各个页面代码模块的模块名称确定的。

4.如权利要求1所述的方法，其特征在于，在访问所述待渲染页面之前，还包括：

基于各个页面代码模块集合，确定各个子代码模块中的公共模块；

分别根据使用各个公共模块的页面代码模块的模块名称，确定所述各个公共模块各自的模块名称，以使每个公共模块的模块名称表征使用所述公共模块的各个网页页面；

其中，在访问所述待渲染页面时，所述至少一个公共模块是基于所述各个公共模块的模块名称确定的。

5.如权利要求4所述的方法，其特征在于，所述分别根据使用各个公共模块的页面代码模块的模块名称，确定所述各个公共模块各自的模块名称，包括：

针对每个公共模块，分别执行以下操作：

对于一个公共模块，将调用所述一个公共模块的各个页面代码模块的模块名称进行组合，获得所述一个公共模块对应的模块名称。

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

通过哈希算法，将调用所述一个公共模块的各个页面代码模块的模块名称进行组合获得的组合结果，映射为固定长度的字符串；

基于所述字符串调整所述一个公共模块对应的模块名称。

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

将映射得到的各个字符串，与相应的组合结果之间建立模块名称映射关系，所述模块名称映射关系用于表征使用相应的公共模块的各个网页页面。

8.如权利要求1～7任一项所述的方法，其特征在于，所述方法还包括：

由所述待渲染页面切换为下一级页面，所述下一级页面与所述待渲染页面共同调用目标公共模块；

加载所述下一级页面使用的第二页面代码模块，并获取预加载的所述目标公共模块以进行页面渲染。

9.一种页面渲染装置，其特征在于，包括：

第一分析单元，用于根据预设的模块构建信息，分别获取每个页面代码模块调用的子代码模块集合，其中，每个页面代码模块包含：用于实现相应网页页面渲染的专属代码；每个子代码模块包含：用于实现至少一个网页页面渲染的公共代码；

第二分析单元，用于基于各个子代码模块集合，分别获得每个子代码模块所属的页面代码模块集合；

渲染单元，用于在访问待渲染页面时，加载所述待渲染页面使用的第一页面代码模块；以及，基于各个页面代码模块集合，确定所述第一页面代码模块依赖的至少一个公共模块，并对所述至少一个公共模块进行预加载，其中，每个公共模块为被至少两个页面代码模块调用的子代码模块。

10.如权利要求9所述的装置，其特征在于，所述至少一个公共模块包括异步样式的公共模块，其中，异步样式的公共模块为包含网页页面层叠样式，且不在首次访问网页页面时加载的模块。

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

模块构建单元，用于在所述第一分析单元根据预设的模块构建信息，分别获取每个页面代码模块调用的子代码模块集合之前，分别为每个网页页面构建各自的页面代码模块，并分别为各个页面代码模块分配模块名称，以使每个页面代码模块的模块名称表征所述页面代码模块所属的网页页面；

其中，在访问所述待渲染页面时，所述第一页面代码模块是基于各个页面代码模块的模块名称确定的。

12.如权利要求9所述的装置，其特征在于，所述第二分析单元还用于：

基于各个页面代码模块集合，确定各个子代码模块中的公共模块；

分别根据使用各个公共模块的页面代码模块的模块名称，确定所述各个公共模块各自的模块名称，以使每个公共模块的模块名称表征使用所述公共模块的各个网页页面；

其中，在访问所述待渲染页面时，所述至少一个公共模块是基于所述各个公共模块的模块名称确定的。

13.一种电子设备，其特征在于，其包括处理器和存储器，其中，所述存储器存储有计算机程序，当所述计算机程序被所述处理器执行时，使得所述处理器执行权利要求1～8中任一所述方法的步骤。

14.一种计算机可读存储介质，其特征在于，其包括计算机程序，当所述计算机程序在电子设备上运行时，所述计算机程序用于使所述电子设备执行权利要求1～8中任一所述方法的步骤。

15.一种计算机程序产品，其特征在于，包括计算机程序，所述计算机程序存储在计算机可读存储介质中；当电子设备的处理器从所述计算机可读存储介质读取所述计算机程序时，所述处理器执行所述计算机程序，使得所述电子设备执行权利要求1～8中任一所述方法的步骤。