一种页面渲染方法技术

本发明专利技术提供了一种页面渲染方法

【技术实现步骤摘要】
一种页面渲染方法、系统、装置及计算机可读存储介质


[0001]本专利技术属于前端领域，具体涉及一种页面渲染方法
、
系统
、
装置及计算机可读存储介质
。

技术介绍

[0002]本部分旨在为权利要求书中陈述的本专利技术的实施方式提供背景或上下文
。
此处的描述不因为包括在本部分中就承认是现有技术
。
[0003]随着互联网技术的日新月异，前端代码变得日益复杂
。
然而前端代码的复杂带来了客户端体积增大，用户需要下载更多的内容才能将页面渲染出来
。
为了降低首屏渲染时间，提高用户体验，业界探索了多种渲染方式，例如客户端渲染
(CSR
，
Client Side Rendering)、
服务端渲染
(SSR
，
Server Side Rendering)。
但是这些渲染方式依然难以满足用户对体验的极致追求
。
[0004]随着边缘计算的发展，业界提出了边缘渲染
(ESR
，
Edge Side Rendering)
，利用边缘计算节点距离用户更近，有更短网络延时的优势，将页面进行动静拆分，将静态内容缓存在内容分发网络
(CDN)
先快速返回给用户，然后在边缘计算节点上发起动态内容的请求，之后将动态内容与静态部分再进行拼接，从而进一步提高了用户的首屏加载时间，尤其在边缘地区或者弱网环境也有能拥有很好的用户体验，此外还减少原先
SSR
服务器压力
。
[0005]目前业界对于边缘渲染的落地通常都是在服务端渲染的基础上结合流式传输来实现，仍然存在渲染时间较慢的问题
。

技术实现思路

[0006]针对上述现有技术中存在的问题，提出了一种页面渲染方法
、
系统
、
装置及计算机可读存储介质，利用这种方法
、
装置及计算机可读存储介质，能够解决上述问题
。
[0007]本专利技术提供了以下方案
。
[0008]第一方面，提供一种页面渲染方法，包括：客户端访问页面时，获取待渲染
HTML
页面和客户端渲染脚本，利用客户端渲染脚本对待渲染
HTML
页面进行客户端渲染；客户端待渲染
HTML
页面中存在自定义边缘渲染元素时，利用自定义边缘渲染元素发起边缘渲染请求；边缘服务响应于边缘渲染请求进行边缘渲染，生成可缓存的边缘渲染组件页面并返回给客户端；客户端利用自定义边缘渲染元素挂载边缘渲染组件页面
。
[0009]在一种实施方式中，在客户端访问页面之前，还包括：确定客户端渲染组件和边缘渲染组件的源码，其中，采用边缘渲染包裹器包裹边缘渲染组件；通过边缘渲染转化插件，将边缘渲染包裹器包裹的边缘渲染组件替换为自定义边缘渲染元素，将替换后的源码编译生成待渲染
HTML
页面，将客户端渲染组件编译为客户端渲染脚本；以及，通过边缘渲染转化插件，抽取边缘渲染组件的源码并编译为边缘渲染脚本
。
[0010]在一种实施方式中，还包括：将待渲染
HTML
页面
、
客户端渲染脚本
、
边缘渲染脚本部署到
web
服务器；客户端通过请求访问
web
服务器，获取待渲染
HTML
页面和客户端渲染脚
本，客户端渲染脚本用于客户端执行客户端渲染；边缘服务通过请求访问
web
服务器，获取边缘渲染脚本，边缘渲染脚本用于边缘服务执行边缘渲染
。
[0011]在一种实施方式中，还包括：客户端访问页面时，向内容分发网络
(CDN)
请求待渲染
HTML
页面；获取内容分发网络
(CDN)
中缓存的待渲染
HTML
页面，或者，通过内容分发网络
(CDN)
访问从
Web
服务器请求获取首页
HTML
文件
。
[0012]在一种实施方式中，还包括：客户端发起边缘渲染请求，边缘渲染请求基于自定义边缘渲染元素携带边缘渲染组件的定位标识；边缘服务响应于边缘渲染请求，在根据定位标识命中缓存的边缘渲染组件页面的情况下，向客户端返回缓存的边缘渲染页面组件
。
[0013]在一种实施方式中，还包括：客户端发起边缘渲染请求，边缘渲染请求基于自定义边缘渲染元素携带边缘渲染组件的定位标识；边缘服务响应于边缘渲染请求，运行部署的边缘渲染脚本，从后端服务器获取边缘渲染所需的数据，生成边缘渲染组件页面，并返回客户端
。
[0014]在一种实施方式中，执行边缘渲染脚本生成边缘渲染页面组件之前，还包括：在边缘服务未部署边缘渲染脚本的情况下，从
web
服务器请求获取定位标识对应的边缘渲染脚本
。
[0015]在一种实施方式中，还包括：边缘服务生成边缘渲染组件页面之后，缓存至内容分发网络
(CDN)。
[0016]在一种实施方式中，自定义边缘渲染元素基于
Web Components
标准的自定义元素
API
实现，用于替换边缘渲染组件
。
[0017]第二方面，提供一种页面渲染系统，被配置为用于执行如权利要求1‑9中任一项的方法，包括客户端，用于当访问页面时，获取待渲染
HTML
页面并进行客户端渲染，待渲染
HTML
页面携带自定义边缘渲染元素；待渲染
HTML
页面中存在自定义边缘渲染元素时，利用自定义边缘渲染元素发起边缘渲染请求；边缘服务，用于响应于边缘渲染请求进行边缘渲染，生成可缓存的边缘渲染组件页面，并返回给客户端；客户端，还用于利用
HTML
页面中的自定义边缘渲染元素挂载边缘渲染组件页面
。
[0018]第三方面，提供一种页面渲染装置，包括：至少一个处理器；以及，与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行：第一方面的方法
。
[0019]第四方面，提供一种计算机可读存储介质，计算机可读存储介质存储有程序，当程序被多核处理器执行时，使得多核处理器执行第一方面的方法
。
[0020]上述实施例的优点之一，能够在客户端渲染的基础上实现边缘渲染，能够极大地提升页面渲染性能和效率：
1)
首次加载时减少了边缘渲染包裹部分的组件资源以及相应的渲染时间，提升了首屏渲染性能；
2)
相较于客户端向后端服务器发起请求，由边缘服务向后端服务器发起请求，能够减少
TCP...

【技术保护点】

【技术特征摘要】
1.
一种页面渲染方法，其特征在于，包括：客户端访问页面时，获取待渲染
HTML
页面和客户端渲染脚本，利用所述客户端渲染脚本对待渲染
HTML
页面进行客户端渲染；所述客户端待渲染
HTML
页面中存在自定义边缘渲染元素时，利用所述自定义边缘渲染元素发起边缘渲染请求；边缘服务响应于所述边缘渲染请求进行边缘渲染，生成可缓存的边缘渲染组件页面并返回给所述客户端；所述客户端利用所述自定义边缘渲染元素挂载所述边缘渲染组件页面
。2.
根据权利要求1所述的方法，其特征在于，在客户端访问页面之前，还包括：确定客户端渲染组件和边缘渲染组件的源码，其中，采用边缘渲染包裹器包裹所述边缘渲染组件；通过边缘渲染转化插件，将所述边缘渲染包裹器包裹的所述边缘渲染组件替换为所述自定义边缘渲染元素，将替换后的所述源码编译生成所述待渲染
HTML
页面，将所述客户端渲染组件编译为客户端渲染脚本；以及，通过所述边缘渲染转化插件，抽取所述边缘渲染组件的源码并编译为边缘渲染脚本
。3.
根据权利要求1所述的方法，其特征在于，还包括：将所述待渲染
HTML
页面
、
客户端渲染脚本
、
边缘渲染脚本部署到
web
服务器；所述客户端通过请求访问所述
web
服务器，获取所述待渲染
HTML
页面和所述客户端渲染脚本，所述客户端渲染脚本用于所述客户端执行客户端渲染；所述边缘服务通过请求访问所述
web
服务器，获取所述边缘渲染脚本，所述边缘渲染脚本用于所述边缘服务执行边缘渲染
。4.
根据权利要求1所述的方法，其特征在于，还包括：所述客户端访问页面时，向内容分发网络
(CDN)
请求所述待渲染
HTML
页面；获取所述内容分发网络
(CDN)
中缓存的所述待渲染
HTML
页面，或者，通过所述内容分发网络
(CDN)
访问从所述
Web
服务器请求获取所述首页
HTML
文件
。5.
根据权利要求1所述的方法，其特征在于，还包括：所述客户端发起所述边缘渲染请求，所述边缘渲染请求基于所述自定义边缘渲染元素携带所述边缘...

【专利技术属性】
技术研发人员：张聪萍，汤茂安，魏柯宁，
申请(专利权)人：中国银联股份有限公司，
类型：发明
国别省市：