页面渲染方法、计算机设备和计算机可读存储介质技术

本申请涉及一种页面渲染方法、计算机设备和存储介质。所述方法包括：响应于显示目标网页的触发事件，获取目标网页的页面脚本数据；页面脚本数据为基于下发至客户端的页面脚本配置信息得到的，且存储于客户端本地；根据页面脚本数据，生成目标网页的页面模版；页面模版用于渲染出目标网页的页面样式；基于页面模版，渲染得到目标网页对应的预渲染页面；获取目标网页的页面填充数据，根据页面填充数据更新预渲染页面，得到目标网页对应的展示页面；页面填充数据为触发事件请求获得的事件关联数据。采用本方法可以基于页面样式和填充数据分离的页面渲染方式，由各客户端独立执行，不依赖服务器，提升了页面渲染效率，有效减少了网页的白屏时间。网页的白屏时间。网页的白屏时间。

【技术实现步骤摘要】
页面渲染方法、计算机设备和计算机可读存储介质


[0001]本申请涉及计算机
，特别是涉及一种页面渲染方法、计算机设备和计算机可读存储介质。

技术介绍

[0002]目前，针对网页页面渲染处理，通常采用服务端渲染技术(server side render，SSR)，其需要在服务端组装好绑定首屏数据的页面HTML后返回给浏览器，以展示到页面中。
[0003]然而，上述方式依赖服务器执行，在高并发的场景会占用大量的服务器资源，导致服务器负载过高，造成服务器压力较大，影响页面展示速率，存在页面渲染效率低的问题。

技术实现思路

[0004]基于此，有必要针对上述技术问题，提供一种能够提升页面渲染效率的页面渲染方法、计算机设备和计算机可读存储介质。
[0005]第一方面，本申请提供了一种页面渲染方法。所述方法包括：
[0006]响应于显示目标网页的触发事件，获取所述目标网页的页面脚本数据；所述页面脚本数据为基于下发至客户端的页面脚本配置信息得到的，且存储于所述客户端本地；
[0007]根据所述页面脚本数据，生成所述目标网页的页面模版；所述页面模版用于渲染出所述目标网页的页面样式；
[0008]基于所述页面模版，渲染得到所述目标网页对应的预渲染页面；
[0009]获取所述目标网页的页面填充数据，根据所述页面填充数据更新所述预渲染页面，得到所述目标网页对应的展示页面；所述页面填充数据为所述触发事件请求获得的事件关联数据。
[0010]在其中一个实施例中，所述目标网页为所述客户端安装的目标应用中的网页，在所述响应于显示目标网页的触发事件，获取所述目标网页的页面脚本数据的步骤之前，所述方法还包括：
[0011]响应于针对所述目标应用的启动操作，获取下发至所述客户端的页面脚本配置信息；所述页面脚本配置信息包括所述目标应用中不同网页对应的脚本配置参数；
[0012]针对所述目标应用中的每个网页，根据所述网页对应的脚本配置参数，确定所述网页的页面脚本数据，将所述页面脚本数据存储于所述客户端本地。
[0013]在其中一个实施例中，所述获取所述目标网页的页面脚本数据，包括：
[0014]在检测到所述客户端本地未缓存所述页面脚本数据的情况下，展示预设显示页面，并获取当前下发的页面脚本配置信息；
[0015]根据所述页面脚本配置信息，得到所述目标网页的页面脚本数据，并在所述客户端本地中缓存所述页面脚本数据。
[0016]在其中一个实施例中，所述客户端配置有脚本执行引擎，所述根据所述页面脚本数据，生成所述目标网页的页面模版，包括：
[0017]采用所述脚本执行引擎执行所述页面脚本数据，得到当前模版；
[0018]在检测到所述客户端本地未具有所述目标网页的缓存模版的情况下，将所述当前模版作为所述目标网页的页面模版；
[0019]在检测到所述客户端本地具有所述缓存模版的情况下，根据所述缓存模版和所述当前模版，确定所述目标网页的页面模版。
[0020]在其中一个实施例中，所述根据所述缓存模版和所述当前模版，确定所述目标网页的页面模版，包括：
[0021]在所述缓存模版与所述当前模版之间存在差异的情况下，根据所述当前模版更新所述目标网页的缓存模版，得到所述目标网页的页面模版。
[0022]在其中一个实施例中，所述采用所述脚本执行引擎执行所述页面脚本数据，得到当前模版，包括：
[0023]采用所述脚本执行引擎根据客户端信息调用函数，获取所述客户端的客户端信息；所述客户端信息调用函数用于供所述脚本执行引擎与所述客户端之间进行信息交互；
[0024]采用所述脚本执行引擎结合所述页面脚本数据和所述客户端信息，执行网页模版生成操作，得到所述当前模版。
[0025]在其中一个实施例中，所述客户端还配置有页面渲染容器，所述基于所述页面模版，渲染得到所述目标网页对应的预渲染页面，包括：
[0026]采用所述页面渲染容器对所述页面模版进行渲染，得到所述预渲染页面；
[0027]所述根据所述页面填充数据更新所述预渲染页面，得到所述目标网页对应的展示页面，包括：
[0028]通过所述页面渲染容器，采用局部页面刷新机制将所述页面填充数据填充至所述预渲染页面中，得到所述展示页面。
[0029]在其中一个实施例中，所述获取所述目标网页的页面填充数据，包括：
[0030]通过所述页面渲染容器向所述客户端发送数据请求信息；所述数据请求信息用于指示所述客户端获取所述目标网页的页面填充数据；
[0031]通过所述页面渲染容器，接收所述客户端针对所述数据请求信息返回的所述页面填充数据。
[0032]第二方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
[0033]响应于显示目标网页的触发事件，获取所述目标网页的页面脚本数据；所述页面脚本数据为基于下发至客户端的页面脚本配置信息得到的，且存储于所述客户端本地；
[0034]根据所述页面脚本数据，生成所述目标网页的页面模版；所述页面模版用于渲染出所述目标网页的页面样式；
[0035]基于所述页面模版，渲染得到所述目标网页对应的预渲染页面；
[0036]获取所述目标网页的页面填充数据，根据所述页面填充数据更新所述预渲染页面，得到所述目标网页对应的展示页面；所述页面填充数据为所述触发事件请求获得的事件关联数据。
[0037]第三方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
[0038]响应于显示目标网页的触发事件，获取所述目标网页的页面脚本数据；所述页面脚本数据为基于下发至客户端的页面脚本配置信息得到的，且存储于所述客户端本地；
[0039]根据所述页面脚本数据，生成所述目标网页的页面模版；所述页面模版用于渲染出所述目标网页的页面样式；
[0040]基于所述页面模版，渲染得到所述目标网页对应的预渲染页面；
[0041]获取所述目标网页的页面填充数据，根据所述页面填充数据更新所述预渲染页面，得到所述目标网页对应的展示页面；所述页面填充数据为所述触发事件请求获得的事件关联数据。
[0042]第四方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：
[0043]响应于显示目标网页的触发事件，获取所述目标网页的页面脚本数据；所述页面脚本数据为基于下发至客户端的页面脚本配置信息得到的，且存储于所述客户端本地；
[0044]根据所述页面脚本数据，生成所述目标网页的页面模版；所述页面模版用于渲染出所述目标网页的页面样式；
[0045]基于所述页面模版，渲染得到所述目标网页对应的预渲染页面；
[0046]本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面渲染方法，其特征在于，所述方法包括：响应于显示目标网页的触发事件，获取所述目标网页的页面脚本数据；所述页面脚本数据为基于下发至客户端的页面脚本配置信息得到的，且存储于所述客户端本地；根据所述页面脚本数据，生成所述目标网页的页面模版；所述页面模版用于渲染出所述目标网页的页面样式；基于所述页面模版，渲染得到所述目标网页对应的预渲染页面；获取所述目标网页的页面填充数据，根据所述页面填充数据更新所述预渲染页面，得到所述目标网页对应的展示页面；所述页面填充数据为所述触发事件请求获得的事件关联数据。2.根据权利要求1所述的方法，其特征在于，所述目标网页为所述客户端安装的目标应用中的网页，在所述响应于显示目标网页的触发事件，获取所述目标网页的页面脚本数据的步骤之前，所述方法还包括：响应于针对所述目标应用的启动操作，获取下发至所述客户端的页面脚本配置信息；所述页面脚本配置信息包括所述目标应用中不同网页对应的脚本配置参数；针对所述目标应用中的每个网页，根据所述网页对应的脚本配置参数，确定所述网页的页面脚本数据，将所述页面脚本数据存储于所述客户端本地。3.根据权利要求1所述的方法，其特征在于，所述获取所述目标网页的页面脚本数据，包括：在检测到所述客户端本地未缓存所述页面脚本数据的情况下，展示预设显示页面，并获取当前下发的页面脚本配置信息；根据所述页面脚本配置信息，得到所述目标网页的页面脚本数据，并在所述客户端本地中缓存所述页面脚本数据。4.根据权利要求1所述的方法，其特征在于，所述客户端配置有脚本执行引擎，所述根据所述页面脚本数据，生成所述目标网页的页面模版，包括：采用所述脚本执行引擎执行所述页面脚本数据，得到当前模版；在检测到所述客户端本地未具有所述目标网页的缓存模版的情况下，将所述当前模版作为所述目标网页的页面模版；在检测到所述客户端本地具有所述缓存模版的情况下，根据所述缓存模版和所述...

【专利技术属性】
技术研发人员：王培钰，陈熔，吴磊，刘智勇，宋英鑫，赵云龙，丁星，
申请(专利权)人：腾讯音乐娱乐科技深圳有限公司，
类型：发明
国别省市：