一种页面渲染方法、装置、设备及可读存储介质与流程

1.本技术涉及计算机技术领域，尤其涉及一种页面渲染方法、装置、设备及可读存储介质。


背景技术：

2.随着科学技术的发展，计算机和移动终端的软件技术和硬件技术都有了长足的进步。由于互联网技术的广泛应用，用户可以足不出户的情况下从网络上得到大量的信息，不但为用户的工作和学习提供了帮助，也丰富了用户的日常生活。如今，可以通过浏览器进行多用户之间的交互。
3.如今浏览器页面的布局越来越复杂，一个页面上往往包含了大量的信息，除了文字信息之外，还可能包含有图片、视频和其他多媒体信息。目前的页面渲染技术都是把页面上包含的所有元素和所有光标在一个画布中进行渲染，根据画布渲染的特性，移动光标需要重新渲染整个画布。对于包含内容较多的页面来说，一旦有一个光标发生移动，就需要将画布上包含的所有内容重新进行渲染，效率较低，会导致画布性能下降，也会对页面显示速度产生影响。页面渲染作为浏览器完成页面加载的其中一个重要步骤，如果渲染的效率低，会造成页面加载速度慢，影响用户浏览页面，因此，需要提供一种高性能的页面渲染方法。


技术实现要素：

4.有鉴于此，本技术的目的在于提供了一种页面渲染方法、装置、设备及可读存储介质，以避免光标渲染影响到画布页元素的渲染，提高在多画布页元素下渲染用户光标时画布的渲染性能，从而提高页面渲染效率，其具体技术方案如下：
5.第一方面，本技术提供了一种页面渲染方法，所述方法包括：
6.获取浏览器页面上的画布页元素；
7.在内屏画布上渲染所述画布页元素，并在所述内屏画布上检测当前用户光标的坐标；
8.将所述内屏画布上当前用户光标的坐标实时转换为外屏画布上当前用户光标的坐标；
9.根据所述外屏画布上当前用户光标的坐标，在所述外屏画布上渲染所述当前用户光标。
10.在一种可能的实现方式中，所述将内屏画布上当前用户光标的坐标实时转换为外屏画布上当前用户光标的坐标，包括：
11.在所述内屏画布上渲染所述当前用户光标所在的透明元素；
12.将所述当前用户光标所在的透明元素的坐标实时转换为所述外屏画布上当前用户光标的坐标。
13.在一种可能的实现方式中，在所述在外屏画布上渲染当前用户光标之后，所述方法还包括：
14.通过所述内屏画布获取其他用户光标的坐标；
15.将所述内屏画布上其他用户光标的坐标实时转换为所述外屏画布上其他用户光标的坐标；
16.根据所述外屏画布上其他用户光标的坐标，在所述外屏画布上渲染所述其他用户光标。
17.在一种可能的实现方式中，在所述在外屏画布上渲染其他用户光标之后，所述方法还包括：
18.获取所述其他用户光标对应的用户信息；
19.在所述当前用户光标的坐标与所述其他用户光标的坐标相同时，在所述外屏画布上渲染所述其他用户光标对应的用户信息。
20.第二方面，本技术还提供了一种页面渲染装置，所述装置包括：
21.获取模块，用于获取浏览器页面上的画布页元素；
22.内屏画布渲染模块，用于在内屏画布上渲染所述画布页元素；
23.检测模块，用于在所述内屏画布上检测当前用户光标的坐标；
24.坐标转换模块，用于将所述内屏画布上当前用户光标的坐标实时转换为外屏画布上当前用户光标的坐标；
25.外屏画布渲染模块，用于根据所述外屏画布上当前用户光标的坐标，在所述外屏画布上渲染所述当前用户光标。
26.在一种可能的实现方式中，所述坐标转换模块，具体用于：
27.在所述内屏画布上渲染所述当前用户光标所在的透明元素；
28.将所述当前用户光标所在的透明元素的坐标实时转换为所述外屏画布上当前用户光标的坐标。
29.在一种可能的实现方式中，
30.所述获取模块，还用于通过所述内屏画布获取其他用户光标的坐标；
31.所述坐标转换模块，还用于将所述内屏画布上其他用户光标的坐标实时转换为所述外屏画布上其他用户光标的坐标；
32.所述外屏画布渲染模块，还用于根据所述外屏画布上其他用户光标的坐标，在所述外屏画布上渲染所述其他用户光标。
33.在一种可能的实现方式中，
34.所述获取模块，还用于获取所述其他用户光标对应的用户信息；
35.所述外屏画布渲染模块，还用于在所述当前用户光标的坐标与所述其他用户光标的坐标相同时，在所述外屏画布上渲染所述其他用户光标对应的用户信息。
36.第三方面，本技术还提供了一种计算机设备，所述计算机设备包括：存储器、收发器、处理器以及总线系统；
37.其中，所述存储器用于存储程序；
38.所述处理器用于执行所述存储器中的程序，以实现上述第一方面任一项所述的方法；
39.所述总线系统用于连接所述存储器以及所述处理器，以使所述存储器以及所述处理器进行通信。
40.第四方面，本技术还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有指令，当其在计算机上运行时，使得计算机执行上述第一方面任一项所述的方法。
41.本技术实施例提供的方法，获取浏览器页面上的画布页元素；在内屏画布上渲染画布页元素，并在内屏画布上检测当前用户光标的坐标；将内屏画布上当前用户光标的坐标实时转换为外屏画布上当前用户光标的坐标；根据外屏画布上当前用户光标的坐标，在外屏画布上渲染当前用户光标。本技术实施例在内屏画布上渲染画布页元素，在外屏上渲染用户光标，通过分屏画布渲染的方式，避免光标渲染影响到画布页元素的渲染，提高在多画布页元素下渲染用户光标时画布的渲染性能，从而提高页面渲染效率。
附图说明
42.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
43.图1示出了本技术提供的一种页面渲染方法实施例的流程图；
44.图2示出了本技术提供的一种画布演示模式下当前用户光标和其他用户光标的示意图；
45.图3示出了本技术提供的一种画布演示模式下当前用户光标聚集到其他用户光标的示意图；
46.图4示出了本技术提供的一种页面渲染装置的结构示意图。
具体实施方式
47.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
48.首先，对本技术实施例中可能出现的一些名词进行解释。
49.画布canvas：一种浏览器页面元素。
50.画布页：可以上传设计图、并且移动或缩放的，基于canvas绘制的浏览器页面。
51.演示模式：开启入口位于画布页顶部工具栏，开启后进入非编辑模式，不可以移动画布设计图坐标、以及更改画布设计图名称等编辑操作，自动隐藏工具栏。
52.激光笔：进入演示模式后，开启激光笔，当前用户光标会以圆点的形式展示，其他进入演示模式的用户可以看到当前用户的鼠标移动轨迹，当前用户鼠标移动到其他用户的激光笔位置，可以查看其他用户的用户信息。
53.光标信息卡片：展示光标对应用户的用户信息，例如头像、用户名、邮箱等。
54.内屏canvas：浏览器页面元素具有层级关系，层级在下面的canvas成为内屏canvas。
55.外屏canvas：浏览器页面元素具有层级关系，层级在上面的canvas成为外屏canvas。
56.分层canvas渲染：包括内屏canvas渲染和外屏canvas渲染，内屏canvas用于渲染画布元素，外屏canvas用于渲染光标元素以及光标对应的卡片信息。
57.画布绝对位置：当前用户a光标在画布元素a之上，用户b看到用户a光标也在画布元素a上，则用户b画布渲染用户a光标的坐标成为画布上绝对坐标。
58.请参见图1，示出了本技术实施例提供的一种页面渲染方法实施例的流程图，本技术实施例至少包括以下步骤：
59.s110，获取浏览器页面上的画布页元素。
60.在本技术实施例中，获取浏览器页面上的画布页元素，即获取画布页上所有元素，以便在内屏canvas上渲染画布页元素。
61.s120，在内屏画布上渲染画布页元素，并在内屏画布上检测当前用户光标的坐标。
62.在本技术实施例中，获取浏览器页面上的画布页元素后，在内屏canvas上渲染画布页元素，并在内屏canvas上检测当前用户光标的坐标。
63.其中，可以绘制与浏览器页面的大小一致的内屏canvas，也可以基于用户视觉友好原则，绘制比浏览器页面大的内屏canvas，在此不作限制。
64.s130，将内屏画布上当前用户光标的坐标实时转换为外屏画布上当前用户光标的坐标。
65.在本技术实施例中，用户光标是以内屏canvas为参考，所以在渲染用户光标前，需要将内屏canvas上当前用户光标的坐标实时转换为外屏canvas上当前用户光标的坐标，使得其他用户看到当前用户光标，和当前用户光标的实际位置保持一致。
66.其中，将内屏画布上当前用户光标的坐标实时转换为外屏画布上当前用户光标的坐标的其中一种实现方式可以是：
67.s131，在内屏画布上渲染当前用户光标所在的透明元素；
68.s132，将当前用户光标所在的透明元素的坐标实时转换为外屏画布上当前用户光标的坐标。
69.本技术实施例在光标坐标更新方面，通过在内屏canvas渲染鼠标所在光标的一个透明元素，根据此透明元素的坐标转换为光标渲染所在的外屏canvas上的坐标，从而实现用户光标在画布绝对位置上保持一致。
70.s140，根据外屏画布上当前用户光标的坐标，在外屏画布上渲染当前用户光标。
71.在本技术实施例中，根据外屏canvas上当前用户光标的坐标，在外屏canvas上渲染当前用户光标。因为光标具有实时移动性高、渲染频率高的特性，容易造成渲染性能降低，本技术实施例在内屏canvas上渲染画布页元素，在外屏canvas上渲染用户光标，可以在不影响内屏canvas渲染性能的情况下，渲染用户光标，提高页面渲染效率。
72.其中，因为用户能看到的视野只有浏览器页面大小，所以绘制浏览器页面以外的外屏canvas对于用户而言没有意义，且容易造成性能耗费，可以想到的是，外屏canvas越大，在其上渲染元素时耗费性能越大。因此，本技术实施例绘制与浏览器页面的大小一致的外屏canvas。
73.本技术实施例除了能够渲染当前用户光标，还能渲染其他用户光标。本技术实施例还包括以下步骤：
74.s150，通过内屏画布获取其他用户光标的坐标。
75.在本技术实施例中，通过内屏画布获取其他用户光标的坐标，通过禁用外屏canvas的事件绑定属性，实现用户光标视觉一致性，让不同的用户光标的坐标使用同一参考物，避免用户光标显示不一致的问题。
76.画布canvas属于浏览器页面元素，具有事件绑定属性，鉴于外屏canvas只完成光标的渲染，不处理鼠标移动事件，则禁止外屏canvas的事件绑定属性，只让内屏canvas处理鼠标移动事件。
77.s160，将内屏画布上其他用户光标的坐标实时转换为外屏画布上其他用户光标的坐标。
78.在本技术实施例中，由于用户光标是以内屏canvas为参考，所以在渲染用户光标前，需要将内屏canvas上其他用户光标的坐标实时转换为外屏canvas上其他用户光标的坐标，使得当前用户看到其他用户光标，和其他用户光标的实际位置保持一致。
79.其中，将内屏画布上其他用户光标的坐标实时转换为外屏画布上其他用户光标的坐标的其中一种实现方式可以是：
80.s161，在内屏画布上渲染其他用户光标所在的透明元素；
81.s162，将其他用户光标所在的透明元素的坐标实时转换为外屏画布上其他用户光标的坐标。
82.本技术实施例在光标坐标更新方面，通过在内屏canvas渲染鼠标所在光标的一个透明元素，根据此透明元素的坐标转换为光标渲染所在的外屏canvas上的坐标，从而实现多个用户光标在画布绝对位置上保持一致。
83.s170，根据外屏画布上其他用户光标的坐标，在外屏画布上渲染其他用户光标。
84.在本技术实施例中，根据外屏canvas上其他用户光标的坐标，在外屏canvas上渲染其他用户光标。因为光标具有实时移动性高、渲染频率高的特性，容易造成渲染性能降低，本技术实施例在内屏canvas上渲染画布页元素，在外屏canvas上渲染用户光标，可以在不影响内屏canvas渲染性能的情况下，渲染用户光标，提高页面渲染效率。
85.本技术实施例能够实现多用户在同一个画布页进行光标移动时，渲染当前用户的光标，还能同时渲染其他用户的光标，达到高性能渲染多用户光标的目的。
86.s180，获取其他用户光标对应的用户信息。
87.s190，在当前用户光标的坐标与其他用户光标的坐标相同时，在外屏画布上渲染其他用户光标对应的用户信息。
88.在本技术实施例中，通过内屏canvas不仅获取其他用户光标的坐标，还获取其他用户光标对应的用户信息，在当前用户光标的坐标与其他用户光标的坐标一致时，在外屏canvas上渲染其他用户坐标对应的用户信息。本技术实施例默认不展示其他用户光标对应的用户信息，只有在当前用户光标聚焦到其他用户光标的时候，即在当前用户光标的坐标与其他用户光标的坐标相同时，才展示带有用户信息的光标信息卡片。
89.通过本技术实施例，在不影响内屏画布渲染性能的情况下，渲染多个用户光标，还可以在其他用户光标上丰富光标卡信息片，展示更多其他用户的用户信息。
90.在本技术实施例中，获取浏览器页面上的画布页元素；在内屏画布上渲染画布页元素，并在内屏画布上检测当前用户光标的坐标；将内屏画布上当前用户光标的坐标实时转换为外屏画布上当前用户光标的坐标；根据外屏画布上当前用户光标的坐标，在外屏画
布上渲染当前用户光标。本技术实施例在内屏画布上渲染画布页元素，在外屏上渲染用户光标，通过分屏画布渲染的方式，避免光标渲染影响到画布页元素的渲染，提高在多画布页元素下渲染用户光标时画布的渲染性能，从而提高页面渲染效率。
91.接下来介绍本技术提供的一种页面渲染方法的应用实施例，以蓝湖画布光标展示为例，主要是在画布演示模式下，其他用户光标展示和用户信息卡片展示，方便其他用户定位当前用户光标的位置，方便其他用户查看当前用户的用户信息，方便当前用户定位其他用户光标的位置，也方便当前用户查看其他用户的用户信息。本技术实施例提供的一种页面渲染方法，对画布非高频渲染、高频渲染的场景都具有适用性。
92.当前用户进入画布页、开启演示模式并开启激光笔，其他用户也遵循以上操作，并且当前用户和其他用户的用户光标都聚焦在画布上。图2为正常状态下当前用户光标圆点和其他用户光标圆点的展示；如图3所示，当前用户光标聚焦到其他用户光标圆点上，可以查看光标所属用户的用户信息，用户信息包括头像、用户名和邮箱。
93.接下来对本技术提供的一种页面渲染装置进行介绍，下文介绍的一种页面渲染装置与上文介绍的一种页面渲染方法可相互对应参照。
94.请参见图4，示出了本技术提供的一种页面渲染装置的结构示意图，所述装置包括：
95.获取模块401，用于获取浏览器页面上的画布页元素；
96.内屏画布渲染模块402，用于在内屏画布上渲染所述画布页元素；
97.检测模块403，用于在所述内屏画布上检测当前用户光标的坐标；
98.坐标转换模块404，用于将所述内屏画布上当前用户光标的坐标实时转换为外屏画布上当前用户光标的坐标；
99.外屏画布渲染模块405，用于根据所述外屏画布上当前用户光标的坐标，在所述外屏画布上渲染所述当前用户光标。
100.在本技术实施例中，所述坐标转换模块404，具体用于：
101.在所述内屏画布上渲染所述当前用户光标所在的透明元素；
102.将所述当前用户光标所在的透明元素的坐标实时转换为所述外屏画布上当前用户光标的坐标。
103.在本技术实施例中，所述获取模块401，还用于通过所述内屏画布获取其他用户光标的坐标；
104.所述坐标转换模块404，还用于将所述内屏画布上其他用户光标的坐标实时转换为所述外屏画布上其他用户光标的坐标；
105.所述外屏画布渲染模块405，还用于根据所述外屏画布上其他用户光标的坐标，在所述外屏画布上渲染所述其他用户光标。
106.在本技术实施例中，所述获取模块401，还用于获取所述其他用户光标对应的用户信息；
107.所述外屏画布渲染模块405，还用于在所述当前用户光标的坐标与所述其他用户光标的坐标相同时，在所述外屏画布上渲染所述其他用户光标对应的用户信息。
108.本技术实施例还提供了一种计算机设备，包括：存储器、处理器以及总线系统；
109.其中，所述存储器用于存储程序；
110.所述处理器用于执行所述存储器中的程序，以实现上述所述的一种页面渲染方法；
111.所述总线系统用于连接所述存储器以及所述处理器，以使所述存储器以及所述处理器进行通信。
112.本技术实施例还提供了一种计算机可读存储介质，存储有指令，当其在计算机上运行时，使得计算机执行如上述所述的一种页面渲染方法。
113.在本技术实施例中，获取浏览器页面上的画布页元素；在内屏画布上渲染画布页元素，并在内屏画布上检测当前用户光标的坐标；将内屏画布上当前用户光标的坐标实时转换为外屏画布上当前用户光标的坐标；根据外屏画布上当前用户光标的坐标，在外屏画布上渲染当前用户光标。本技术实施例在内屏画布上渲染画布页元素，在外屏上渲染用户光标，通过分屏画布渲染的方式，避免光标渲染影响到画布页元素的渲染，提高在多画布页元素下渲染用户光标时画布的渲染性能，从而提高页面渲染效率。
114.需要说明的是，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例、系统类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
115.对于前述的各实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本技术并不受所描述的动作顺序的限制，因为依据本技术，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本技术所必须的。
116.最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
117.对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本技术。对这些实施例的多种修改对本领域技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本技术的精神或范围的情况下，在其它实施例中实现。因此，本技术将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
118.以上所述仅是本技术的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本技术原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本技术的保护范围。