CN110647700A - 页面资源的加载方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种页面资源的加载方法、装置、计算机设备和存储介质。所述方法包括：基于通过目标应用触发的页面浏览操作，确定所述目标应用对应运行环境的环境标识，并生成页面浏览操作对应的资源获取请求；根据所述目标应用及所述环境标识获取对应的路由配置信息；根据所述路由配置信息将所述资源获取请求发送至服务器；基于从所述服务器拉取的页面资源，在所述目标应用加载当前页面。采用本方法能够根据需求兼顾页面更新及时性以及页面加载效率。

Description

页面资源的加载方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种页面资源的加载方法、装置、计算机设备和存储介质。

背景技术

目前，混合应用及单页Web应用(single page web application，SPA)大多采用单页模式实现页面加载，在使用期间不会重新加载页面。在首次加载页面时，混合应用或单页Web应用加载全部页面的页面资源进行缓存，后续通过js脚本拉取缓存实现页面切换。页面资源包括js(JavaScript，直译式脚本语言)文件、css(Cascading Style Sheets，层叠样式表)文件、html(超文本标记语言)文件等代码文件，以及页面初始数据、图片或Vue(一种页面渲染框架)组件容器等静态资源，主要负责Web应用的前端页面展示。由于单页面模式下，用户切换页面时不会重新加载页面资源，所以即便页面资源的版本发生更新，用户浏览器中使用的仍是旧版本页面资源，页面资源更新不及时。

发明内容

基于此，有必要针对上述技术问题，提供一种能够根据需求兼顾页面更新及时性以及页面加载效率的页面资源的加载方法、装置、计算机设备和存储介质。

一种页面资源的加载方法，所述方法包括：基于通过目标应用触发的页面浏览操作，确定所述目标应用对应运行环境的环境标识，并生成页面浏览操作对应的资源获取请求；根据所述目标应用及所述环境标识获取对应的路由配置信息；根据所述路由配置信息将所述资源获取请求发送至服务器；基于从所述服务器拉取的页面资源，在所述目标应用加载当前页面。

在一个实施例中，所述根据所述目标应用及所述环境标识获取对应的路由配置信息之前，所述方法还包括：获取基于页面加载组件触发的路由配置指令；所述调试配置指令携带了目标应用的应用标识；所述页面加载组件运行于所述目标应用；基于所述应用标识对应的页面渲染文件，确定所述目标应用对应多个页面的页面资源标识；根据所述页面资源标识生成路由配置页面；获取在所述路由配置页面配置的每个所述页面资源标识对应的访问路由。

在一个实施例中，所述根据所述路由配置信息将所述资源获取请求发送至服务器，包括：确定所述页面浏览操作所指向的目标页面；查询与所述目标页面的页面资源标识相对应的访问路由；当所述访问路由为第一路由时，将所述资源获取请求发送至服务器；当所述访问路由为第二路由时，将所述资源获取请求发送至本地缓存。

在一个实施例中，述页面资源包括页面渲染文件；所述方法还包括：获取所述目标应用初始的页面渲染文件；所述页面渲染文件包括Html文件和CSS文件；识别所述Html文件中包含首页标签的样式引入语句；获取所述首页标签对应的样式类名；在所述CSS文件中识别每个样式类名对应的样式描述语句；基于所述演示描述语句填充替换所述Html文件中相应的样式引入语句，得到优化后的页面渲染文件。

在一个实施例中，所述基于从所述服务器拉取的页面资源，在所述目标应用加载当前页面，包括：当所述页面浏览操作为首页浏览操作时，根据所述路由配置信息从所述服务器拉取优化后的页面渲染文件；对所述优化后的页面渲染文件进行解析，构建DOM树；基于所述DOM树渲染得到所述首页浏览操作所指向的Web首页。

在一个实施例中，所述基于从所述服务器拉取的页面资源，在所述目标应用加载当前页面，包括：当所述页面浏览操作为非首页浏览操作时，确定发生非首页浏览操作的终端的屏幕尺寸；获取所述屏幕尺寸对应的目标CSS文件；所述目标CSS文件根据预置的样式调整信息对初始的CSS文件中的样式参数进行调整得到；对获取的目标CSS文件及优化后的Html文件分别进行解析，构建DOM树和CSSOM树；基于所述DOM树及所述CSSOM树渲染得到所述非首页浏览操作所指向的Web页面。

一种页面资源的加载装置，所述装置包括：路由确定模块，用于基于通过目标应用触发的页面浏览操作，确定所述目标应用对应运行环境的环境标识，并生成页面浏览操作对应的资源获取请求；根据所述目标应用及所述环境标识获取对应的路由配置信息；请求分流模块，用于生成所述页面浏览操作对应的资源获取请求；根据所述路由配置信息将所述资源获取请求发送至服务器；页面加载模块，用于基于从所述服务器拉取的页面资源，在所述目标应用加载当前页面。

在一个实施例中，所述装置还包括路由配置模块，用于获取基于页面加载组件触发的路由配置指令；所述调试配置指令携带了目标应用的应用标识；所述页面加载组件运行于所述目标应用；基于所述应用标识对应的页面渲染文件，确定所述目标应用对应多个页面的页面资源标识；根据所述页面资源标识生成路由配置页面；获取在所述路由配置页面配置的每个所述页面资源标识对应的访问路由。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现本申请任意一个实施例中提供的页面资源的加载方法的步骤。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现本申请任意一个实施例中提供的页面资源的加载方法的步骤。

上述页面资源的加载方法、装置、计算机设备和存储介质，支持针对不同运行环境下的不同目标应用分别配置对应的路由信息，根据路由配置信息可以将资源获取请求转发至服务器，从而可以根据需求选择从本地拉取页面资源，以保证页面加载速率，也可以选择从服务器拉取最新的页面资源，实现在不影响生产环境代码的情况下兼顾页面更新及时性和页面加载效率。

附图说明

图1为一个实施例中页面资源的加载方法的应用场景图；

图2为一个实施例中页面资源的加载方法的流程示意图；

图3为一个实施例中页面资源的加载装置的结构框图；

图4为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的页面资源的加载方法，可以应用于如图1所示的应用环境中。其中，终端102与服务器104通过网络进行通信。其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。终端102上运行了目标运用。终端102中部署了存放目标应用对应页面资源的本地缓存。目标运用集成了页面加载组件。页面加载组件用于监听用户在终端102基于目标应用触发的页面浏览操作，并对页面浏览操作进行拦截。页面加载组件确定当前目标应用所处的运行环境，并获取与该目标应用在当前所处运行环境下的路由配置信息。页面加载组件根据路由配置信息，将基于页面浏览操作生成的资源获取请求分流发送至服务器104或本地缓存，即根据路由配置信息选择从服务器104还是本地的缓存拉取页面资源。终端102基于拉取的页面资源，在目标应用加载当前页面。上述页面资源的加载过程，支持针对不同运行环境下的不同目标应用分别配置对应的路由信息，根据路由配置信息可以将资源获取请求分流转发至服务器或本地缓存，从而可以根据需求选择从本地拉取页面资源，以保证页面加载速率，也可以选择从服务器拉取最新的页面资源，实现在不影响生产环境代码的情况下兼顾页面更新及时性和页面加载效率。

在一个实施例中，如图2所示，提供了一种页面资源的加载方法，以该方法应用于图1中的终端为例进行说明，包括以下步骤：

步骤202，基于通过目标应用触发的页面浏览操作，确定所述目标应用对应运行环境的环境标识，并生成页面浏览操作对应的资源获取请求。

终端上运行了目标运用。目标应用可以是单页web应用，也可以是多页Web应用，还可以是混合应用。目标应用可以是直接运行于操作系统的原生应用程序，也可以是在原生应用程序提供的环境中运行的子应用程序。

目标应用中集成了页面加载组件。页面加载组件作为一种反向代理，用于通过调用目标应用暴露的API(Application Programming Interface，应用程序编程接口)监听并拦截用户基于目标应用触发的页面浏览操作。页面浏览操作可以是基于网址链接或者搜索条目触发的跳入目标网站的操作，或者基于网络页面中某个控件触发的页面跳转的操作等。

其中，运行环境包括开发环境、测试环境和生成环境。页面加载组件提供每种运行环境分别对应的环境选项。通过选定不同的环境选项可以触发页面加载组件处于不同的工作模式，支持用户预先针对不同的目标应用在不同运行环境下的路由信息进行配置(以下称路由配置信息)。

步骤204，根据目标应用及环境标识获取对应的路由配置信息。

路由配置信息用于指定资源获取请求对应的资源获取类型。资源获取类型基于服务器拉取和基于本地缓存拉取两种。换言之，路由配置信息用于指定哪些资源获取请求需要从服务器拉取页面资源，哪些资源获取请求从本地缓存中拉取页面资源。路由配置信息包括页面资源的资源标识以及对应的访问路由。其中，访问路由可以是访问域名、协议、端口、URL(Uniform Resource Locator，同一资源定位符)、路径或正则匹配中的至少一项。换言之，页面加载组件支持用户灵活的通过访问域名、协议、端口、URL、路径或正则匹配等多种形式进行路由配置。

不同目标应用对应的访问域名不同，从而不同目标应用对应的路由配置信息不同。不同环境选项对应的路由配置信息也不相同。比如，在开发环境，为了便于测试，开发人员期望每修改一行代码都能实时的查看页面效果，此时可以配置全部的资源获取请求从服务器拉取页面资源。而对于生产环境，为了兼顾页面加载效率，可以仅配置部分资源获取请求从服务器拉取页面资源，或者全部资源获取请求从本地缓存中拉取页面资源。

在一个实施例中，根据目标应用及环境标识获取对应的路由配置信息之前，方法还包括：获取基于页面加载组件触发的路由配置指令；调试配置指令携带了目标应用的应用标识；页面加载组件运行于目标应用；基于应用标识对应的页面渲染文件，确定目标应用对应多个页面的页面资源标识；根据页面资源标识生成路由配置页面；获取在路由配置页面配置的每个页面资源标识对应的访问路由。

基于集成在目标应用的页面加载组件，用户可以对目标应用在不同运行环境下的理由配置信息进行配置。具体地，页面加载组件获取用户通过目标应用触发的路由配置指令。页面加载组件根据调试配置指令记录的目标应用的应用标识，获取应用标识对应的页面渲染文件。页面渲染文件包括HTML(HyperText Markup Language，超文本标记语言)文件，基于HTML文件引入的外部文件，如JS文件、CSS样式文件等。其中，JS文件用于对HTML文件中的页面元素进行操作，使网络页面产生动态效果；CSS文件用于对HTML文件中的页面元素以不同的样式(如字体、字号、颜色等)呈现。

终端通过目标应用可以展示多个页面。页面加载组件根据页面渲染文件，可以确定加载目标应用对应每个页面所需的页面资源。页面加载组件获取所需页面资源的资源标识，根据获取的页面资源标识生成路由配置页面。终端通过目标应用展示该路由配置页面。用户可以在路由配置页面对每个资源标识对应的访问路由进行配置。

上述实施例，支持用户以页面配置的方式，实现不同的路由策略配置，不仅降低路由配置门槛，也提高路由配置效率。

目标应用根据用户触发的页面浏览操作，生成相应的资源获取请求。完成某个网络页面的加载可能需要拉取多种页面资源。页面资源包括上述页面渲染文件，以及html文件内涉及的图片或多媒体资源等。

步骤206，根据路由配置信息将资源获取请求发送至服务器。

在一个实施例中，根据路由配置信息将资源获取请求分流发送至服务器或本地缓存，包括：确定页面浏览操作所指向的目标页面；查询与目标页面的页面资源标识相对应的访问路由；当访问路由为第一路由时，将资源获取请求发送至服务器；当访问路由为第二路由时，将资源获取请求发送至本地缓存。

页面加载组件根据路由配置信息对资源获取请求进行分流转发。具体地，页面加载组件确定页面浏览操作所指向的目标页面，以及渲染目标页面所需的一种或多种页面资源，记作目标资源。页面加载组件根据路由配置信息，查询每个目标资源的访问路由。根据目标资源的访问路由可以确定目标资源对应的资源获取类型。比如，若访问路由为第一路由，则资源获取类型为“基于服务器拉取”，页面加载组件将相应目标资源的资源获取请求发送至服务器。若访问路由为第二路由，则资源获取类型为“基于本地缓存拉取”，页面加载组件将相应目标资源的资源获取请求发送至本地缓存。

步骤208，基于从服务器拉取的页面资源，在目标应用加载当前页面。

终端根据拉取到的页面资源渲染页面浏览操作所指向的页面，通过目标应用展示渲染得到的当前页面。

本实施例中，通过对基于目标应用触发的页面浏览操作监听并拦截，可以对不同的页面浏览操作采取不同的响应方式；根据预置的不同目标应用在不同运行环境下的路由配置信息，可以确定当前的页面浏览操作对应的路由配置信息；根据路由配置信息，可以将页面浏览操作对应页面加载请求分流发送至服务器或本地缓存，实现一种本地缓存开关的效果，相比传统的通过侵入目标应用在其URL中添加页面资源版本号的方式，可以在无需对目标应用程序代码做任何修改的情况下实现页面及时更新。此外，基于预置的路由配置信息，可以兼顾页面更新及时性以及页面加载效率，也可以满足用户在目标应用不同开发环节的开发需求。

在一个实施例中，上述页面资源包括页面渲染文件；该方法还包括：获取目标应用初始的页面渲染文件；页面渲染文件包括Html文件和CSS文件；识别Html文件中包含首页标签的样式引入语句；获取首页标签对应的样式类名；在CSS文件中识别每个样式类名对应的样式描述语句；基于演示描述语句填充替换Html文件中相应的样式引入语句，得到优化后的页面渲染文件。

初始的页面渲染文件包括HTML文件(记作初始HTML文件)以及基于初始HTML文件引入的外部文件，如JS文件、CSS文件等。初始的页面渲染文件还包括初始HTML文件内涉及的图片或多媒体资源等。其中，HTML文件是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等页面元素。JS文件用于对HTML文件中的页面元素进行操作，使Web页面产生动态效果；CSS文件用于对页面元素以不同的样式(如字体、字号、颜色等)呈现。

目标应用可以展示多个页面。HMTL文件记录了目标应用中每个页面对应的相关属性语句，如样式属性语句。相关属性语句包括HTML标签及class属性。HTML标签是HTML语言中最基本的单位，是由尖括号包围的关键词，比如<html>、<div>等。目标应用可以展示多个页面。首页标签是指目标应用首个页面对应的HTML标签。不同HTML标签后面会带有不同class属性，如样式属性、计算属性、事件监听属性等。属性信息可以基于外部其他文件进行记载。例如，用于记录样式属性的外部CSS文件是通过在<head>标签内使用<link>标签链接到HTML文件内，如<link href＝"base.css"rel＝"stylesheet"type＝"text/css"/>。其中，base.css为CSS文件名称。

样式属性语句可以是样式引入语句，也可以是样式描述语句。其中，样式描述语句为HTML文件中用于记录具体的字体、字号或颜色等样式信息的语句。样式引入语句是指HTML文件中用于引入外部CSS文件的语句。样式引入语句采用异步注入CSS文件的方式，即动态创建link元素，设置href为CSS文件地址，插入到HTML文件的head头部中，实现异步加载CSS文件。包含首页标签的样式引入语句是指用于目标应用首个页面对应的样式引入语句。

终端上还运行了渲染优化工具。渲染优化工具可以作为目标应用的运行插件。渲染优化工具也可以作为独立工具，与目标应用运行在不同的终端上。当需要对目标应用的页面效率进行优化时，可以通过渲染优化工具对目标应用对应的页面渲染文件进行优化处理。具体地，样式引入语句包括查找构建DOM树所依赖的样式类名。CSS文件也包括相同的样式类名。渲染优化工具在CSS文件中查找首页标签对应的样式类名，提取查找到的每个样式类名对应的样式描述语句。

渲染优化工具将样式引入语句从HTML文件中移除，变更为相应的样式描述语句。渲染优化工具对替换后的HTML文件(记作目标HTML文件)、CSS文件等进行打包，得到优化后的页面渲染文件。终端获取到用户在目标应用触发的页面浏览操作时，加载优化后的页面渲染文件，基于优化后的页面渲染文件进行页面渲染。

需要说明的是，也可以根据需求按照上述方式将目标应用初始的多个页面的加载速度进行优化。当应当综合考虑优化后页面渲染文件的结构清晰性，避免因将页面对应的样式引入语句替换为样式描述语句，使得HTML文件结构杂乱无章。

本实施例中，由于首页需要的CSS样式信息采用样式内联的方式，已经直接记录在优化后的HTML文件中，无需下载外部的CSS文件即可实现首页快速渲染；同时在快速渲染首页的过程中，终端在用户无感知的情况下持续下载其他页面的CSS文件，给予CSS文件更充裕的下载时间，从而可以缓解页面加载缓慢的现象。

在一个实施例中，基于从服务器拉取的页面资源，在目标应用加载当前页面，包括：当页面浏览操作为首页浏览操作时，根据路由配置信息从服务器或本地缓存拉取优化后的页面渲染文件；对优化后的页面渲染文件进行解析，构建DOM树；基于DOM树渲染得到首页浏览操作所指向的Web首页。

首页浏览操作是指用户请求加载目标应用的首页的操作。当用户通过终端访问目标应用首页时，DNS(Domain Name System，DNS)服务器根据用户基于首页浏览操作提供的域名查找对应的IP地址。DNS服务器向对应IP地址的网络服务器发送http(Hyper TextTransfer Protocol，超文本传输协议)请求。网络服务器解析http请求，并发送http请求给数据库服务器。数据库服务器将http请求对应的优化后的页面渲染文件返回给网络服务器。网络服务器基于优化后的页面渲染文件生成http响应，将http响应返回给目标应用。目标应用解析http响应，下载优化后的页面渲染文件。

目标应用对优化后的页面渲染文件中的字节流解码得到字符流，通过词法分析器奖字符流解释成词语，基于得到的词语构建成节点，最后利用这些节点构建得到一颗DOM树。DOM树为多叉树结构，包括文档节点、元素(Element)节点、属性节点、Entity节点、注释(Comment)节点等。

值得注意的是，本实施例适用于多种目标应用，如单页web应用、多页Web应用等。若目标应用为多页Web应用，该实施例的技术优势将更加明显，可以使多页Web应用中每个Web页面均可只依赖DOM树即可渲染得到，进而提高每个Web页面的加载速度。而对于单页Web应用，则可以提高首页的加载速度。

本实施例中，通过渲染优化工具抽取CSS文件中首屏所需的样式，并将抽取的目标样式内联至HTML文件，实现Web首屏渲染时只需依赖DOM树即可，而无需等待全部CSS文件加载完毕才能进行首页渲染，只需进行目标Html文件的加载即可进行首页渲染，减少首屏加载时间，提高首页加载速度。

在一个实施例中，基于从服务器拉取的页面资源，在目标应用加载当前页面，包括：当页面浏览操作为非首页浏览操作时，确定发生非首页浏览操作的终端的屏幕尺寸；获取屏幕尺寸对应的目标CSS文件；目标CSS文件根据预置的样式调整信息对初始的CSS文件中的样式参数进行调整得到；对获取的目标CSS文件及优化后的Html文件分别进行解析，构建DOM树和CSSOM树；基于DOM树及CSSOM树渲染得到非首页浏览操作所指向的Web页面。

渲染优化工具确定初始的CSS文件适用的基准尺寸。初始的页面渲染文件中CSS文件(记作初始CSS文件)记录了某种屏幕尺寸(记作基准尺寸)适用的CSS样式。比如，CSS文件适用于屏幕尺寸为960px的终端，960px即为该CSS文件对应的基准尺寸。若以基准尺寸的展示样式为准，在其他尺寸的终端屏幕上可能有部分页面内容看不到，或者有部分页面内容空余。

渲染优化工具还用于将适用于不同尺寸终端的CSS文件进行分离。具体地，渲染优化工具中预置了多种目标尺寸分别对应的样式调整信息。样式调整信息包括对CSS文件中的样式参数增大或减小的比例信息。渲染优化工具根据样式调整信息对适用于基准尺寸的CSS文件中的样式参数进行调整，得到每种目标尺寸分别对应的目标CSS文件。在某些实施例中，可以基于从每种目标CSS文件中获取的样式描述语句填充替换HTML文件中相应的样式引入语句，得到每种目标尺寸对应的优化后的页面渲染文件。

渲染优化工具将不同尺寸终端适用的样式信息分开记录在不同目标CSS文件中，使用link的媒体查询属性，可以减少CSS文件加载所需时间。

渲染优化工具通过匹配不同尺寸的屏幕的样式，将适用于不同目标尺寸终端的目标HTML文件和目标CSS文件等进行打包，得到每种目标尺寸对应的优化后的页面渲染文件。

终端获取到用户在目标应用触发的非首页浏览操作时，只需拉取该终端对应屏幕尺寸的优化后的页面渲染文件进行页面渲染即可。非首页浏览操作是指用户请求加载目标应用除首页之外的其他页面的操作。对于除首页之外的其他页面的渲染，仍需下载外部目标CSS文件，并对目标CSS文件解析构建CSSOM树。基于DOM树及CSSOM树才能渲染得到其他页面。

目标应用根据触发的非首页浏览操作，动态获取当前屏幕尺寸。目标应用根据当前屏幕尺寸，通过link的media媒体查询拉取相匹配的目标HTML文件及目标CSS文件。目标应用对目标Html文件及目标CSS文件分别进行解析，构建DOM树及CSSOM树。此时渲染的CSSOM树中可以不再包含首页的样式信息。目标应用基于DOM树及CSSOM树渲染得到web页面，展示Web页面。

本实施例中，预先针对不同目标尺寸分别构建对应的CSS文件，当需要基于运行在不同尺寸终端上的目标应用加载页面时只需调取相应的CSS文件构建DOM树即可，自适应终端尺寸变更页面样式，避免了传统方式每次加载页面均需动态调整样式参数的繁琐，一劳永逸，也可以提高页面加载速度。

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

在一个实施例中，如图3所示，提供了一种页面资源的加载装置，包括：路由确定模块302、请求分流模块304和页面加载模块306，其中：

路由确定模块302，用于基于通过目标应用触发的页面浏览操作，确定所述目标应用对应运行环境的环境标识，并生成页面浏览操作对应的资源获取请求；根据所述目标应用及所述环境标识获取对应的路由配置信息。

请求分流模块304，用于根据路由配置信息将资源获取请求发送至服务器。

页面加载模块306，用于基于从服务器拉取的页面资源，在目标应用加载当前页面。

在一个实施例中，上述装置还包括路由配置模块308，用于获取基于页面加载组件触发的路由配置指令；调试配置指令携带了目标应用的应用标识；页面加载组件运行于目标应用；基于应用标识对应的页面渲染文件，确定目标应用对应多个页面的页面资源标识；根据页面资源标识生成路由配置页面；获取在路由配置页面配置的每个页面资源标识对应的访问路由。

在一个实施例中，请求分流模块304还用于确定页面浏览操作所指向的目标页面；查询与目标页面的页面资源标识相对应的访问路由；当访问路由为第一路由时，将资源获取请求发送至服务器；当访问路由为第二路由时，将资源获取请求发送至本地缓存。

在一个实施例中，页面资源包括页面渲染文件；上述装置还包括渲染优化模块310，用于获取目标应用初始的页面渲染文件；页面渲染文件包括Html文件和CSS文件；识别Html文件中包含首页标签的样式引入语句；获取首页标签对应的样式类名；在CSS文件中识别每个样式类名对应的样式描述语句；基于演示描述语句填充替换Html文件中相应的样式引入语句，得到优化后的页面渲染文件。

在一个实施例中，页面加载模块306还用于当页面浏览操作为首页浏览操作时，根据路由配置信息从服务器或本地缓存拉取优化后的页面渲染文件；对优化后的页面渲染文件进行解析，构建DOM树；基于DOM树渲染得到首页浏览操作所指向的Web首页。

在一个实施例中，页面加载模块306还用于当页面浏览操作为非首页浏览操作时，确定发生非首页浏览操作的终端的屏幕尺寸；获取屏幕尺寸对应的目标CSS文件；目标CSS文件根据预置的样式调整信息对初始的CSS文件中的样式参数进行调整得到；对获取的目标CSS文件及优化后的Html文件分别进行解析，构建DOM树和CSSOM树；基于DOM树及CSSOM树渲染得到非首页浏览操作所指向的Web页面。

关于页面资源的加载装置的具体限定可以参见上文中对于页面资源的加载方法的限定，在此不再赘述。上述页面资源的加载装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图4所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种页面资源的加载方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图4中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现本申请任意一个实施例中提供的页面资源的加载方法的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种页面资源的加载方法，所述方法包括：

基于通过目标应用触发的页面浏览操作，确定所述目标应用对应运行环境的环境标识，并生成所述页面浏览操作对应的资源获取请求；

根据所述目标应用及所述环境标识获取对应的路由配置信息；

根据所述路由配置信息将资源获取请求发送至服务器；

基于从所述服务器拉取的页面资源，在目标应用加载当前页面。

2.根据权利要求1所述的方法，其特征在于，所述根据所述目标应用及所述环境标识获取对应的路由配置信息之前，所述方法还包括：

获取基于页面加载组件触发的路由配置指令；所述调试配置指令携带了目标应用的应用标识；所述页面加载组件运行于所述目标应用；

基于所述应用标识对应的页面渲染文件，确定所述目标应用对应多个页面的页面资源标识；

根据所述页面资源标识生成路由配置页面；

获取在所述路由配置页面配置的每个所述页面资源标识对应的访问路由。

3.根据权利要求2所述的方法，其特征在于，所述根据所述路由配置信息将所述资源获取请求发送至服务器，包括：

确定所述页面浏览操作所指向的目标页面；

查询与所述目标页面的页面资源标识相对应的访问路由；

当所述访问路由为第一路由时，将所述资源获取请求发送至服务器；

当所述访问路由为第二路由时，将所述资源获取请求发送至本地缓存。

4.根据权利要求1所述的方法，其特征在于，所述页面资源包括页面渲染文件；所述方法还包括：

获取所述目标应用初始的页面渲染文件；所述页面渲染文件包括Html文件和CSS文件；

识别所述Html文件中包含首页标签的样式引入语句；

获取所述首页标签对应的样式类名；

在所述CSS文件中识别每个样式类名对应的样式描述语句；

基于所述演示描述语句填充替换所述Html文件中相应的样式引入语句，得到优化后的页面渲染文件。

5.根据权利要求4所述的方法，其特征在于，所述基于从所述服务器拉取的页面资源，在所述目标应用加载当前页面，包括：

当所述页面浏览操作为首页浏览操作时，根据所述路由配置信息从所述服务器拉取优化后的页面渲染文件；

对所述优化后的页面渲染文件进行解析，构建DOM树；

基于所述DOM树渲染得到所述首页浏览操作所指向的Web首页。

6.根据权利要求4所述的方法，其特征在于，所述基于从所述服务器拉取的页面资源，在所述目标应用加载当前页面，包括：

当所述页面浏览操作为非首页浏览操作时，确定发生非首页浏览操作的终端的屏幕尺寸；

获取所述屏幕尺寸对应的目标CSS文件；所述目标CSS文件根据预置的样式调整信息对初始的CSS文件中的样式参数进行调整得到；

对获取的目标CSS文件及优化后的Html文件分别进行解析，构建DOM树和CSSOM树；

基于所述DOM树及所述CSSOM树渲染得到所述非首页浏览操作所指向的Web页面。

7.一种页面资源的加载装置，所述装置包括：

路由确定模块，用于基于通过目标应用触发的页面浏览操作，确定所述目标应用对应运行环境的环境标识，并生成页面浏览操作对应的资源获取请求；根据所述目标应用及所述环境标识获取对应的路由配置信息；

请求分流模块，用于根据所述路由配置信息将所述资源获取请求发送至服务器；

页面加载模块，用于基于从所述服务器拉取的页面资源，在所述目标应用加载当前页面。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括路由配置模块，用于获取基于页面加载组件触发的路由配置指令；所述调试配置指令携带了目标应用的应用标识；所述页面加载组件运行于所述目标应用；基于所述应用标识对应的页面渲染文件，确定所述目标应用对应多个页面的页面资源标识；根据所述页面资源标识生成路由配置页面；获取在所述路由配置页面配置的每个所述页面资源标识对应的访问路由。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

Images