[发明专利]一种页面加载方法及系统

说明书

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

技术领域

本发明涉及计算机技术领域，尤其涉及一种页面加载方法及系统。

背景技术

浏览器在打开网页的时候，往往加载时间过长，这是因为浏览器需要先下载页面必需的静态资源(js和css)，并请求完后台接口后才能渲染页面，这就导致用户等待浏览器显示页面的前置时间过长。当前，比较流行的方式是使用nuxt.js服务器端渲染。

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

发明内容

为了解决上述背景技术中提到的至少一个问题，发明提出一种页面加载方法及系统，通过在服务器端提前渲染完成目标页面中的内容，浏览器拿到html文件后可以直接生成目标文件，极大降低了前置加载的时间，并且无需修改或重构前端工程的代码，也不需要做服务器端渲染的适配。

为实现以上目的，本发明所采用的技术方案包括：

一种页面加载方法，包括：

响应客户端目标页面的加载请求，通过无头浏览器访问所述目标页面的原始页面；

加载前端静态资源，并请求后端服务器接口，在内存中生成渲染后的html页面；

调用所述无头浏览器的接口，获取所述渲染后的html页面；

根据所述渲染后的html页面生成html文件，并将所述html文件推送至服务器中的共享文件夹中；

将所述html文件返回客户端，以使所述客户端根据所述html文件加载生成所述目标页面。

进一步地，所述无头浏览器运行在服务器中，包括Puppeteer、selenuim和playwright。

进一步地，所述方法以nginx提供服务，其中，nginx集群缓存所述静态资源。

进一步地，所述静态资源包括js文件和css文件。

本发明还涉及一种页面加载系统，包括：

请求模块，用于响应客户端目标页面的加载请求，通过无头浏览器访问所述目标页面的原始页面；

处理模块，用于加载前端静态资源，并请求后端服务器接口，在内存中生成渲染后的html页面；

获取模块，用于调用所述无头浏览器的接口，获取所述渲染后的html页面；