一种页面加载方法及系统技术方案

本发明专利技术涉及一种页面加载方法及系统，包括响应客户端目标页面的加载请求，通过无头浏览器访问所述目标页面的原始页面；加载前端静态资源，并请求后端服务器接口，在内存中生成渲染后的html页面；调用所述无头浏览器的接口，获取所述渲染后的html页面；根据所述渲染后的html页面生成html文件，并将所述html文件推送至服务器中的共享文件夹中；将所述html文件返回客户端，以使所述客户端根据所述html文件加载生成所述目标页面。通过在服务器端提前渲染完成目标页面中的内容，浏览器拿到html文件后可以直接生成目标文件，极大降低了前置加载的时间，并且无需修改或重构前端工程的代码，也不需要做服务器端渲染的适配。不需要做服务器端渲染的适配。不需要做服务器端渲染的适配。

【技术实现步骤摘要】
一种页面加载方法及系统


[0001]本专利技术涉及计算机
，尤其涉及一种页面加载方法及系统。

技术介绍

[0002]浏览器在打开网页的时候，往往加载时间过长，这是因为浏览器需要先下载页面必需的静态资源(js和css)，并请求完后台接口后才能渲染页面，这就导致用户等待浏览器显示页面的前置时间过长。当前，比较流行的方式是使用nuxt.js服务器端渲染。
[0003]服务器端渲染可以让用户快速拿到渲染后的内容，但是服务器端渲染的缺陷也十分明显：1.代码复杂度高，为了能够在服务器端渲染页面，这就要求前端代码需要同时兼容服务器端渲染和客户端渲染两种方式，这对于开发人员的技术要求很高。2.开发过程中，一些第三方库只能在浏览器端运行，开发人员只能寻找替代方案或者兼容方案才能使项目正常运行，这将直接影响开发进度。3.服务器端渲染通常需要在内存中组织html。如果同一时刻访问量大，将会大大增加服务器端的压力。例如爬虫同时加载300个本网站的页面，就相当于需要在内存当中组织300个页面，将大大增加服务器端的压力，也有可能导致雪崩效应，使得整个服务器集群瘫痪。当然，也可以对固定ip做限流，但是会影响SEO的效果。

技术实现思路

[0004]为了解决上述
技术介绍
中提到的至少一个问题，专利技术提出一种页面加载方法及系统，通过在服务器端提前渲染完成目标页面中的内容，浏览器拿到html文件后可以直接生成目标文件，极大降低了前置加载的时间，并且无需修改或重构前端工程的代码，也不需要做服务器端渲染的适配。
[0005]为实现以上目的，本专利技术所采用的技术方案包括：
[0006]一种页面加载方法，包括：
[0007]响应客户端目标页面的加载请求，通过无头浏览器访问所述目标页面的原始页面；
[0008]加载前端静态资源，并请求后端服务器接口，在内存中生成渲染后的html页面；
[0009]调用所述无头浏览器的接口，获取所述渲染后的html页面；
[0010]根据所述渲染后的html页面生成html文件，并将所述html文件推送至服务器中的共享文件夹中；
[0011]将所述html文件返回客户端，以使所述客户端根据所述html文件加载生成所述目标页面。
[0012]进一步地，所述无头浏览器运行在服务器中，包括Puppeteer、selenuim和playwright。
[0013]进一步地，所述方法以nginx提供服务，其中，nginx集群缓存所述静态资源。
[0014]进一步地，所述静态资源包括js文件和css文件。
[0015]本专利技术还涉及一种页面加载系统，包括：
[0016]请求模块，用于响应客户端目标页面的加载请求，通过无头浏览器访问所述目标页面的原始页面；
[0017]处理模块，用于加载前端静态资源，并请求后端服务器接口，在内存中生成渲染后的html页面；
[0018]获取模块，用于调用所述无头浏览器的接口，获取所述渲染后的html页面；
[0019]传输模块，用于根据所述渲染后的html页面生成html文件，并将所述html文件推送至服务器中的共享文件夹中；
[0020]生成模块，用于将所述html文件返回客户端，以使所述客户端根据所述html文件加载生成所述目标页面。
[0021]本专利技术还涉及一种计算机可读存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述的方法。
[0022]本专利技术还涉及一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述的方法。
[0023]本专利技术还涉及一种计算机程序产品，包括计算机程序和/或指令，其特征在于，该计算机程序和/或指令被处理器执行时实现上述方法的步骤。
[0024]本专利技术的有益效果为：
[0025]本专利技术通过在服务器端提前渲染完成目标页面中的内容，浏览器拿到html文件后可以直接生成目标文件，极大降低了前置加载的时间，用户访问速度更快。同时。减少了服务器资源消耗，整个方案大部分都是由nginx提供服务，整体对服务器的要求低，可直接应用当前的前端部署方案，只不过调整了nginx的配置，无需修改或重构前端工程的代码，也不需要做服务器端渲染的适配。
附图说明
[0026]图1为本专利技术一种页面加载方法流程示意图。
[0027]图2为本专利技术一种页面加载系统结构示意图。
具体实施方式
[0028]为了更清楚地说明本说明书实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单的介绍。显而易见地，下面描述中的附图仅仅是本说明书的一些示例或实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图将本说明书应用于其它类似情景。除非从语言环境中显而易见或另做说明，图中相同标号代表相同结构或操作。
[0029]应当理解，本文使用的“系统”、“装置”、“单元”和/或“模块”是用于区分不同级别的不同组件、元件、部件、部分或装配的一种方法。然而，如果其他词语可实现相同的目的，则可通过其他表达来替换所述词语。
[0030]如本说明书和权利要求书中所示，除非上下文明确提示例外情形，“一”、“一个”、“一种”和/或“该”等词并非特指单数，也可包括复数。一般说来，术语“包括”与“包含”仅提示包括已明确标识的步骤和元素，而这些步骤和元素不构成一个排它性的罗列，方法或者设备也可能包含其它的步骤或元素。
[0031]本说明书中使用了流程图用来说明根据本说明书的实施例的系统所执行的操作。应当理解的是，前面或后面操作不一定按照顺序来精确地执行。相反，可以按照倒序或同时处理各个步骤。同时，也可以将其他操作添加到这些过程中，或从这些过程移除某一步或数步操作。
[0032]客户端(浏览器)渲染的缺陷十分明显，浏览器需要先加载资源，并请求完接口之后才能渲染页面，加载时间取决于网络环境，并且整体的加载时间过长。
[0033]尽管，服务器端渲染可以让用户快速拿到渲染后的内容，但是服务器端渲染会存在以下问题：
[0034]1.代码复杂度高，为了能够在服务器端渲染页面，这就要求前端代码需要同时兼容服务器端渲染和客户端渲染两种方式，这对于开发人员的技术要求很高。
[0035]2.开发过程中，一些第三方库只能在浏览器端运行，开发人员只能寻找替代方案或者兼容方案才能使项目正常运行，这将直接影响开发进度。
[0036]3.服务器端渲染通常需要在内存中组织html。如果同一时刻访问量大，将会大大增加服务器端的压力。例如爬虫同时加载300个本网站的页面，就相当于需要在内存当中组织300个页面，将大大增加服务器端的压力，也有可能导致雪崩效应，使得整个服务器集群瘫痪。当然，也可以对固定ip做限流，但是会影响SEO的效果。
[0037]目前，App中大量使用H5页面作为主要的面客交互界面。如果App中本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面加载方法，其特征在于，包括：响应客户端目标页面的加载请求，通过无头浏览器访问所述目标页面的原始页面；加载前端静态资源，并请求后端服务器接口，在内存中生成渲染后的html页面；调用所述无头浏览器的接口，获取所述渲染后的html页面；根据所述渲染后的html页面生成html文件，并将所述html文件推送至服务器中的共享文件夹中；将所述html文件返回客户端，以使所述客户端根据所述html文件加载生成所述目标页面。2.如权利要求1所述的方法，其特征在于，所述无头浏览器运行在服务器中，包括Puppeteer、selenuim和playwright。3.如权利要求2所述的方法，其特征在于，所述方法以nginx提供服务，其中，nginx集群缓存所述静态资源。4.如权利要求3所述的方法，其特征在于，所述静态资源包括js文件和css文件。5.一种页面加载系统，其特征在于，包括：请求模块，用于响应客户端目标页面的加载请求，通过无头浏览器访问...

【专利技术属性】
技术研发人员：顾兆铭，
申请(专利权)人：中信百信银行股份有限公司，
类型：发明
国别省市：