千人千面场景前端页面快速渲染方法、服务器及前端设备技术

本发明专利技术涉及互联网技术领域，公开了千人千面场景前端页面快速渲染方法、服务器及前端设备。本发明专利技术的前端设备向服务器发送待加载前端页面的包括页面配置信息和用户信息在内的请求；由服务器确定组件展示需求信息及判断请求是否为页面更新请求，进而生成对应的反馈信息，反馈信息在请求为页面更新请求时包括相应的标记信息；由前端设备执行页面加载操作，包括构建当前虚拟DOM，在反馈信息包括标记信息时基于当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在反馈信息不包括标记信息时将当前虚拟DOM映射为真实DOM。本发明专利技术解决了传统基于静态代码进行页面开发的方法存在页面加载时间长和修改成本高的缺陷的技术问题，能够有效提高页面渲染的效率。够有效提高页面渲染的效率。够有效提高页面渲染的效率。

【技术实现步骤摘要】
千人千面场景前端页面快速渲染方法、服务器及前端设备


[0001]本专利技术涉及互联网
，尤其涉及千人千面场景前端页面快速渲染方法、服务器及前端设备。

技术介绍

[0002]进行营销活动时，若想让不同的客户群体看到不同的页面，需要开发多个页面，针对不同的客户群体进行投放。
[0003]然而，传统的页面通常基于静态代码进行开发，针对不同的客户群体要展示不同的样式时，需要开发多套HTML（超文本标记语言）代码和CSS样式（层叠样式表）。这种方式下代码包过大，存在页面加载时间长和修改成本高的缺陷。

技术实现思路

[0004]本专利技术提供了千人千面场景前端页面快速渲染方法、服务器及前端设备，解决了传统基于静态代码进行页面开发的方法存在页面加载时间长和修改成本高的缺陷的技术问题。
[0005]本专利技术第一方面提供一种千人千面场景前端页面快速渲染方法，应用于服务器，所述方法包括：接收前端设备发送的待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件，得到组件展示需求信息；根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，得到相应的判断结果；基于所述判断结果、所述页面配置信息和所述组件展示需求信息生成对应的反馈信息；所述反馈信息包括HTML文件和JS（脚本）对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；将所述反馈信息发送至所述前端设备，以供所述前端设备基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM（文档对象模型），在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
[0006]根据本专利技术第一方面的一种能够实现的方式，所述根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，包括：查询距离当前预置时间段内是否有得到对应所述用户信息的组件展示需求信息；若有，且距离当前预置时间段内得到的对应所述用户信息的组件展示需求信息与当前得到的组件展示需求信息不一致，判定所述请求为页面更新请求。
[0007]本专利技术第二方面提供一种服务器，包括：第一接收模块，用于接收前端设备发送的待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；确定模块，用于根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件，得到组件展示需求信息；判断模块，用于根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，得到相应的判断结果；生成模块，用于基于所述判断结果、所述页面配置信息和所述组件展示需求信息生成对应的反馈信息；所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；第一发送模块，用于将所述反馈信息发送至所述前端设备，以供所述前端设备基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
[0008]根据本专利技术第二方面的一种能够实现的方式，所述判断模块包括：查询单元，用于查询距离当前预置时间段内是否有得到对应所述用户信息的组件展示需求信息；判定单元，用于在有得到对应所述用户信息的组件展示需求信息且距离当前预置时间段内得到的对应所述用户信息的组件展示需求信息与当前得到的组件展示需求信息不一致时，判定所述请求为页面更新请求。
[0009]本专利技术第三方面提供一种千人千面场景前端页面快速渲染方法，应用于前端设备，所述方法包括：向服务器发送待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；接收所述服务器根据判断结果、页面配置信息和组件展示需求信息生成的反馈信息；所述组件展示需求信息由所述服务器根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件时得到，所述判断结果由所述服务器根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求时得到，所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
[0010]根据本专利技术第三方面的一种能够实现的方式，所述在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，包括：将所述当前虚拟DOM对应DOM树的节点集合视为新节点集合，将所述历史虚拟DOM
对应DOM树的节点集合视为旧节点集合，基于所述新节点集合中每个节点的key构建存储有节点索引与key的对应关系的第一目标映射列表；对所述旧节点集合上的节点进行遍历，每次的遍历操作包括：将当前所遍历的节点的key与第一目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的节点；若匹配失败，判断当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的节点；当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点相等时，基于当前所遍历的节点中的各子节点的key构建存储有子节点索引与key的对应关系的第二目标映射列表；对当前所遍历的子节点进行遍历，每次的遍历操作包括：将当前所遍历的子节点的key与第二目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的子节点；若匹配失败，判断当前所遍历的子节点与通过所匹配到的key对应的子节点索引在所述新节点集合中获取的子节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的子节点；将当前的旧节点集合与新节点集合进行比较，将所述新节点集合中相对于旧节点集合多出来的节点插入到旧节点集合中，完成DOM树更新。
[0011]本专利技术第四方面提供一种前端设备，包括：第二发送模块，用于向服务器发送待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；第二接收模块，用于接收所述服务器根据判断结果、页面配置信息和组件展示需求信息生成的反馈信息；所述组件展示需求信息由所述服务器根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件时得到本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种千人千面场景前端页面快速渲染方法，应用于服务器，其特征在于，包括：接收前端设备发送的待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件，得到组件展示需求信息；根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，得到相应的判断结果；基于所述判断结果、所述页面配置信息和所述组件展示需求信息生成对应的反馈信息；所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；将所述反馈信息发送至所述前端设备，以供所述前端设备基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。2.根据权利要求1所述的千人千面场景前端页面快速渲染方法，其特征在于，所述根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，包括：查询距离当前预置时间段内是否有得到对应所述用户信息的组件展示需求信息；若有，且距离当前预置时间段内得到的对应所述用户信息的组件展示需求信息与当前得到的组件展示需求信息不一致，判定所述请求为页面更新请求。3.一种服务器，其特征在于，包括：第一接收模块，用于接收前端设备发送的待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；确定模块，用于根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件，得到组件展示需求信息；判断模块，用于根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，得到相应的判断结果；生成模块，用于基于所述判断结果、所述页面配置信息和所述组件展示需求信息生成对应的反馈信息；所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；第一发送模块，用于将所述反馈信息发送至所述前端设备，以供所述前端设备基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。4.根据权利要求3所述的服务器，其特征在于，所述判断模块包括：查询单元，用于查询距离当前预置时间段内是否有得到对应所述用户信息的组件展示需求信息；
判定单元，用于在有得到对应所述用户信息的组件展示需求信息且距离当前预置时间段内得到的对应所述用户信息的组件展示需求信息与当前得到的组件展示需求信息不一致时，判定所述请求为页面更新请求。5.一种千人千面场景前端页面快速渲染方法，应用于前端设备，其特征在于，包括：向服务器发送待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；接收所述服务器根据判断结果、页面配置信息和组件展示需求信息生成的反馈信息；所述组件展示需求信息由所述服务器根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件时得到，所述判断结果由所述服务器根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求时得到，所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。6.根据权利要求5所述的千人千面场景前端页面快速渲染方法，其特征在于，所述在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，包括：将所述当前虚拟DOM对应DOM树的节点集合视为新节点集合，将所述历史虚拟DOM对应DOM树的节点集合视为旧节点集合，基于所述新节点集合中每个节点的key构建存储有节点索引与ke...

【专利技术属性】
技术研发人员：许海青，徐宝祥，王浈广，
申请(专利权)人：苏州盈天地资讯科技有限公司，
类型：发明
国别省市：