CN116795405A - 千人千面场景前端页面快速渲染方法、服务器及前端设备 - Google Patents
千人千面场景前端页面快速渲染方法、服务器及前端设备 Download PDFInfo
- Publication number
- CN116795405A CN116795405A CN202311078366.6A CN202311078366A CN116795405A CN 116795405 A CN116795405 A CN 116795405A CN 202311078366 A CN202311078366 A CN 202311078366A CN 116795405 A CN116795405 A CN 116795405A
- Authority
- CN
- China
- Prior art keywords
- information
- page
- node
- dom
- feedback information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 44
- 238000009877 rendering Methods 0.000 title claims abstract description 40
- 238000013507 mapping Methods 0.000 claims abstract description 40
- 238000004422 calculation algorithm Methods 0.000 claims description 24
- 238000004590 computer program Methods 0.000 claims description 6
- 238000012986 modification Methods 0.000 abstract description 6
- 230000004048 modification Effects 0.000 abstract description 6
- 230000003068 static effect Effects 0.000 abstract description 6
- 238000011161 development Methods 0.000 abstract description 5
- 238000010586 diagram Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000001133 acceleration Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 238000012795 verification Methods 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Security & Cryptography (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明涉及互联网技术领域，公开了千人千面场景前端页面快速渲染方法、服务器及前端设备。本发明的前端设备向服务器发送待加载前端页面的包括页面配置信息和用户信息在内的请求；由服务器确定组件展示需求信息及判断请求是否为页面更新请求，进而生成对应的反馈信息，反馈信息在请求为页面更新请求时包括相应的标记信息；由前端设备执行页面加载操作，包括构建当前虚拟DOM，在反馈信息包括标记信息时基于当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在反馈信息不包括标记信息时将当前虚拟DOM映射为真实DOM。本发明解决了传统基于静态代码进行页面开发的方法存在页面加载时间长和修改成本高的缺陷的技术问题，能够有效提高页面渲染的效率。
Description
技术领域
本发明涉及互联网技术领域，尤其涉及千人千面场景前端页面快速渲染方法、服务器及前端设备。
背景技术
进行营销活动时，若想让不同的客户群体看到不同的页面，需要开发多个页面，针对不同的客户群体进行投放。
然而，传统的页面通常基于静态代码进行开发，针对不同的客户群体要展示不同的样式时，需要开发多套HTML（超文本标记语言）代码和CSS样式（层叠样式表）。这种方式下代码包过大，存在页面加载时间长和修改成本高的缺陷。
发明内容
本发明提供了千人千面场景前端页面快速渲染方法、服务器及前端设备，解决了传统基于静态代码进行页面开发的方法存在页面加载时间长和修改成本高的缺陷的技术问题。
本发明第一方面提供一种千人千面场景前端页面快速渲染方法，应用于服务器，所述方法包括：
接收前端设备发送的待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；
根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件，得到组件展示需求信息；
根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，得到相应的判断结果；
基于所述判断结果、所述页面配置信息和所述组件展示需求信息生成对应的反馈信息；所述反馈信息包括HTML文件和JS（脚本）对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；
将所述反馈信息发送至所述前端设备，以供所述前端设备基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM（文档对象模型），在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
根据本发明第一方面的一种能够实现的方式，所述根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，包括：
查询距离当前预置时间段内是否有得到对应所述用户信息的组件展示需求信息；
若有，且距离当前预置时间段内得到的对应所述用户信息的组件展示需求信息与当前得到的组件展示需求信息不一致，判定所述请求为页面更新请求。
本发明第二方面提供一种服务器，包括：
第一接收模块，用于接收前端设备发送的待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；
确定模块，用于根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件，得到组件展示需求信息；
判断模块，用于根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，得到相应的判断结果；
生成模块，用于基于所述判断结果、所述页面配置信息和所述组件展示需求信息生成对应的反馈信息；所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；
第一发送模块，用于将所述反馈信息发送至所述前端设备，以供所述前端设备基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
根据本发明第二方面的一种能够实现的方式，所述判断模块包括：
查询单元，用于查询距离当前预置时间段内是否有得到对应所述用户信息的组件展示需求信息；
判定单元，用于在有得到对应所述用户信息的组件展示需求信息且距离当前预置时间段内得到的对应所述用户信息的组件展示需求信息与当前得到的组件展示需求信息不一致时，判定所述请求为页面更新请求。
本发明第三方面提供一种千人千面场景前端页面快速渲染方法，应用于前端设备，所述方法包括：
向服务器发送待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；
接收所述服务器根据判断结果、页面配置信息和组件展示需求信息生成的反馈信息；所述组件展示需求信息由所述服务器根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件时得到，所述判断结果由所述服务器根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求时得到，所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；
基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
根据本发明第三方面的一种能够实现的方式，所述在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，包括：
将所述当前虚拟DOM对应DOM树的节点集合视为新节点集合，将所述历史虚拟DOM对应DOM树的节点集合视为旧节点集合，基于所述新节点集合中每个节点的key构建存储有节点索引与key的对应关系的第一目标映射列表；
对所述旧节点集合上的节点进行遍历，每次的遍历操作包括：将当前所遍历的节点的key与第一目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的节点；若匹配失败，判断当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的节点；
当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点相等时，基于当前所遍历的节点中的各子节点的key构建存储有子节点索引与key的对应关系的第二目标映射列表；对当前所遍历的子节点进行遍历，每次的遍历操作包括：将当前所遍历的子节点的key与第二目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的子节点；若匹配失败，判断当前所遍历的子节点与通过所匹配到的key对应的子节点索引在所述新节点集合中获取的子节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的子节点；
将当前的旧节点集合与新节点集合进行比较，将所述新节点集合中相对于旧节点集合多出来的节点插入到旧节点集合中，完成DOM树更新。
本发明第四方面提供一种前端设备，包括：
第二发送模块，用于向服务器发送待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；
第二接收模块，用于接收所述服务器根据判断结果、页面配置信息和组件展示需求信息生成的反馈信息；所述组件展示需求信息由所述服务器根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件时得到，所述判断结果由所述服务器根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求时得到，所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；
执行模块，用于基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
根据本发明第四方面的一种能够实现的方式，所述执行模块包括基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新的执行单元，所述执行单元具体用于：
将所述当前虚拟DOM对应DOM树的节点集合视为新节点集合，将所述历史虚拟DOM对应DOM树的节点集合视为旧节点集合，基于所述新节点集合中每个节点的key构建存储有节点索引与key的对应关系的第一目标映射列表；
对所述旧节点集合上的节点进行遍历，每次的遍历操作包括：将当前所遍历的节点的key与第一目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的节点；若匹配失败，判断当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的节点；
当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点相等时，基于当前所遍历的节点中的各子节点的key构建存储有子节点索引与key的对应关系的第二目标映射列表；对当前所遍历的子节点进行遍历，每次的遍历操作包括：将当前所遍历的子节点的key与第二目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的子节点；若匹配失败，判断当前所遍历的子节点与通过所匹配到的key对应的子节点索引在所述新节点集合中获取的子节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的子节点；
将当前的旧节点集合与新节点集合进行比较，将所述新节点集合中相对于旧节点集合多出来的节点插入到旧节点集合中，完成DOM树更新。
本发明第五方面提供了一种电子设备，包括：
存储器，用于存储指令；其中，所述指令用于实现如本发明第一方面或第三方面中任意一项能够实现的方式所述的千人千面场景前端页面快速渲染方法；
处理器，用于执行所述存储器中的指令。
本发明第六方面一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如本发明第一方面或第三方面中任意一项能够实现的方式所述的千人千面场景前端页面快速渲染方法。
从以上技术方案可以看出，本发明具有以下优点：
本发明的前端设备向服务器发送待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；由服务器确定组件展示需求信息及判断所述请求是否为页面更新请求；服务器基于是否为页面更新请求的判断结果、所述页面配置信息和所述组件展示需求信息生成对应的反馈信息，反馈信息包括HTML文件和JS对象且在所述判断结果为是时还包括相应的标记信息；前端设备基于所述反馈信息执行页面加载操作，包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM；本发明利用通过服务器接口获取到的前端页面的页面配置信息进行页面渲染，如果投放需求有修改，只需在后台修改页面配置信息，前端页面能够基于此实现同步更新，解决了传统基于静态代码进行页面开发的方法存在页面加载时间长和修改成本高的缺陷的技术问题，且使用虚拟DOM渲染的方式，能够有效提高页面渲染的效率。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
图1为本发明一个可选实施例提供的一种千人千面场景前端页面快速渲染方法（应用于服务器）的流程图；
图2为本发明一个可选实施例提供的一种千人千面场景前端页面快速渲染方法（应用于前端设备）的流程图；
图3为本发明一个可选实施例提供的一种服务器的结构连接框图；
图4为本发明一个可选实施例提供的一种前端设备的结构连接框图。
附图标记：
1-第一接收模块；2-确定模块；3-判断模块；4-生成模块；5-第一发送模块；10-第二发送模块；20-第二接收模块；30-执行模块。
实施方式
本发明实施例提供了千人千面场景前端页面快速渲染方法、服务器及前端设备，用于解决传统基于静态代码进行页面开发的方法存在页面加载时间长和修改成本高的缺陷的技术问题。
为使得本发明的发明目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本发明一部分实施例，而非全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
本发明第一方面实施例提供了一种千人千面场景前端页面快速渲染方法，所述方法应用于服务器。
请参阅图1，图1示出了本发明实施例提供的一种千人千面场景前端页面快速渲染方法（应用于服务器）的流程图。
本发明实施例提供的一种千人千面场景前端页面快速渲染方法，包括：
步骤S1，接收前端设备发送的待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息。
作为具体的实施方式，营销者可以根据营销需求进行活动的配置，配置完成后发布生成一个H5链接，由用户通过前端设备访问H5链接来访问活动，用户访问链接时会先通过服务器接口读取此页面的配置信息，然后结合当前的用户信息，再发送给服务器。
进一步地，服务器接口的数据可以通过redis缓存。当用户后面进入页面时，通过缓存加速结合CDN（内容分发网络）静态资源加速，进一步加快页面的渲染。
步骤S2，根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件，得到组件展示需求信息。
可以根据实际需求设置相应的校验规则，从而服务器根据该校验规则判断出用户要展示和隐藏的组件，以得到组件展示需求信息，后续基于组件展示需求信息向前端设备进行反馈，使得前端设备根据所反馈的信息实现千人千面场景前端页面快速渲染。例如，可以设置存储有客户群体和标准组件展示需求的对应关系的映射列表，通过用户信息确定所属的客户群体，进而基于该映射列表确定标准组件展示需求信息，基于该页面配置信息解析得到初始组件展示需求信息，进而结合该标准组件展示需求信息对解析得到的初始组件展示需求信息进行校验和更新，得到组件展示需求信息。
步骤S3，根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，得到相应的判断结果。
在一种能够实现的方式中，所述根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，包括：
查询距离当前预置时间段内是否有得到对应所述用户信息的组件展示需求信息；
若有，且距离当前预置时间段内得到的对应所述用户信息的组件展示需求信息与当前得到的组件展示需求信息不一致，判定所述请求为页面更新请求。
其中，预置时间段可以根据实际情况进行灵活设置。
步骤S4，基于所述判断结果、所述页面配置信息和所述组件展示需求信息生成对应的反馈信息；所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息。
本发明实施例中，基于所述判断结果、所述页面配置信息和所述组件展示需求信息生成对应的反馈信息，后续由前端设备基于该反馈信息渲染页面，能够使得所渲染的页面符合用户的需求，满足千人千面的前端页面渲染。
作为一种实施方式，所述反馈信息还可以包括在构建DOM树的过程中所要执行的与JS对象具有相同操作属性的JS子文件，该JS子文件与JS对象合并为JS文件，以减少前端设备构建DOM树的操作，从而减少页面加载时间。
步骤S5，将所述反馈信息发送至所述前端设备，以供所述前端设备基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
需要说明的是，本发明实施例中前端设备所采用的diff算法可以参考现有技术，也可以采用本发明第三方面实施例中的改进diff算法。
本发明实施例中，由服务器预先根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，当判断结果为是时在反馈信息中添加相应的标记，前端设备根据反馈信息中是否包括标记信息执行不同的页面加载操作，省略了前端设备关于此的分析过程，能够有效提高前端设备渲染页面的效率。
虚拟DOM是一个使用JS模拟了DOM结构的树形结构，这个树包含整个DOM结构的信息。假如一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地的一个JS对象中，最终将这个JS对象一次性链接到DOM树上，通知前端设备去执行绘制工作，这样可以避免大量无谓的计算量。本发明实施例中，使用虚拟DOM渲染，当用户初次进入页面时，通过服务器接口获取页面的样式信息，通过返回的JS对象渲染成虚拟DOM，让页面的更新先全部反应到JS对象的上，JS对象操作内存的速度更快，等JS对象更新完成后再映射成真实的DOM，这样，相对于直接在真实DOM上操作的方式，能够尽量减少DOM操作的次数，有效加快页面渲染；当页面配置二次修改时，通过diff算法对比新旧虚拟DOM，寻找到彼此之间的差异，根据对比结果更新虚拟DOM，从而减少真实DOM的变动，减少页面重绘和回流的频率，降低CPU和内存的负载，从而提升页面更新的速度。
本发明第二方面实施例提供了一种服务器，该服务器可用于执行本发明第一方面实施例中任一项能够实现的方式所述的千人千面场景前端页面快速渲染方法。
请参阅图2，图2示出了本发明实施例提供的一种服务器的结构连接框图。
本发明实施例提供的一种服务器，包括：
第一接收模块1，用于接收前端设备发送的待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；
确定模块2，用于根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件，得到组件展示需求信息；
判断模块3，用于根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求，得到相应的判断结果；
生成模块4，用于基于所述判断结果、所述页面配置信息和所述组件展示需求信息生成对应的反馈信息；所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；
第一发送模块5，用于将所述反馈信息发送至所述前端设备，以供所述前端设备基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
在一种能够实现的方式中，所述判断模块3包括：
查询单元，用于查询距离当前预置时间段内是否有得到对应所述用户信息的组件展示需求信息；
判定单元，用于在有得到对应所述用户信息的组件展示需求信息且距离当前预置时间段内得到的对应所述用户信息的组件展示需求信息与当前得到的组件展示需求信息不一致时，判定所述请求为页面更新请求。
本发明第三方面实施例提供了一种千人千面场景前端页面快速渲染方法，所述方法应用于前端设备。
请参阅图3，图3示出了本发明实施例提供的一种千人千面场景前端页面快速渲染方法（应用于前端设备）的流程图。
本发明实施例提供的一种千人千面场景前端页面快速渲染方法，包括：
步骤S10，向服务器发送待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；
步骤S20，接收所述服务器根据判断结果、页面配置信息和组件展示需求信息生成的反馈信息；所述组件展示需求信息由所述服务器根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件时得到，所述判断结果由所述服务器根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求时得到，所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；
步骤S30，基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
在一种能够实现的方式中，所述在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，包括：
将所述当前虚拟DOM对应DOM树的节点集合视为新节点集合，将所述历史虚拟DOM对应DOM树的节点集合视为旧节点集合，基于所述新节点集合中每个节点的key构建存储有节点索引与key的对应关系的第一目标映射列表；
对所述旧节点集合上的节点进行遍历，每次的遍历操作包括：将当前所遍历的节点的key与第一目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的节点；若匹配失败，判断当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的节点；
当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点相等时，基于当前所遍历的节点中的各子节点的key构建存储有子节点索引与key的对应关系的第二目标映射列表；对当前所遍历的子节点进行遍历，每次的遍历操作包括：将当前所遍历的子节点的key与第二目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的子节点；若匹配失败，判断当前所遍历的子节点与通过所匹配到的key对应的子节点索引在所述新节点集合中获取的子节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的子节点；
将当前的旧节点集合与新节点集合进行比较，将所述新节点集合中相对于旧节点集合多出来的节点插入到旧节点集合中，完成DOM树更新。
本发明实施例中，对传统的diff算法进行了改进。传统的diff算法中先将旧节点集合与新节点集合进行比较，再进行节点比较和子节点比较，本发明实施例中先进行节点删除的操作，再将操作后得到的旧节点集合与新节点集合进行比较，能够减少移动DOM数的节点的次数，从而减少算法在DOM树更新过程中对DOM的冗余操作。
本发明第四方面实施例提供了一种前端设备，该前端设备可用于执行本发明第三方面实施例中任一项能够实现的方式所述的千人千面场景前端页面快速渲染方法。
请参阅图4，图4示出了本发明实施例提供的一种前端设备的结构连接框图。
本发明实施例提供的一种前端设备，包括：
第二发送模块10，用于向服务器发送待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；
第二接收模块20，用于接收所述服务器根据判断结果、页面配置信息和组件展示需求信息生成的反馈信息；所述组件展示需求信息由所述服务器根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件时得到，所述判断结果由所述服务器根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求时得到，所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；
执行模块30，用于基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
在一种能够实现的方式中，所述执行模块30包括基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新的执行单元，所述执行单元具体用于：
将所述当前虚拟DOM对应DOM树的节点集合视为新节点集合，将所述历史虚拟DOM对应DOM树的节点集合视为旧节点集合，基于所述新节点集合中每个节点的key构建存储有节点索引与key的对应关系的第一目标映射列表；
对所述旧节点集合上的节点进行遍历，每次的遍历操作包括：将当前所遍历的节点的key与第一目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的节点；若匹配失败，判断当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的节点；
当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点相等时，基于当前所遍历的节点中的各子节点的key构建存储有子节点索引与key的对应关系的第二目标映射列表；对当前所遍历的子节点进行遍历，每次的遍历操作包括：将当前所遍历的子节点的key与第二目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的子节点；若匹配失败，判断当前所遍历的子节点与通过所匹配到的key对应的子节点索引在所述新节点集合中获取的子节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的子节点；
将当前的旧节点集合与新节点集合进行比较，将所述新节点集合中相对于旧节点集合多出来的节点插入到旧节点集合中，完成DOM树更新。
本发明第五方面实施例提供了一种电子设备，包括：
存储器，用于存储指令；其中，所述指令用于实现如本发明第一方面实施例或第三方面实施例中任意一项能够实现的方式所述的千人千面场景前端页面快速渲染方法；
处理器，用于执行所述存储器中的指令。
本发明第六方面实施例一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如本发明第一方面实施例或第三方面实施例中任意一项能够实现的方式所述的千人千面场景前端页面快速渲染方法。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的服务器、前端设备、模块和单元的具体工作过程，可以参考前述相应方法实施例中的对应过程，上述描述的服务器、前端设备、模块和单元的具体有益效果，可以参考前述方法实施例中的对应有益效果，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的服务器、前端设备和方法，可以通过其它的方式实现。例如，以上所描述的服务器及前端设备的实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个装置，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。
所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-OnlyMemory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (10)
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构建存储有节点索引与key的对应关系的第一目标映射列表；
对所述旧节点集合上的节点进行遍历，每次的遍历操作包括：将当前所遍历的节点的key与第一目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的节点；若匹配失败，判断当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的节点；
当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点相等时，基于当前所遍历的节点中的各子节点的key构建存储有子节点索引与key的对应关系的第二目标映射列表；对当前所遍历的子节点进行遍历，每次的遍历操作包括：将当前所遍历的子节点的key与第二目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的子节点；若匹配失败，判断当前所遍历的子节点与通过所匹配到的key对应的子节点索引在所述新节点集合中获取的子节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的子节点；
将当前的旧节点集合与新节点集合进行比较，将所述新节点集合中相对于旧节点集合多出来的节点插入到旧节点集合中，完成DOM树更新。
7.一种前端设备，其特征在于，包括：
第二发送模块，用于向服务器发送待加载前端页面的请求；所述请求包括当前的用户信息和用户访问目标活动链接时通过调用相应的服务器接口读取到的页面配置信息；
第二接收模块，用于接收所述服务器根据判断结果、页面配置信息和组件展示需求信息生成的反馈信息；所述组件展示需求信息由所述服务器根据所述用户信息和所述页面配置信息确定需要展示的前端页面的组件时得到，所述判断结果由所述服务器根据所述用户信息和所述组件展示需求信息判断所述请求是否为页面更新请求时得到，所述反馈信息包括HTML文件和JS对象，所述反馈信息在所述判断结果为是时还包括相应的标记信息；
执行模块，用于基于所述反馈信息执行页面加载操作；所述页面加载操作包括基于所述反馈信息构建当前虚拟DOM，在所述反馈信息包括所述标记信息时基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新，在所述反馈信息不包括所述标记信息时将当前虚拟DOM映射为真实DOM。
8.根据权利要求7所述的前端设备，其特征在于，所述执行模块包括基于通过diff算法对比得到的所述当前虚拟DOM和历史虚拟DOM的比较结果进行DOM树更新的执行单元，所述执行单元具体用于：
将所述当前虚拟DOM对应DOM树的节点集合视为新节点集合，将所述历史虚拟DOM对应DOM树的节点集合视为旧节点集合，基于所述新节点集合中每个节点的key构建存储有节点索引与key的对应关系的第一目标映射列表；
对所述旧节点集合上的节点进行遍历，每次的遍历操作包括：将当前所遍历的节点的key与第一目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的节点；若匹配失败，判断当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的节点；
当前所遍历的节点与通过所匹配到的key对应的节点索引在所述新节点集合中获取的节点相等时，基于当前所遍历的节点中的各子节点的key构建存储有子节点索引与key的对应关系的第二目标映射列表；对当前所遍历的子节点进行遍历，每次的遍历操作包括：将当前所遍历的子节点的key与第二目标映射列表中的key进行匹配；若匹配成功，在所述旧节点集合上删除当前所遍历的子节点；若匹配失败，判断当前所遍历的子节点与通过所匹配到的key对应的子节点索引在所述新节点集合中获取的子节点是否相等，若不相等则在所述旧节点集合上删除当前所遍历的子节点；
将当前的旧节点集合与新节点集合进行比较，将所述新节点集合中相对于旧节点集合多出来的节点插入到旧节点集合中，完成DOM树更新。
9.一种电子设备，其特征在于，包括：
存储器，用于存储指令；其中，所述指令用于实现如权利要求1或2所述的千人千面场景前端页面快速渲染方法，或者，所述指令用于实现如权利要求5或6所述的千人千面场景前端页面快速渲染方法；
处理器，用于执行所述存储器中的指令。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1或2所述的千人千面场景前端页面快速渲染方法，或者，实现如权利要求5或6所述的千人千面场景前端页面快速渲染方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311078366.6A CN116795405B (zh) | 2023-08-25 | 2023-08-25 | 千人千面场景前端页面快速渲染方法、服务器及前端设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311078366.6A CN116795405B (zh) | 2023-08-25 | 2023-08-25 | 千人千面场景前端页面快速渲染方法、服务器及前端设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116795405A true CN116795405A (zh) | 2023-09-22 |
| CN116795405B CN116795405B (zh) | 2023-11-21 |
Family
ID=88040028
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311078366.6A Active CN116795405B (zh) | 2023-08-25 | 2023-08-25 | 千人千面场景前端页面快速渲染方法、服务器及前端设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116795405B (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105630902A (zh) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | 一种渲染和增量更新网页的方法 |
| WO2017036309A1 (zh) * | 2015-08-31 | 2017-03-09 | 阿里巴巴集团控股有限公司 | 页面渲染方法、装置及设备 |
| CN108153788A (zh) * | 2016-12-02 | 2018-06-12 | 阿里巴巴集团控股有限公司 | 页面信息个性化处理方法、装置及系统 |
| CN108846087A (zh) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | 一种页面渲染方法、装置、终端及服务器 |
| CN114063996A (zh) * | 2020-07-29 | 2022-02-18 | 中移(苏州)软件技术有限公司 | 一种生成网页的方法和设备，及存储介质 |
| CN114995859A (zh) * | 2022-06-29 | 2022-09-02 | 深圳前海微众银行股份有限公司 | 页面热更新方法、装置、设备及存储介质 |
-
2023
- 2023-08-25 CN CN202311078366.6A patent/CN116795405B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2017036309A1 (zh) * | 2015-08-31 | 2017-03-09 | 阿里巴巴集团控股有限公司 | 页面渲染方法、装置及设备 |
| CN105630902A (zh) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | 一种渲染和增量更新网页的方法 |
| CN108153788A (zh) * | 2016-12-02 | 2018-06-12 | 阿里巴巴集团控股有限公司 | 页面信息个性化处理方法、装置及系统 |
| CN108846087A (zh) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | 一种页面渲染方法、装置、终端及服务器 |
| CN114063996A (zh) * | 2020-07-29 | 2022-02-18 | 中移(苏州)软件技术有限公司 | 一种生成网页的方法和设备，及存储介质 |
| CN114995859A (zh) * | 2022-06-29 | 2022-09-02 | 深圳前海微众银行股份有限公司 | 页面热更新方法、装置、设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116795405B (zh) | 2023-11-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10979538B1 (en) | Application state server-side cache for a state-based client-server application | |
| US8983935B2 (en) | Methods for utilizing a javascript emulator in a web content proxy server and devices thereof | |
| CN112306881B (zh) | 模拟数据生成方法、装置、设备及存储介质 | |
| CN110944048B (zh) | 业务逻辑配置方法及装置 | |
| CN108334562A (zh) | 一种页面显示方法和装置 | |
| CN101821698A (zh) | 用于连接真实世界web应用与3d虚拟世界的方法和装置 | |
| KR101198437B1 (ko) | 컨텍스트 트리거형 배포 방법, 장치 및 컴퓨터 판독 가능한 저장매체 | |
| CN111125496B (zh) | 一种价格查询方法、装置及系统 | |
| US20080147875A1 (en) | System, method and program for minimizing amount of data transfer across a network | |
| CN109213948A (zh) | 网页加载方法、中间服务器和网页加载系统 | |
| CN111913705B (zh) | 一种基于差异更新算法的JavaScript模板实现方法 | |
| CN107357890A (zh) | 一种网页文件处理方法、装置及系统和存储设备 | |
| CN113076729B (zh) | 用于报表导入的方法及系统、可读存储介质及电子设备 | |
| KR101035327B1 (ko) | 로그 분석을 이용한 자동 진화형 웹페이지 제공 방법 및 시스템 | |
| CN112256772A (zh) | 数据服务方法、装置以及可读存储介质 | |
| CN111581565B (zh) | 一种页面样式配置方法、系统、介质及设备 | |
| CN114153856A (zh) | 主机数据双写方法及装置 | |
| CN110334103A (zh) | 推荐服务的更新方法、提供装置、访问装置和推荐系统 | |
| KR20060054295A (ko) | 상이한 플랫폼 상에서 폰트 사이즈를 유지하는 방법 및시스템 | |
| CN116795405B (zh) | 千人千面场景前端页面快速渲染方法、服务器及前端设备 | |
| CN114936151A (zh) | 调试页面的显示方法、装置、设备、存储介质及通信系统 | |
| CN114124766A (zh) | 基于模拟数据的测试方法及装置 | |
| CN113382089B (zh) | 一种b/s架构的数据推送方法和装置 | |
| CN113821750B (zh) | 一种页面数据处理方法、系统、电子设备及可读存储介质 | |
| CN112925482B (zh) | 数据处理方法、装置、系统、电子设备和计算机存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |