网页渲染方法、装置、电子设备和计算机可读介质与流程

    技术2026-08-14  10


    本申请实施例涉及计算机,具体涉及网页渲染方法、装置、电子设备和计算机可读介质。


    背景技术:

    1、在网页设计中,通常会使用层叠样式表(cascading style sheets,css)对网页元素的样式进行设置。为支持复杂的网页设计,通常存在多个层叠样式表应用于同一网页的情况。然而,当多个层叠样式表共存时,可能会因为样式的重复定义导致渲染过程中存在同一个网页元素存在样式冲突的问题。

    2、现有技术中,可以通过网页开发者手动调整层叠样式表的加载顺序来减少渲染过程中网页元素样式冲突的情况,但这种方式效率较低,且容易出现错误,影响网页渲染效果。


    技术实现思路

    1、本申请实施例提出了网页渲染方法、装置、电子设备和计算机可读介质,以解决现有技术中无法高效、准确解决网页元素样式冲突的技术问题。

    2、第一方面,本申请实施例提供了一种网页渲染方法,该方法包括:在网页加载过程中,确定位于视窗内的网页元素,所述视窗为所述网页中用户能够看见的区域;基于位于所述视窗内的各网页元素的属性信息,从位于所述视窗内的网页元素中,选取目标网页元素;在所述网页的资源数据中包括多个层叠样式表的情况下,基于所述目标网页元素的标记,从所述多个层叠样式表中,选取第一目标层叠样式表,所述资源数据为构成所述网页的数据;基于所述第一目标层叠样式表,对所述视窗中的网页元素进行渲染。

    3、第二方面,本申请实施例提供了一种网页渲染装置,该装置包括:确定单元,用于在网页加载过程中,确定位于视窗内的网页元素,所述视窗为所述网页中用户能够看见的区域;第一选取单元,用于基于位于所述视窗内的各网页元素的属性信息,从位于所述视窗内的网页元素中,选取目标网页元素;第二选取单元,用于在所述网页的资源数据中包括多个层叠样式表的情况下,基于所述目标网页元素的标记,从所述多个层叠样式表中,选取第一目标层叠样式表,所述资源数据为构成所述网页的数据;渲染单元,用于基于所述第一目标层叠样式表,对所述视窗中的网页元素进行渲染。

    4、第三方面,本申请实施例提供了一种电子设备,包括:一个或多个处理器;存储装置,其上存储有一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如第一方面中任一实施例所描述的方法。

    5、第四方面,本申请实施例提供了一种计算机可读介质,其上存储有计算机程序,该程序被处理器执行时实现如第一方面中任一实施例所描述的方法。

    6、本申请实施例提供的网页渲染方法、装置、电子设备和计算机可读介质,通过在网页渲染过程中确定位于视窗内的网页元素,而后基于位于视窗内的各网页元素的属性信息,从位于视窗内的网页元素中选取目标网页元素,之后在网页的资源数据中包括多个层叠样式表的情况下,基于目标网页元素的标记,从多个层叠样式表中选取第一目标层叠样式表,从而基于第一目标层叠样式表,对视窗中的网页元素进行渲染。由此,能够基于实时确定的视窗中的目标网页元素自动选取第一目标层叠样式表进行加载,由于在网页滑动过程中网页的视窗实时变化,因此视窗中的目标网页元素也实时变化,基于目标网页元素能够动态实时调整第一目标层叠样式表,省去了用户手动调整层叠样式表的加载顺序的过程,提高了网页元素样式冲突的解决效率,且避免了因人为因素导致的错误,提升了网页渲染效果。



    技术特征:

    1.一种网页渲染方法,其特征在于,所述方法包括:

    2.根据权利要求1所述的方法,其特征在于,所述属性信息包括网页元素在所述视窗中所占的面积;所述基于位于所述视窗内的各网页元素的属性信息,从位于所述视窗内的网页元素中,选取目标网页元素,包括:

    3.根据权利要求1所述的方法,其特征在于,所述属性信息包括网页元素的类型;所述基于位于所述视窗内的各网页元素的属性信息,从位于所述视窗内的网页元素中,选取目标网页元素,包括:

    4.根据权利要求1所述的方法,其特征在于,所述属性信息包括网页元素在所述视窗中所占的面积和各网页元素的类型;所述基于位于所述视窗内的各网页元素的属性信息,从位于所述视窗内的网页元素中,选取目标网页元素,包括:

    5.根据权利要求1所述的方法,其特征在于,所述基于所述目标网页元素的标记,从所述多个层叠样式表中,选取第一目标层叠样式表,包括:

    6.根据权利要求5所述的方法,其特征在于,所述标记包括所述目标网页元素的名称和所述目标网页元素所属类的类名;所述基于所述目标网页元素的标记,确定所述多个层叠样式表中各层叠样式表的目标优先级,包括:

    7.根据权利要求6所述的方法,其特征在于,所述基于所述目标网页元素的标记,确定所述多个层叠样式表中各层叠样式表的目标优先级,包括:

    8.根据权利要求5所述的方法,其特征在于,所述从所述多个层叠样式表中选取目标优先级最高的层叠样式表,作为第一目标层叠样式表,包括:

    9.根据权利要求5所述的方法,其特征在于,所述方法还包括:

    10.根据权利要求1所述的方法,其特征在于,在所述基于所述第一目标层叠样式表,对所述视窗中的网页元素进行渲染之前,所述方法还包括:

    11.一种网页渲染装置,其特征在于,所述装置包括:

    12.一种电子设备,其特征在于,包括:

    13.一种计算机可读介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现如权利要求1-10中任一所述的方法。


    技术总结
    本申请实施例公开了网页渲染方法、装置、电子设备和计算机可读介质。该方法的实施例包括:在网页加载过程中,确定位于视窗内的网页元素,视窗为网页中用户能够看见的区域;基于位于视窗内的各网页元素的属性信息,从位于视窗内的网页元素中,选取目标网页元素;在网页的资源数据中包括多个层叠样式表的情况下,基于目标网页元素的标记,从多个层叠样式表中,选取第一目标层叠样式表,资源数据为构成网页的数据;基于第一目标层叠样式表,对视窗中的网页元素进行渲染。该实施方式能够方便快捷地解决网页渲染过程中网页元素样式冲突的问题,提高了网页渲染效果。

    技术研发人员:王翔宇
    受保护的技术使用者:北京奇艺世纪科技有限公司
    技术研发日:
    技术公布日:2024/10/24
    转载请注明原文地址:https://symbian.8miu.com/read-46867.html

    最新回复(0)