CN111984892A - 页面访问方法、装置、设备及存储介质 - Google Patents

Abstract

本申请提供一种页面访问方法、装置、设备及存储介质，涉及软件技术领域。该方法包括：接收前端针对目标业务的页面访问请求，所述页面访问请求包括：浏览器信息以及所述目标业务的业务代码中预设语法标准的使用信息；根据所述浏览器信息和所述预设语法标准的使用信息确定所述目标业务的第一目标代码补丁；向所述前端返回所述第一目标代码补丁，以使得所述前端基于所述第一目标代码补丁和所述业务代码进行所述目标业务的页面渲染。相对于现有技术，避免了浏览器信息页面渲染时记载所有对应的代码补丁，造成补丁加载性能开销大的问题。

Description

页面访问方法、装置、设备及存储介质

技术领域

本申请涉及软件技术领域，具体而言，涉及一种页面访问方法、装置、设备及存储介质。

背景技术

目前前端工程化日渐流行，浏览器市场上浏览器的品种繁多，但产品品质参差不齐。由于各项目的浏览器运行环境可能不同，所以在运行时，需要抚平各浏览器之间的差异性，使得网站可以在不同的浏览器上正常显示。

现有技术中，在前端项目工程化中引入了垫片Polyfill(即代码补丁)，通过垫片注入一些预设语法标准的代码补丁到一些低版本或缺少某些预设语法标准的浏览器中。一般所有前端项目都会基于模块打包器(Webpack)进行项目代码的打包，通过在打包过程中加入代码补丁的方式，来抚平各浏览器之间的语法标准的解析差异性，解决预设语法标准的兼容问题。

但是这样的打包方式由于各浏览器对代码补丁的使用率不同，但前端在页面显示前，前端上的浏览器均需加载所有代码补丁，导致有些浏览器需要加载很多无用的代码补丁，从而导致首屏渲染很慢，不仅增加了脚本加载性能开销，还引发了脚本执行性能开销的问题。

发明内容

本申请的目的在于，针对上述现有技术中的不足，提供一种页面访问方法、装置、设备及存储介质，以解决现有技术中浏览器需要加载很多无用的代码补丁，从而导致首屏渲染很慢，不仅增加了脚本加载性能开销，还引发了脚本执行性能开销的问题。

为实现上述目的，本申请实施例采用的技术方案如下：

第一方面，本申请一实施例提供了一种页面访问方法，所述方法包括：

接收前端针对目标业务的页面访问请求，所述页面访问请求包括：浏览器信息以及所述目标业务的业务代码中预设语法标准的使用信息；

根据所述浏览器信息和所述预设语法标准的使用信息确定所述目标业务的第一目标代码补丁；

向所述前端返回所述第一目标代码补丁，以使得所述前端基于所述第一目标代码补丁和所述业务代码进行所述目标业务的页面渲染。

可选地，所述根据所述浏览器信息和所述预设语法标准的使用信息确定所述目标业务的第一目标代码补丁，包括：

根据所述浏览器信息，获取预设业务的页面浏览器对应的代码补丁；

根据所述预设语法标准的使用信息，从所述页面浏览器对应的代码补丁中确定所述目标业务的第一目标代码补丁。

可选地，所述浏览器信息包括：用户代理信息、浏览器补丁服务的地址信息；

所述根据所述浏览器信息，获取所述目标业务的页面浏览器对应的代码补丁，包括：

根据所述用户代理信息，从预设的浏览器版本列表中确定所述页面浏览器的版本信息；

根据所述版本信息，查找预设的数据库中是否缓存有所述版本信息对应的代码补丁；

若所述数据库中未缓存所述版本信息对应的代码补丁，则根据所述版本信息以及所述浏览器补丁服务的地址信息，查找所述版本信息对应的代码补丁，并确定所述版本信息对应的代码补丁为所述页面浏览器对应的代码补丁。

可选地，所述方法还包括：

将所述第一目标代码补丁和所述版本信息，缓存至所述数据库中。

可选地，所述将所述第一目标代码补丁和所述版本信息，缓存至所述数据库中，包括：

采用键值对的方式，将所述第一目标代码补丁和所述版本信息，缓存至所述数据库中。

可选地，所述方法还包括：

若所述数据库中缓存有所述版本信息对应的代码补丁，则确定所述数据库中所述版本信息对应的代码补丁为所述目标业务的第二目标代码补丁；

向所述前端返回所述第二目标代码补丁，以使得所述前端基于所述第二目标代码补丁和所述业务代码进行所述目标业务的页面渲染。

可选地，所述预设语法标准的使用信息和所述浏览器补丁服务的地址信息，以链接的形式插入在所述目标业务的页面入口文件中。

可选地，所述根据所述预设语法标准的使用信息，从所述页面浏览器对应的代码补丁中确定所述目标业务的第一目标代码补丁，包括：

从所述页面浏览器对应的代码补丁中移除不满足所述预设语法标准的使用信息的代码补丁，得到所述第一目标代码补丁。

可选地，所述页面访问请求中所述预设语法标准的使用信息为：所述预设语法标准的使用映射表，所述使用映射表包括：所述目标业务的所有业务代码中所述预设语法标准的使用信息。

第二方面，本申请另一实施例提供了一种页面访问装置，所述装置包括：接收模块、确定模块和渲染模块，其中：

所述接收模块，用于接收前端针对目标业务的页面访问请求，所述页面访问请求包括：浏览器信息以及所述目标业务的业务代码中预设语法标准的使用信息；

所述确定模块，用于根据所述浏览器信息和所述预设语法标准的使用信息确定所述目标业务的第一目标代码补丁；

所述渲染模块，用于向所述前端返回所述第一目标代码补丁，以使得所述前端基于所述第一目标代码补丁和所述业务代码进行所述目标业务的页面渲染。

可选地，所述装置还包括：获取模块，用于根据所述浏览器信息，获取预设业务的页面浏览器对应的代码补丁；

所述确定模块，具体用于根据所述预设语法标准的使用信息，从所述页面浏览器对应的代码补丁中确定所述目标业务的第一目标代码补丁。

可选地，所述浏览器信息包括：用户代理信息、浏览器补丁服务的地址信息；

所述装置还包括：查找模块，其中：

所述确定模块，具体用于根据所述用户代理信息，从预设的浏览器版本列表中确定所述页面浏览器的版本信息；

所述查找模块，用于根据所述版本信息，查找预设的数据库中是否缓存有所述版本信息对应的代码补丁；

所述确定模块，具体用于若所述数据库中未缓存所述版本信息对应的代码补丁，则根据所述版本信息以及所述浏览器补丁服务的地址信息，查找所述版本信息对应的代码补丁，并确定所述版本信息对应的代码补丁为所述页面浏览器对应的代码补丁。

可选地，所述装置还包括：缓存模块，用于将所述第一目标代码补丁和所述版本信息，缓存至所述数据库中。

可选地，所述缓存模块，具体用于采用键值对的方式，将所述第一目标代码补丁和所述版本信息，缓存至所述数据库中。

可选地，所述确定模块，具体用于若所述数据库中缓存有所述版本信息对应的代码补丁，则确定所述数据库中所述版本信息对应的代码补丁为所述目标业务的第二目标代码补丁；

所述渲染模块，具体用于向所述前端返回所述第二目标代码补丁，以使得所述前端基于所述第二目标代码补丁和所述业务代码进行所述目标业务的页面渲染。

可选地，所述确定模块，具体用于从所述页面浏览器对应的代码补丁中移除不满足所述预设语法标准的使用信息的代码补丁，得到所述第一目标代码补丁。

第三方面，本申请另一实施例提供了一种页面访问设备，包括：处理器、存储介质和总线，所述存储介质存储有所述处理器可执行的机器可读指令，当页面访问设备运行时，所述处理器与所述存储介质之间通过总线通信，所述处理器执行所述机器可读指令，以执行如上述第一方面任一所述方法的步骤。

第四方面，本申请另一实施例提供了一种存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如上述第一方面任一所述方法的步骤。

本申请的有益效果是：采用本申请提供的页面访问方法，可以根据页面访问请求中的浏览器信息动态获取页面浏览器对应的代码补丁，并且根据页面访问请求中的预设语法标准的使用信息，确定目标业务的第一目标代码补丁，相对于现有技术中直接根据浏览器对应的代码补丁对目标业务的页面进行渲染的方式，本申请提供的方法得到的第一目标代码补丁的体积小，避免了浏览器信息页面渲染时记载所有对应的代码补丁，减少补丁加载性能的开销，提高渲染速度，并且，基于预设语法标准的使用信息所确定的第一目标补丁进行页面渲染，还解决了浏览器进行页面渲染时代码补丁的语法兼容问题。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请一实施例提供的页面访问方法的流程示意图；

图2为本申请另一实施例提供的页面访问方法的流程示意图；

图3为本申请另一实施例提供的页面访问方法的流程示意图；

图4为本申请另一实施例提供的页面访问方法的流程示意图；

图5为本申请另一实施例提供的页面访问方法的流程示意图；

图6为本申请一实施例提供的页面访问装置的结构示意图；

图7为本申请另一实施例提供的页面访问装置的结构示意图；

图8为本申请一实施例提供的页面访问设备的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。

通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

另外，本申请中使用的流程图示出了根据本申请的一些实施例实现的操作。应该理解，流程图的操作可以不按顺序实现，没有逻辑的上下文关系的步骤可以反转顺序或者同时实施。此外，本领域技术人员在本申请内容的指引下，可以向流程图添加一个或多个其他操作，也可以从流程图中移除一个或多个操作。

为使本申请提供更便于被理解，下述对一些名词进行解释：

ES：一种由ECMA国际(前身为欧洲计算机制造商协会)通过ECMA－262标准化的脚本程序设计语言，这种语言在万维网上应用广泛。

Webpack：一个模块打包器，webpack它是代码编译工具，有入口，出口、loader和插件。其天生就代码分割、模块化，webpack2.0中加入tree shaking，用来提取公共代码，去掉无用代码或重复代码。

Browserslist：浏览器兼容列表。

Polyfill：代码垫片。

抽象语法树(Abstract Syntax Tree，AST)：是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

内容分发网络(Content Delivery Network，CDN)：是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

值得注意的是，在本申请提出申请之前，现有技术通常手动处理一些语法标准的兼容问题，但是手动处理语法标准的兼容问题会加入大量的代码补丁，使得打包出来的项目代码的文件体积很大。且对于不同的浏览器，其兼容性不同，兼容性好的浏览器可能根本不需要这些代码补丁，但兼容性差的浏览器却必须使用这些代码补丁才可以正常打开网页，例如Chrome浏览器根本就没有兼容性问题，可能不需要这些代码补丁；但是对于IE浏览器来说，这些代码补丁是必须的，缺少代码补丁就可能导致整个网页无法在正常打开或运行。并且目前市场上大部分浏览器的兼容性还是不错的，由于这种统一配置代码补丁的方式导致每个浏览器在运行网页时都需要加载同一个体积很大的代码补丁包，即加载很多无用代码补丁(这些代码补丁可能仅仅需要在IE浏览器上运行)，这就导致了首屏渲染变得很慢，不仅增加了脚本加载性能的开销，还引发了脚本执行性能开销。

为解决现有技术中的这些问题，本申请提供了一种页面访问方法，其可以根据目标业务的页面访问请求中的浏览器信息动态确定其对应的代码补丁包，这样确定代码补丁包的方式使得不同的页面浏览器可能对应不同的代码补丁包，相对于现有技术中所有浏览器均对应同一体积很大的代码补丁包，本申请提供的方法可以动态确定不同浏览器对应的代码补丁包，从而避免加载过多无用代码补丁，造成首屏渲染慢，脚本加载性能开销高的问题。

如下结合多个具体的应用示例，对本申请实施例所提供的一种页面访问方法进行解释说明。图1为本申请一实施例提供的一种页面访问方法的流程示意图，如图1所示，该方法包括：

S101：接收前端针对目标业务的页面访问请求。

其中，页面访问请求包括：浏览器信息以及目标业务的业务代码中预设语法标准的使用信息。

可选地，在本申请的一个实施例中，前端例如可以是网页(web)如HTML5语言描述方式构建网页、渐进式网页应用(Progressive Web App，PWA)、应用程序(Application，App)内嵌的Web应用、混合应用等，具体前端的类型可以根据用户需要设置，并不以上述实施例给出的为限。该页面访问请求可以是前端内部的业务逻辑，或者用户作用在前端显示界面的操作指令等任一触发方式所触发的该目标业务的页面访问请求。

可选地，在本申请的一个实施例中，前端可以采用预设的软件开发工具包(Software Development Kit，SDK)，采用语法分析结合覆盖分析方法，对该目标业务的业务代码进行代码扫描分析，以获取该目标业务的业务代码中预设语法标准的使用信息。

可选的，本申请所涉及的该预设语法标准包括：多个子语法标准，该实施例中，该预设语法标准的使用信息便可包括：该业务代码中该多个子语法标准的使用情况，以指示该业务代码中使用了该多个子语法标准的代码信息。

示例的，预设语法标准可以为ES6。预设语法标准的使用信息，即确定目标业务的业务代码中使用了ES6中的哪些语法标准。举例说明：例如ES6中包括A、B、C、D、E五种子语法标准，前端可通过对业务代码进行代码扫描分析后，发现该业务代码中仅只使用了B和C这两种子语法标准，则这个业务代码的ES6使用情况即可包括：该业务代码中B和C这两个语法标准的使用情况，即业务代码中哪些代码使用了B子语法标准，哪些代码使用了C子语法标准。

S102：根据浏览器信息和预设语法标准的使用信息，确定目标业务的第一目标代码补丁。

根据浏览器信息和预设语法标准的使用信息筛选确定目标业务的第一目标代码，使得在后续的页面渲染过程中，只需加载目标业务对应的第一目标代码，无需加载其他多余的代码，从而提高后续页面渲染的效率，减少脚本加载的性能开销。

S103：向前端返回第一目标代码补丁，以使得前端基于第一目标代码补丁和业务代码进行目标业务的页面渲染。

可选地，在本申请的一个实施例中，可以将这些缺少的第一目标代码补丁向前端发送，前端在接收到第一目标代码补丁后，将第一目标代码补丁和业务代码合并成一个文件，浏览器在接收到该合并后的文件后，先在全局环境下执行生成预设编程语言标准(例如：JavaScript)的上下文，再执行该业务代码，最终完成目标业务的页面渲染。

其中，对于同一个目标业务的页面被不同浏览器打开时，由于不同浏览器之间由于对代码的解析不同，因此在页面的显示效果上可能不同，这就是浏览器之间的兼容性问题；第一目标代码补丁用于解决不同浏览器之间的兼容性问题，若当前浏览器缺少其对应的第一目标代码补丁，可能导致整个页面无法正常显示或正常运行的问题，因此需要通过加载第一目标代码，来对目标业务的页面进行渲染，从而实现页面的正常打开和运行。

可选地，在本申请的一个实施例中，上述S102－S102为此次是首次在该浏览器上进行该页面访问请求时执行的步骤，若此次不是首次在该浏览器上进行该页面访问请求，对应的处理方法在后续实施例中进行说明。

采用本申请提供的页面访问方法，可以根据页面访问请求中的浏览器信息动态获取页面浏览器对应的代码补丁，并且根据页面访问请求中的预设语法标准的使用信息，确定目标业务的第一目标代码补丁，相对于现有技术中直接根据浏览器对应的代码补丁对目标业务的页面进行渲染的方式，本申请提供的方法得到的第一目标代码补丁的体积小，避免了浏览器信息页面渲染时记载所有对应的代码补丁，减少补丁加载性能的开销，提高渲染速度，并且，基于预设语法标准的使用信息所确定的第一目标补丁进行页面渲染，还解决了浏览器进行页面渲染时代码补丁的语法兼容问题。

可选地，在上述实施例的基础上，本申请实施例还可提供一种页面访问方法，如下结合附图对上述方法中获取目标业务的页面浏览器对应的代码补丁的实现过程进行示例说明。图2为本申请另一实施例提供的一种页面访问方法的流程示意图，浏览器信息包括：用户代理信息、浏览器补丁服务的地址信息；如图2所示，S102可包括：

S104：根据浏览器信息，获取目标业务的页面浏览器对应的代码补丁。

可选地，在一些可能的实施例中，浏览器信息可能包括：浏览器类型信息和/或版本信息等，具体浏览器信息包括的内容可以根据用户需要灵活调整，并不以上述实施例给出的为限。

在得到该浏览器信息后，可根据浏览器信息，从预设的存储位置或者采用预设的补丁服务获取该浏览器信息所对应的代码补丁为该页面浏览器对应的代码补丁。

S105：根据预设语法标准的使用信息，从页面浏览器对应的代码补丁中确定目标业务的第一目标代码补丁。

可选地，在本申请的一个实施例中，可以根据预设语法标准的使用信息在页面浏览器对应的代码补丁中进行筛选，以实现预设语法标准的使用信息和页面浏览器对应的代码补丁的“求交”处理，从而筛选出符合预设语法标准的使用信息的代码补丁作为第一目标代码补丁，从而仅筛选出用于渲染当前目标业务的页面对应的第一目标代码补丁，在后续页面渲染过程中，无需加载整个页面浏览器对应的代码补丁，从而提高后续页面渲染的效率，减少脚本加载的性能开销。

采用本申请提供的方法确定的第一目标代码补丁为根据页面访问请求中的预设语法标准的使用信息和页面浏览器对应的代码补丁共同确定的，这样的确定方式得到的第一目标代码补丁的体积小。

可选地，在本申请的一个实施例中，S105可包括：从页面浏览器对应的代码补丁中移除不满足预设语法标准的使用信息的代码补丁，得到第一目标代码补丁。也即根据预设语法标准的使用信息，结合前后端的排除法，对页面浏览器对应的代码补丁进行筛选，仅筛选出满足预设语法标准的使用信息对应的代码补丁为第一目标代码补丁，把无关的代码补丁进行删除，做到第一目标代码补丁的最小化，从而减少渲染过程中需要加载的无用代码补丁，鉴定打包补丁代码的打包体积，提高页面渲染速度。

其中，页面访问请求中预设语法标准的使用信息为：预设语法标准的使用映射表，使用映射表包括：目标业务的所有业务代码中预设语法标准的使用信息。

示例地，在本申请的一个实施例中，通过扫描目标业务的所有业务代码使用JavaScript ES6语法和应用程序编程接口(Application Programming Interface，API)的情况，生成一个预设语法标准的使用映射表ES6标准使用映射表，映射表中包含了全部业务代码里ES6的使用情况。

可选地，在上述实施例的基础上，本申请实施例还可提供一种页面访问方法，如下结合附图对上述方法中获取目标业务的页面浏览器对应的代码补丁的实现过程进行示例说明。图3为本申请另一实施例提供的一种页面访问方法的流程示意图，浏览器信息包括：用户代理信息、浏览器补丁服务的地址信息；如图3所示，S104可包括：

S106：根据用户代理信息，从预设的浏览器版本列表中确定页面浏览器的版本信息。

可选地，在本申请的一个实施例中，可以对页面访问请求中的用户代理(UserAgent)信息，从内置的预设浏览器版本列表(Browserslist)服务进行查询，确定当前页面浏览器的类型和版本信息，例如：对当前页面访问请求中的UserAgent进行分析后，确定当前页面浏览器的类型为谷歌Google浏览器，版本为8.1。

S107：根据版本信息，查找预设的数据库中是否缓存有版本信息对应的代码补丁。

示例地，预设的数据库例如可以为键值数据库如Redis数据库，用于存储各浏览器的各版本信息对应的代码补丁缓存，查询过程中，可以根据浏览器的版本信息，从Redis数据库中该查找是否存在该浏览器的版本信息对应的代码补丁缓存。当实际的应用中，该预设的数据库也可以为其他类型的数据库，不限于上述示例。

若数据库中未缓存版本信息对应的代码补丁，则执行S108。

S108：根据版本信息以及浏览器补丁服务的地址信息，查找版本信息对应的代码补丁，并确定版本信息对应的代码补丁为页面浏览器对应的代码补丁。

可选地，在本申请的一个实施例中，若数据库中未缓存版本信息对应的代码补丁，则说明此次是首次在该浏览器上进行页面访问请求，则通过浏览器补丁(Polyfill)服务查找出当前浏览器的版本信息对应的代码补丁为页面浏览器对应的代码补丁。其中Polyfill服务可以为一个完整的浏览器的代码补丁数据库，从Polyfill服务中可以查找出各浏览器的各版本信息对应的代码补丁。

可选地，可以在服务器上预先搭建一个NodeJS服务，NodeJS服务分为两个服务，分别为Browserslist服务和Polyfill服务，在前端发起针对目标业务的页面访问请求时被触发，具体触发方式和依据上述实施例中已经说明，本申请在此不再赘述；其中，服务器可以为公司内部的服务器，或云开发商的服务器，或者个人用户的服务器。在本申请的一个实施例中，可以将NodeJS服务部署在内容分发网络(Content Delivery Network，CDN)上，利用CDN的特性进一步提高页面的加载速度；应当理解具体服务器的类型可以根据用户需要灵活调整，本申请在此不做任何限制。

将本申请提供的方法移植至服务器中执行，只有在网页发起页面访问请求时，服务器才会根据浏览器的UserAgent动态生成代码补丁，保障代码补丁的使用率和覆盖率，并将生成的代码补丁插入需要兼容的运行的页面中，从而保障代码补丁的执行和后续渲染不受影响，这种动态生成代码补丁的方式，在编写构建业务代码的过程中无需考虑JavaScript怎样兼容浏览器，不用在意哪些语法标准不能使用，专注于业务代码的书写标准编写业务代码即可，总体抚平在前端项目工程化兼容性的木桶效应短板，有效缩短了业务代码的编写构建时间，同时减少了代码补丁的打包体积，解决了手动打包插入代码补丁导致代码补丁包体积大的问题，还减少了开发过程中代码打包后的体积，也可以根据浏览器自身的机制去动态获取代码补丁，从而弥补浏览器自身的兼容性不足问题，做到一次部署，全部项目均可使用的效果；并且在后续的维护过程中，只需对浏览器补丁服务中的补丁代码进行维护，不用维护所有项目本身的兼容性配置。

示例地，在本申请的一个实施例中，预设语法标准的使用信息和浏览器补丁服务的地址信息，以链接的形式插入在目标业务的页面入口文件中。该地址信息可用于指向该浏览器补丁服务。

举例说明，在本申请的一个实施例中，包括有预设语法标准的使用信息和浏览器补丁服务的地址信息的链接格式例如可以为：

https：//xxx.yyy.com/polyfill？es6＝xxx，使用过程中只需根据当前业务代码对预设语法标准的使用信息，和浏览器补丁服务的地址信息自动生成对应的链接即可。其中“es6＝xxx”表示目标业务的业务代码中预设语法标准JavaScript ES6的使用信息和API的使用情况，polyfill用于若数据库中未缓存版本信息对应的代码补丁时，触发Polyfill服务以对当前浏览器版本信息对应的代码补丁进行查询获取。举例说明：假设当前业务代码里使用了ES6的一些Array API和Generator函数，那么就生成“es6＝array，generator”的参数形式，最终生成的链接为：

https：//xxx.yyy.com/polyfill？es6＝array，generator，随后将该链接插入至入口文件(index.html)的头部(head)信息中。

在另一种可能的示例中，若数据库中缓存有版本信息对应的代码补丁，则依次执行S109和S110。

S109：确定数据库中版本信息对应的代码补丁为目标业务的第二目标代码补丁。

若数据库中缓存有版本信息对应的代码补丁，说明此次不是首次在该浏览器上进行该页面访问请求，以前已有该浏览器对应的记录，则根据浏览器的版本信息，从Redis数据库中该查找该版本信息对应的代码补丁缓存，并确定该代码补丁缓存为目标业务的第二目标代码补丁。

通过缓存对应的代码补丁的方式，可以保证后续使用对应的代码补丁时对代码补丁的访问速度，进一步提高了本申请方法的处理速度。

S110：向前端返回第二目标代码补丁，以使得前端基于第二目标代码补丁和业务代码进行目标业务的页面渲染。

由于第二目标代码补丁也是在首次访问时，根据预设语法标准的使用信息，从页面浏览器对应的代码补丁中确定并缓存于数据库中的，所以第二目标代码补丁相对现有技术中的代码补丁较小，基于该第二目标代码补丁进行目标业务的页面渲染时，渲染速度较快。

可选地，在上述实施例的基础上，本申请实施例还可提供一种页面访问方法，如下结合附图对上述方法进行进一步说明。图4为本申请另一实施例提供的一种页面访问方法的流程示意图，如图4所示，该方法还包括：

S111：将第一目标代码补丁和版本信息，缓存至数据库中。

其中，缓存至的数据库为预设数据库，后续在有该浏览器对应的版本信息发起的页面访问请求时，可以直接根据该浏览器对应的版本信息在该预设数据库中进行查询，查询对应的第一目标代码补丁缓存，并基于查询到的第一目标代码补丁缓存进行后续的页面渲染步骤，从而进一步节省了页面渲染的时间，提高了页面渲染的效率。

可选地，在本申请的一个实施例中，可以采用键值对的方式，将第一目标代码补丁和版本信息，缓存至数据库中。

如下结合附图提供本申请实施例的一种示例实现方式。图5为本申请一实施例提供的页面访问方法的流程示意图，如图5所示，完整的页面访问方法流程为：

P001：使用前端构建技术打包业务代码。

其中，前端构建技术，例如可以是在前端设备又称前端上执行。业务代码的打包例如可以是采用预设的模块打包器，或者采用其他常规的方式进行打包。

P002：确定预设语法标准的使用信息。

其中，在本申请的一个实施例中，可以将预设的SDK接入至业务代码的打包过程中，SDK用于确定当前业务代码对预设语法JavaScript ES6标准的使用信息，例如可以为使用词法分析和覆盖分析得出该业务代码所用的JavaScript ES6标准的使用信息，并根据使用信息生成一个ES6标准映射表(标记为A)。

P003：生成补丁服务链接。

示例地，根据上述步骤P002，生成包括预设语法标准的使用情况的补丁服务链接：

https：//xxx.yyy.com/polyfill？es6＝xxx(其中es6参数标记为B)并将上述连接插入至入口文件index.html的head中。

P004：将补丁服务链接部署至线上环境。

若检测到用户访问页面的页面访问请求，则触发Q002；Q002包括Q002－1和Q002－2，且Q002之前还包括Q001。

Q001：将NodeJS服务部署至服务器。

其中，NodeJS服务包括两个模块：Q002－1：Browserlist服务和Q002－2：Polyfill服务。

其中，在Q002－1中，若Browserlist服务接收到页面访问请求后，从页面访问请求的请求头中获取UserAgent，从内置的浏览器版本列表中找出此次访问的浏览器对应的版本信息，根据浏览器版本信息从Redis数据库中查找是否存在该浏览器版本信息对应的代码补丁缓存，若存在对应的代码补丁缓存，则获取并返回对应的代码补丁缓存，此时获取的代码补丁为最终的目标代码补丁，本次服务流程结束；若不存在对应的代码补丁缓存，则进入Q002－2中继续执行。

在Q002－2中，若没有在Redis数据库中查找到该浏览器版本信息对应的代码补丁缓存，则认为是此次页面访问请其为首次的浏览器访问记录，此时通过Polyfill服务查找出当前浏览器的版本对应的代码补丁，最后根据B确定最终的目标代码补丁，确定方式与上述实施例中的相同，本申请在此不再赘述。

Q003：得到第一目标代码补丁(标记为Z)。

其中，第一目标代码补丁的得到方式为移除不满足预设语法标准的使用信息的代码补丁后得到的。并以键值对的方式记录浏览器版本对应的代码补丁文件到Redis服务器中，下次若该浏览器对应的版本信息再次发起页面访问请求时，可以直接根据从浏览器对应的版本信息从Redis数据库中查找并获取对应的代码补丁缓存中，无需经过Q002－2。

R：根据目标代码补丁和业务代码进行目标业务的页面渲染。

其中，服务处理完｀https：//xxx.yyy.com/polyfill？es6＝xxx｀这个请求后，返回目标代码补丁，此时页面拿到的代码补丁就是最简洁的了，根据该代码补丁进行渲染，渲染速度更快。

采用本申请提供的页面访问方法，可以根据页面访问请求中的浏览器信息动态获取对应的代码补丁，并且根据页面访问请求中的预设语法标准的使用信息，从页面浏览器对应的代码补丁中确定第一目标代码补丁，由于第一目标代码补丁为根据页面访问请求中的预设语法标准的使用信息和页面浏览器对应的代码补丁共同确定的，这样的确定方式得到的第一目标代码补丁的体积小，从而可以减少补丁加载性能的开销，提高渲染速度，并将确定的第一目标代码补丁缓存至预设数据库，后续有该浏览器对应的版本信息发起的页面访问请求时，可以直接根据该浏览器对应的版本信息在该预设数据库中进行查询，查询对应的第一目标代码补丁缓存，并基于查询到的第一目标代码补丁缓存进行后续的页面渲染步骤，从而进一步节省了页面渲染的时间，提高了页面渲染的效率。

下述结合附图对本申请所提供的页面访问装置进行解释说明，该页面访问装置可执行上述图1-图5任一页面访问方法，其具体实现以及有益效果参照上述，如下不再赘述。

图6为本申请一实施例提供的页面访问装置的结构示意图，如图6所示，该装置包括：接收模块201、确定模块202和渲染模块203，其中：

接收模块201，用于接收前端针对目标业务的页面访问请求，页面访问请求包括：浏览器信息以及目标业务的业务代码中预设语法标准的使用信息。

确定模块202，用于根据浏览器信息和预设语法标准的使用信息确定目标业务的第一目标代码补丁。

渲染模块203，用于向前端返回第一目标代码补丁，以使得前端基于第一目标代码补丁和业务代码进行目标业务的页面渲染。

图7为本申请一实施例提供的页面访问装置的结构示意图，如图7所示，该装置还包括：获取模块204，用于根据浏览器信息，获取预设业务的页面浏览器对应的代码补丁。

确定模块202，具体用于根据预设语法标准的使用信息，从页面浏览器对应的代码补丁中确定目标业务的第一目标代码补丁。

可选地，浏览器信息包括：用户代理信息、浏览器补丁服务的地址信息；如图7所示，该装置还包括：查找模块205，其中：

确定模块203，具体用于根据用户代理信息，从预设的浏览器版本列表中确定页面浏览器的版本信息。

查找模块205，用于根据版本信息，查找预设的数据库中是否缓存有版本信息对应的代码补丁。

确定模块203，具体用于若数据库中未缓存版本信息对应的代码补丁，则根据版本信息以及浏览器补丁服务的地址信息，查找版本信息对应的代码补丁，并确定版本信息对应的代码补丁为页面浏览器对应的代码补丁。

如图7所示，装置还包括：缓存模块206，用于将第一目标代码补丁和版本信息，缓存至数据库中。

可选地，缓存模块206，具体用于采用键值对的方式，将第一目标代码补丁和版本信息，缓存至数据库中。

可选地，确定模块203，具体用于若数据库中缓存有版本信息对应的代码补丁，则确定数据库中版本信息对应的代码补丁为目标业务的第二目标代码补丁。

渲染模块204，具体用于向前端返回第二目标代码补丁，以使得前端基于第二目标代码补丁和业务代码进行目标业务的页面渲染。

可选地，确定模块203，具体用于从页面浏览器对应的代码补丁中移除不满足预设语法标准的使用信息的代码补丁，得到第一目标代码补丁。

上述装置用于执行前述实施例提供的方法，其实现原理和技术效果类似，在此不再赘述。

以上这些模块可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个特定集成电路(Application Specific Integrated Circuit，简称ASIC)，或，一个或多个微处理器(digital singnal processor，简称DSP)，或，一个或者多个现场可编程门阵列(Field Programmable Gate Array，简称FPGA)等。再如，当以上某个模块通过处理元件调度程序代码的形式实现时，该处理元件可以是通用处理器，例如中央处理器(CentralProcessing Unit，简称CPU)或其它可以调用程序代码的处理器。再如，这些模块可以集成在一起，以片上系统(system－on－a－chip，简称SOC)的形式实现。

图8为本申请一实施例提供的页面访问设备的结构示意图，该页面访问设备可以集成于终端设备或者终端设备的芯片。

该页面访问设备包括：处理器501、存储介质502和总线503。

处理器501用于存储程序，处理器501调用存储介质502存储的程序，以执行上述图1－图5对应的方法实施例。具体实现方式和技术效果类似，这里不再赘述。

可选地，本申请还提供一种程序产品，例如存储介质，该存储介质上存储有计算机程序，包括程序，该程序在被处理器运行时执行上述方法对应的实施例。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(英文：processor)执行本申请各个实施例所述方法的部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(英文：Read－Only Memory，简称：ROM)、随机存取存储器(英文：Random Access Memory，简称：RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

Claims (12)

1.一种页面访问方法，其特征在于，所述方法包括：

接收前端针对目标业务的页面访问请求，所述页面访问请求包括：浏览器信息以及所述目标业务的业务代码中预设语法标准的使用信息；

根据所述浏览器信息和所述预设语法标准的使用信息确定所述目标业务的第一目标代码补丁；

向所述前端返回所述第一目标代码补丁，以使得所述前端基于所述第一目标代码补丁和所述业务代码进行所述目标业务的页面渲染。

2.如权利要求1所述的方法，其特征在于，所述根据所述浏览器信息和所述预设语法标准的使用信息确定所述目标业务的第一目标代码补丁，包括：

根据所述浏览器信息，获取预设业务的页面浏览器对应的代码补丁；

根据所述预设语法标准的使用信息，从所述页面浏览器对应的代码补丁中确定所述目标业务的第一目标代码补丁。

3.如权利要求1所述的方法，其特征在于，所述浏览器信息包括：用户代理信息、浏览器补丁服务的地址信息；

所述根据所述浏览器信息，获取所述目标业务的页面浏览器对应的代码补丁，包括：

根据所述用户代理信息，从预设的浏览器版本列表中确定所述页面浏览器的版本信息；

根据所述版本信息，查找预设的数据库中是否缓存有所述版本信息对应的代码补丁；

若所述数据库中未缓存所述版本信息对应的代码补丁，则根据所述版本信息以及所述浏览器补丁服务的地址信息，查找所述版本信息对应的代码补丁，并确定所述版本信息对应的代码补丁为所述页面浏览器对应的代码补丁。

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

将所述第一目标代码补丁和所述版本信息，缓存至所述数据库中。

5.如权利要求4所述的方法，其特征在于，所述将所述第一目标代码补丁和所述版本信息，缓存至所述数据库中，包括：

采用键值对的方式，将所述第一目标代码补丁和所述版本信息，缓存至所述数据库中。

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

若所述数据库中缓存有所述版本信息对应的代码补丁，则确定所述数据库中所述版本信息对应的代码补丁为所述目标业务的第二目标代码补丁；

向所述前端返回所述第二目标代码补丁，以使得所述前端基于所述第二目标代码补丁和所述业务代码进行所述目标业务的页面渲染。

7.如权利要求3所述的方法，其特征在于，所述预设语法标准的使用信息和所述浏览器补丁服务的地址信息，以链接的形式插入在所述目标业务的页面入口文件中。

8.如权利要求1所述的方法，其特征在于，所述根据所述预设语法标准的使用信息，从所述页面浏览器对应的代码补丁中确定所述目标业务的第一目标代码补丁，包括：

从所述页面浏览器对应的代码补丁中移除不满足所述预设语法标准的使用信息的代码补丁，得到所述第一目标代码补丁。

9.如权利要求1－8中任一所述的方法，其特征在于，所述页面访问请求中所述预设语法标准的使用信息为：所述预设语法标准的使用映射表，所述使用映射表包括：所述目标业务的所有业务代码中所述预设语法标准的使用信息。

10.一种页面访问装置，其特征在于，所述装置包括：接收模块、确定模块和渲染模块，其中：

所述接收模块，用于接收前端针对目标业务的页面访问请求，所述页面访问请求包括：浏览器信息以及所述目标业务的业务代码中预设语法标准的使用信息；

所述确定模块，用于根据所述浏览器信息和所述预设语法标准的使用信息确定所述目标业务的第一目标代码补丁；

所述渲染模块，用于向所述前端返回所述第一目标代码补丁，以使得所述前端基于所述第一目标代码补丁和所述业务代码进行所述目标业务的页面渲染。

11.一种页面访问设备，其特征在于，所述设备包括：处理器、存储介质和总线，所述存储介质存储有所述处理器可执行的机器可读指令，当所述页面访问设备运行时，所述处理器与所述存储介质之间通过总线通信，所述处理器执行所述机器可读指令，以执行上述权利要求1－9任一项所述的方法。

12.一种存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行上述权利要求1－9任一项所述的方法。

Images