本技术涉及计算机领域，尤其涉及一种页面渲染方法、装置及相关设备。
背景技术：
1、页面渲染时，页面的每次更新都需要重新渲染整个页面，这意味着页面即使只有一小部分发生了改变，整个页面仍然会被完全重新渲染，包括未发生变化的部分也会重新渲染，这样的页面渲染方式存在明显的弊端，不仅造成系统资源的浪费，而且会导致用户与页面交互时的流畅度差。
技术实现思路
1、本技术提供了一种页面渲染方法、装置及相关设备，用于解决页面渲染会造成系统资源浪费，导致用户与页面交互时的流畅度差的问题。
2、第一方面，提供了一种页面渲染方法，该方法包括以下步骤：页面渲染装置获取第一页面的更新请求，基于更新请求，确定第一页面中的多个响应式数据，每个响应式数据是第一页面中动态变化的数据，每个响应式数据对应第一页面中的一个或者多个组件，每个响应式数据用于描述对应组件的共有属性，基于响应式数据和组件之间的映射关系，确定多个响应式数据对应的响应组件，对第一页面中的响应组件进行渲染更新，获得第二页面。
3、实施第一方面描述的方法，页面渲染装置在接收到第一页面的更新请求时，会先基于更新请求，确定第一页面的待更新的响应式数据，该响应式数据是第一页面中动态变化的数据，然后页面渲染装置基于响应式数据和组件之间的映射关系，确定待更新的响应式数据对应的响应组件，根据响应组件对第一页面进行渲染更新，获得第二页面，使得页面中的响应式数据更新时，使用响应式数据的组件会随之更新，从而达到差异渲染的目的，同时，本技术通过映射关系来确定使用响应式数据的组件的方式实现差异渲染，相比于创建虚拟对象与旧页面对比的方式实现差异渲染，本技术的方式更加高效、快捷，可以降低资源开销，提高渲染流畅度。
4、在一可能的实现方式中，页面渲染装置可以先基于更新请求对全局状态进行更新，其中，全局状态包括第一页面中的多个组件共同使用的数据，全局状态中的数据与使用数据的组件之间存在订阅关系，基于订阅关系，确定全局状态中的更新数据对应的差异组件，根据差异组件涉及的响应式数据，确定第一页面的待更新的响应式数据。
5、上述实现方式，先通过全局状态确定差异组件，然后基于差异组件涉及的响应式数据来确定需要渲染的响应组件，相比于创建虚拟对象与旧页面对比的方式实现差异渲染，本技术的方式更加高效、快捷，可以降低资源开销，提高渲染流畅度。同时，响应式数据通常由各个组件进行维护，全局状态是针对多个组件维护，先通过全局状态确定差异组件，再根据差异组件确定响应式数据的方式，可以免于在页面中的多个组件中寻找响应式数据，提高差异渲染的效率。
6、在一可能的实现方式中，根据响应组件对第一页面进行渲染更新，获得第二页面时，可以先基于依赖关系确定响应组件中的父组件和子组件，其中，子组件的渲染顺序晚于父组件，向响应组件中的父组件发送渲染指令，渲染指令用于指示响应组件中的父组件完成渲染之后，向父组件的子组件发送渲染指令。
7、具体实现中，在确定响应组件中的父组件和子组件之后，如果其中不存在跨层级的依赖关系，可以将一个或者多个响应组件中能够作为父组件的响应组件加入父组件集合。如果存在跨层级的依赖关系，可以先筛选出至少一个父组件，然后确定至少一个父组件中层级最高的父组件加入父组件集合。然后向父组件集合中的多个组件发送渲染指令。简单来说，如果父组件和子组件均需要变化，那么最终通知开始渲染的组件包括父组件，不包括子组件，页面渲染装置会按照依赖关系去渲染组件，所以只需要通知父组件即可，父组件渲染完毕会自动开始渲染子组件。
8、上述实现方式，通过确定需要渲染的响应组件之间的依赖关系，确定响应组件中的父组件和子组件，然后通知父组件开始渲染，父组件渲染完毕后自动按照依赖关系去渲染子组件，这样不仅可以保证渲染顺序的正确性，而且减少了页面渲染装置需要通知渲染的组件数量，减少页面渲染装置的处理压力。
9、在一可能的实现方式中，在页面渲染装置获取第一页面的更新请求之前，页面渲染装置可以获取第一页面的渲染请求，对第一页面进行渲染，确定第一页面的组件列表以及渲染流程，基于组件列表以及渲染流程，确定第一页面中每个组件涉及的响应式数据，建立响应式数据和组件之间的映射关系。其中，一个响应式数据对应一个或者多个组件，对应的组件也就是该响应式数据在渲染时参与的组件。具体实现中，响应式数据指的是在页面发生变化时会随之更新的数据，响应式数据包括属性和状态，属性和状态的描述可参考前述内容，这里不重复赘述。
10、上述实现方式，在前端框架中，比如vue或者react框架，响应式数据是一种机制，用于在数据发生变化时自动更新相关的视图，比如在vue中，响应式数据通过data属性进行定义，当数据发生变化时，vue会自动检测变化，通知使用该数据的代码，例如，视图渲染中使用了数据a，数据a变化之后，前端框架会通知视图进行自动更新。本技术实施例中，用户可以将页面中不会发生变化的数据作为静态数据在页面中存在，比如页面的标题可能一直不会改变，页面的标题栏一直不会发生改变，这类数据可以不作为响应式数据，不参与页面的更新。而页面中需要随着页面变化而变化的数据可以作为响应式数据，将这些响应式数据与组件之间建立映射关系，如果某个属性是响应式数据，它发生变化后，可以通过映射关系完成精确通知，使得依赖该属性的全部组件都可以进行更新。
11、在一可能的实现方式中，根据响应组件对第一页面进行渲染更新，获得第二页面之后，页面渲染装置可以根据第二页面的渲染流程，对响应式数据和组件之间的映射关系进行更新。
12、上述实现方式，相比于传统的vue或者react框架等前端框架，这类框架会在组件初始化时对数据进行绑定，使得数据变化时，与之相关联的视图能够自动更新，但是组件初始化以后，如果新增响应式数据，这些新增的属性无法自动更新，因为它们没有参与初始化绑定的过程，只能通过手动添加的方式实现，如果新增属性很多时，手动添加的人工压力大，效率也很低，而本技术通过收集页面渲染流程，根据渲染流程来维护映射关系，使得新增的属性也可以作为响应式数据随着页面发生变化，并且不需要人工参与，降低人工处理压力，提高渲染效率。
13、在一可能的实现方式中，确定第一页面的组件列表以及渲染流程之后，页面渲染装置可以基于组件列表以及渲染流程对全局状态中的数据进行初始化，确定数据与组件之间的订阅关系。其中，全局状态是页面中组件共享的数据，可以被任意一个组件访问。全局状态可包括属性，属性通常是指存储在页面全局范围内的数据字段，这些字段可以被页面中的任何组件访问和修改，这些属性可以包含页面的个各种状态信息，比如用户身份认证状态、主题设置、语言偏好、应用配置、数据缓存、共享业务数据、设备信息或者其他需要在整个页面中共享的数据。全局状态还可包括状态，状态是页面在某一时刻下的具体情况，通常反映了用户与页面的交互，例如一个在线购物网站页面的状态可包括购物车内容、用户的登陆状态、当前选择的商品等。全局状态还可包括更多的内容，比如行为，指的是用户的点击、输入等操作事件，比如持久化，全局状态可能包含需要持久保存的数据，例如用户的偏好设置、本地存储的缓存等，这里不一一举例说明。
14、上述实现方式，由于一个页面中的不同组件可能需要共享一些数据，使用全局状态可以避免将该数据层层传递，使得组件之间的通信更加简洁，确保数据的一致性和可维护性。同时，当页面发生变化时，由于全局状态发生变化，与全局状态关联的组件都可以得到通知进行重新渲染，使得差异渲染可以避免消耗大量的资源进行差异比对，降低资源开销，提高渲染流畅度。
15、在一可能的实现方式中，确定第一页面的组件列表以及渲染流程之后，页面渲染装置可以基于渲染流程确定响应组件中的父组件和子组件，建立多个组件之间的依赖关系。其中，依赖关系用于描述组件之间的渲染顺序。存在依赖关系的两个组件可以称为父组件和子组件，其中，父组件的渲染顺序早于子组件。
16、通常情况下，可基于组件之间的嵌套关系，确定组件之间的依赖关系，其中，存在依赖关系的两个组件中，子组件嵌套于父组件内部，父组件包含子组件，只有在父组件渲染之后，子组件才能进行渲染，二者之间的依赖关系为子组件依赖于父组件。应理解，如果组件之间存在多层嵌套关系，那么一个组件可以是子组件，也可以是父组件，理论上每个组件都拥有其对应的父组件，只有嵌套于最外层的父组件没有父组件，只有子组件，同理，每个组件都拥有其对应子组件，只有嵌套于最内层的子组件没有子组件，只有父组件。
17、具体实现中，可以根据组件之间的依赖关系，建立依赖关系树，将依赖关系通过树状结构的方式进行存储。依赖关系树包括多个层级，每个层级包括多个组件，每个层级的多个组件是上个层级中与其相连的多个组件的子组件，每个层级的多个组件是下一个层级中与其相连的多个组件的父组件，组件在渲染时，将会沿着依赖关系树从上往下渲染，直至渲染完毕。这样，在对多个组件进行渲染时，可以基于依赖关系树，确定多个组件中的父组件，通知父组件进行更新即可，页面渲染装置沿着依赖关系树从父组件开始向子组件的方向渲染，直至渲染完毕，而不需要一一通知多个组件，减少页面渲染装置的处理压力，避免重复渲染，提高渲染效率。
18、具体实现中，在基于依赖关系树确定多个组件中的父组件时，父组件的数量可以是在确保多个组件都可以被渲染的同时，最小的父组件的数量，从而获得需要通知的父组件。具体的，可以先筛选出多个组件中是其他组件的父组件的至少一个组件，然后从这至少一个组件中筛选是其他组件的父组件的至少一个组件，以此类推，直至不能再筛选为止，从而获得最小的父组件的数量，以及对应的父组件。简单来说，如果确定需要渲染的多个组件中，不存在跨层级的依赖关系，那么只需要通知这多个组件中的父组件即可；存在跨层级的依赖关系，那么需要确定这多个组件中处于依赖关系最上层的父组件，通知最上层的一个或者多个父组件即可。
19、上述实现方式，通过建立组件之间的依赖关系树，使得渲染过程中只需要通知父组件开始沿着依赖关系树渲染即可，从而减少页面渲染装置的处理压力，同时保证组件的渲染顺序不会出错。
20、第二方面，提供了一种页面渲染装置，该装置包括：获取单元，用于获取第一页面的更新请求，响应组件确定单元，用基于更新请求，确定第一页面中的多个响应式数据，每个响应式数据是第一页面中动态变化的数据，每个响应式数据对应第一页面中的一个或者多个组件，每个响应式数据用于描述对应组件的共有属性，响应组件确定单元，用于基于响应式数据和组件之间的映射关系，确定多个响应式数据对应的响应组件，渲染单元，用于对第一页面中的响应组件进行渲染更新，获得第二页面。
21、实施第二方面描述的装置，页面渲染装置在接收到第一页面的更新请求时，会先基于更新请求，确定第一页面的待更新的响应式数据，该响应式数据是第一页面中动态变化的数据，然后页面渲染装置基于响应式数据和组件之间的映射关系，确定待更新的响应式数据对应的响应组件，根据响应组件对第一页面进行渲染更新，获得第二页面，使得页面中的响应式数据更新时，使用响应式数据的组件会随之更新，从而达到差异渲染的目的，同时，本技术通过映射关系来确定使用响应式数据的组件的方式实现差异渲染，相比于创建虚拟对象与旧页面对比的方式实现差异渲染，本技术的方式更加高效、快捷，可以降低资源开销，提高渲染流畅度。
22、在一可能的实现方式中，第一页面的更新请求包括更新数据，装置包括差异组件确定单元，差异组件确定单元，用于基于更新请求中的更新数据，对全局状态进行更新，其中，全局状态包括第一页面中的多个组件共同使用的数据，全局状态中的数据与使用数据的组件之间存在映射关系，差异组件确定单元，用于基于数据与组件之间的映射关系，确定更新的全局状态对应的差异组件，响应组件确定单元，用于根据差异组件涉及的响应式数据，确定第一页面的待更新的响应式数据。
23、在一可能的实现方式中，装置包括渲染组件确定单元，渲染组件确定单元，用于基于依赖关系确定响应组件中的父组件和子组件，其中，子组件的渲染顺序晚于父组件，渲染组件确定单元，用于向响应组件中的父组件发送渲染指令，渲染指令用于指示响应组件中的父组件完成渲染之后，向父组件的子组件发送渲染指令。
24、在一可能的实现方式中，装置还包括收集单元，获取单元，用于获取第一页面的渲染请求，收集单元，用于对第一页面进行渲染，确定第一页面的组件列表以及渲染流程，收集单元，用于基于组件列表以及渲染流程，确定第一页面中每个组件涉及的响应式数据，建立响应式数据和组件之间的映射关系。
25、在一可能的实现方式中，收集单元，用于基于组件列表以及渲染流程对全局状态中的数据进行初始化，确定数据与组件之间的映射关系。
26、在一可能的实现方式中，收集单元，用于基于渲染流程确定响应组件中的父组件和子组件，建立多个组件之间的依赖关系。
27、在一可能的实现方式中，收集单元，用于根据第二页面的渲染流程，对响应式数据和组件之间的映射关系进行更新。
28、第三方面，提供了一种计算设备，该计算设备包括处理器和存储器，存储器用于存储指令，处理器用于执行指令，以使得计算设备实现如第一方面描述的方法。
29、第四方面，本技术提供一种包含指令的计算机程序产品，当指令被计算设备或者计算设备集群运行时，使得计算设备实现第一方面及第一方面任一种可能的实现方式所揭示的方法。
30、第五方面，本技术提供一种计算机可读存储介质，包括计算机程序指令，当计算机程序指令由计算设备或者计算设备集群执行时，使得计算设备执行第一方面及第一方面任一种可能的实现方式所揭示的方法。
31、本技术在上述各方面提供的实现方式的基础上，还可以进行进一步组合以提供更多实现方式。
1.一种页面渲染方法，其特征在于，所述方法包括：
2.根据权利要求1所述的方法，其特征在于，所述第一页面的更新请求包括更新数据，所述基于所述更新请求，确定所述第一页面的待更新的响应式数据包括：
3.根据权利要求1或2所述的方法，其特征在于，所述根据所述响应组件对所述第一页面进行渲染更新，获得第二页面包括：
4.根据权利要求1至3任一权利要求所述的方法，其特征在于，在页面渲染装置获取第一页面的更新请求之前，所述方法还包括：
5.根据权利要求4所述的方法，其特征在于，所述确定所述第一页面的组件列表以及渲染流程之后，所述方法还包括：
6.根据权利要求4或5所述的方法，其特征在于，所述确定所述第一页面的组件列表以及渲染流程之后，所述方法还包括：
7.根据权利要求1至6任一权利要求所述的方法，其特征在于，所述根据所述响应组件对所述第一页面进行渲染更新，获得第二页面之后，所述方法还包括：
8.一种页面渲染装置，其特征在于，所述装置包括：
9.根据权利要求8所述的装置，其特征在于，所述第一页面的更新请求包括更新数据，所述装置包括差异组件确定单元；
10.根据权利要求8或9所述的装置，其特征在于，所述装置包括渲染组件确定单元，
11.根据权利要求8至10任一权利要求所述的装置，其特征在于，所述装置还包括收集单元，
12.根据权利要求11所述的装置，其特征在于，所述收集单元，用于基于所述组件列表以及渲染流程对所述全局状态中的数据进行初始化，确定所述数据与组件之间的订阅关系。
13.根据权利要求11或12所述的装置，其特征在于，所述收集单元，用于基于所述渲染流程确定所述响应组件中的父组件和子组件，建立所述多个组件之间的依赖关系。
14.根据权利要求8至13任一权利要求所述的装置，其特征在于，所述收集单元，用于根据所述第二页面的渲染流程，对所述响应式数据和组件之间的映射关系进行更新。
15.一种计算设备，其特征在于，所述计算设备包括处理器和存储器，所述存储器用于存储指令，所述处理器用于执行所述指令，以使得所述计算设备实现如权利要求1至7任一权利要求所述的方法。
16.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有指令，所述指令被计算设备或者计算设备集群运行时实现如权利要求1至7任一权利要求所述的方法。
