1.本公开涉及计算机技术领域，特别涉及一种网页图标的加载方法、网页图标的加载装置、计算机存储介质及电子设备。
背景技术：2.网页图标是在网页上使用的图标，例如，在开发一个网站时，该网站的页面上经常需要使用到各种各样的图标，图标可以用作页面功能标识，比如点击切换图标、下载图标等。
3.目前，一般都是使用jpg(一般指jpeg格式，joint photographic experts group，联合图像专家组)或png(可移植网络图形格式)格式的图片制作图标，然而，上述方案需至少一份样式文件和全部图标的实体文件，若图标过多会使得每次加载页面时产生大量的http(hyper text transfer protocol，超文本传输协议)请求，影响图标的加载速度。
4.鉴于此，本领域亟需开发一种新的网页图标的加载方法及装置。
5.需要说明的是，上述背景技术部分公开的信息仅用于加强对本公开的背景的理解。
技术实现要素：6.本公开的目的在于提供一种网页图标的加载方法、网页图标的加载装置、计算机存储介质及电子设备，进而至少在一定程度上克服由于相关技术的限制而导致的无法快速加载大批量图标的技术问题。
7.本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。
8.根据本公开的第一方面，提供一种网页图标的加载方法，包括：一种网页图标的加载方法，其特征在于，包括：根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型；所述网页图标的类型包括单色图标和多色图标；当所述网页图标为单色图标时，利用第一渲染规则生成所述单色图标的渲染样式；当所述网页图标为多色图标时，利用第二渲染规则生成所述多色图标的渲染样式；所述第二渲染规则不同于所述第一渲染规则；根据所述多个网页图标的渲染样式生成样式文件，以根据所述样式文件加载每个所述网页图标。
9.在本公开的示例性实施例中，在根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型之前，所述方法还包括：对所述多个网页图标中的单色图标进行去色处理；将每个所述网页图标调整为目标尺寸；将每个所述目标尺寸的网页图标转换为svg格式文件，并将所述svg格式文件存储至预先创建的目标文件夹中。
10.在本公开的示例性实施例中，所述多个网页图标的描述代码通过以下方式获取：对所述目标文件夹中存储的多个svg格式文件进行解析，以获取到所述多个网页图标的描述代码。
11.在本公开的示例性实施例中，所述根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型，包括：利用正则表达式从所述描述代码中匹配所述网页图标的颜色信息；根据所述网页图标的颜色信息，确定所述网页图标的类型。
12.在本公开的示例性实施例中，所述网页图标的颜色信息包括所述网页图标的多个像素点所对应的多个颜色值；所述根据所述颜色信息，确定所述网页图标的类型，包括：从所述多个颜色值中选取参考颜色值，比对剩余颜色值是否与所述参考颜色值相同；所述剩余颜色值为所述多个颜色值中除所述参考颜色值之外的颜色值；若所述剩余颜色值与所述参考颜色值相同，确定所述网页图标为单色图标；若所述剩余颜色值与所述参考颜色值不相同，确定所述网页图标为多色图标。
13.在本公开的示例性实施例中，在获取到多个网页图标的描述代码之后，所述方法还包括：对每个网页图标对应的描述代码进行压缩处理；对压缩处理后的描述代码进行base64编码，得到base64文件。
14.在本公开的示例性实施例中，所述利用第一渲染规则生成所述单色图标的渲染样式，包括：将所述单色图标的背景颜色设置为父标签的文本颜色；所述父标签为所述单色图标所对应标签的上一级标签；根据所述单色图标对应的base64文件，生成所述单色图标的遮罩图片；将所述遮罩图片的显示属性设置为不重复；将所述遮罩图片的位置属性设置为居中；将所述遮罩图片的尺寸属性设置为根据所述父标签的尺寸进行缩放。
15.在本公开的示例性实施例中，所述利用第二渲染规则生成所述多色图标的渲染样式，包括：根据所述多色图标对应的base64文件，生成背景图片；将所述多色图标的背景颜色设置为透明色；将所述多色图标的显示属性设置为不重复；将所述多色图标的位置属性设置为居中；将所述多色图标的尺寸属性设置为跟随父标签进行缩放；所述父标签为所述多色图标所对应标签的上一级标签。
16.在本公开的示例性实施例中，所述根据所述多个网页图标的渲染样式生成样式文件，包括：对每个所述网页图标的渲染样式进行拼接，得到拼接样式；根据所述多个网页图标对应的多个拼接样式，生成所述样式文件。
17.在本公开的示例性实施例中，所述根据所述样式文件加载每个网页图标，包括：根据获取到的网页图标的名称，从所述样式文件中查询所述网页图标对应的拼接样式；根据所述拼接样式，加载所述网页图标。
18.在本公开的示例性实施例中，在生成样式文件之后，所述方法还包括：构建所述样式文件对应的抽象语法树；响应于图标变更操作，根据所述图标变更操作更新所述抽象语法树；所述图标变更操作包括以下任一：新增图标、删除图标或改动图标；根据更新后的抽象语法树生成新的样式文件，以根据所述新的样式文件加载每个网页图标。
19.根据本公开的第二方面，提供一种网页图标的加载装置，包括：类型识别模块，用于根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型；所述网页图标的类型包括单色图标和多色图标；第一渲染模块，用于当所述网页图标为单色图标时，利用第一渲染规则生成所述单色图标的渲染样式；第二渲染模块，用于当所述网页图标为多色图标时，利用第二渲染规则生成所述多色图标的渲染样式；所述第二渲染规则不同于所述第一渲染规则；图标加载模块，用于根据所述多个网页图标的渲染样式生成样式文件，以根据所述样式文件加载每个所述网页图标。
20.根据本公开的第三方面，提供一种计算机存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面所述的网页图标的加载方法。
21.根据本公开的第四方面，提供一种电子设备，包括：处理器；以及存储器，用于存储所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行上述第一方面所述的网页图标的加载方法。
22.由上述技术方案可知，本公开示例性实施例中的网页图标的加载方法、网页图标的加载装置、计算机存储介质及电子设备至少具备以下优点和积极效果：
23.在本公开的一些实施例所提供的技术方案中，一方面，当根据网页图标的描述代码确定出网页图标为单色图标时，利用第一渲染规则生成单色图标的渲染样式，而当网页图标为多色图标时，利用不同于第一渲染规则的第二渲染规则生成多色图标的渲染样式，使得渲染后的单色图标和多色图标分别对应不同的渲染样式，相比相关技术中直接将所有图标当作字体(字体只能拥有单一颜色)来处理导致单色图标和多色图标均变为单色图标的方式而言，本公开使得单色图标和多色图标能够共存，满足了不同应用场景下对图标的显示需求。另一方面，根据多个网页图标的渲染样式生成样式文件，以根据样式文件加载每个网页图标，能够解决相关技术中需要发起多次请求才能获取到每个网页图标的相关样式文件的技术问题，减少由于多次请求所带来的带宽损耗，实现快速加载大批量的图标。
24.本公开应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
25.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
26.图1示出本公开实施例中网页图标的加载方法的流程示意图；
27.图2示出本公开实施例中根据获取到的网页图标的描述代码，确定网页图标的类型的流程示意图；
28.图3示出本公开实施例中利用第一渲染规则生成单色图标的渲染样式的流程示意图；
29.图4示出本公开实施例中利用第二渲染规则生成多色图标的渲染样式的流程示意图；
30.图5示出本公开实施例中根据样式文件加载每个网页图标的流程示意图；
31.图6示出本公开实施例中如何更新样式文件的流程示意图；
32.图7示出本公开示例性实施例中网页图标的加载装置的结构示意图；
33.图8示出本公开示例性实施例中电子设备的结构示意图。
具体实施方式
34.现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加
全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知技术方案以避免喧宾夺主而使得本公开的各方面变得模糊。
35.本说明书中使用用语“一个”、“一”、“该”和“所述”用以表示存在一个或多个要素/组成部分/等；用语“包括”和“具有”用以表示开放式的包括在内的意思并且是指除了列出的要素/组成部分/等之外还可存在另外的要素/组成部分/等；用语“第一”和“第二”等仅作为标记使用，不是对其对象的数量限制。
36.此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。
37.一个稍微成型的网站通常都会有一套属于自己的图标系统，图标作为丰富网页视觉的元素，与文本或按钮相结合可增强网页的互动性与可读性。
38.相关图标系统一般是采用jpg或png格式的图片制作而成，或者，使用css的font-family属性引入字体文件并结合content属性将图标当作字体使用。
39.然而，采用jpg或png格式的图标存在以下缺陷：
40.第一，jpg或png压缩后虽然可以提高图标的加载速度，但可能会使图标变得模糊不清或产生锯齿效果；
41.第二，无法对图标自由着色，限制图标在不同场景下的使用，若要使用其他颜色只能另外制作，降低了图标的灵活性与可扩性；
42.第三，图标系统的构成需至少一份样式文件和全部图标的实体文件，若图标过多会使得每次加载页面时产生大量的http请求，浪费网络带宽；
43.第四，因css背景属性的限制而无法对图标设置尺寸，降低了图标的灵活性与可扩性。
44.将图标当作字体使用的方案存在以下缺陷：
45.第一，由于浏览器兼容问题，需准备4份字体文件(ttf/svg/eot/woff格式)，需设计师或开发者提前将图标的矢量文件转换为字体文件，增加了额外的工作开销；
46.第二，转换后的字体文件的体积通常会比原来的矢量文件大很多，不仅增加了图标体积还使网页加载图标资源的速度变慢；
47.第三，众所周知在设置字体时只能使用单一颜色，图标变成字体后也只能使用单一颜色，单色与多色无法共存，使得图标在某些场景下无法使用，因而只能另外制作多色的图片代替；
48.第四，新增图标时只能重新合并图标的矢量文件再转换成字体文件，整体过程复杂繁琐，不利于那些更新频率较高的网站迭代。
49.在本公开的实施例中，首先提供了一种网页图标的加载方法，至少在一定程度上克服相关技术中无法快速加载大批量图标的缺陷。
50.图1示出本公开实施例中网页图标的加载方法的流程示意图，该网页图标的加载
方法的执行主体可以是加载网页图标的服务器。
51.参考图1，根据本公开的一个实施例的网页图标的加载方法包括以下步骤：
52.步骤s110，根据获取到的多个网页图标的描述代码，确定每个网页图标的类型；网页图标的类型包括单色图标和多色图标；
53.步骤s120，当网页图标为单色图标时，利用第一渲染规则生成单色图标的渲染样式；
54.步骤s130，当网页图标为多色图标时，利用第二渲染规则生成多色图标的渲染样式；第二渲染规则不同于第一渲染规则；
55.步骤s140，根据多个网页图标的渲染样式生成样式文件，以根据样式文件加载每个网页图标。
56.在图1所示实施例所提供的技术方案中，一方面，当根据网页图标的描述代码确定出网页图标为单色图标时，利用第一渲染规则生成单色图标的渲染样式，而当网页图标为多色图标时，利用不同于第一渲染规则的第二渲染规则生成多色图标的渲染样式，使得渲染后的单色图标和多色图标分别对应不同的渲染样式，相比相关技术中直接将所有图标当作字体(字体只能拥有单一颜色)来处理导致单色图标和多色图标均变为单色图标的方式而言，本公开使得单色图标和多色图标能够共存，满足了不同应用场景下对图标的显示需求。另一方面，根据多个网页图标的渲染样式生成样式文件，以根据样式文件加载每个网页图标，能够解决相关技术中需要发起多次请求才能获取到每个网页图标的相关样式文件的技术问题，减少由于多次请求所带来的带宽损耗，实现快速加载大批量的图标。
57.以下对图1中的各个步骤的具体实现过程进行详细阐述：
58.在步骤s110之前，需要说明的是，可以从图标库中获取预先设计好的多个网页图标(多个网页图标可以包括单色图标和多色图标)，进而，对上述多个网页图标进行以下处理：
59.针对上述多个网页图标中的单色图标，可以对其进行去色处理，或者，将其颜色均更改为白色，进而，将网页图标调整为目标尺寸(例如：48*48，可根据实际情况自行设定，本公开对此不作特殊限定)，进一步的，可以将上述目标尺寸的网页图标转换为svg格式文件，并将上述svg格式文件存储至预先创建的目标文件夹中。
60.通过将单色图标的颜色均改为白色，便于后续对其进行颜色渲染，以根据需要将单色图标渲染为不同的颜色。
61.通过将网页图标转换为svg格式文件，相比jpg和png等格式而言，该格式的文件占用的数据量较小，因而下载速度较快，另外，svg格式文件还能够实现在图标放大或改变尺寸的情况下不会影响其显示质量。
62.针对上述多个网页图标中的多色图标，无需更改其颜色，可以直接将网页图标调整为目标尺寸(例如：48*48，可根据实际情况自行设定，本公开对此不作特殊限定)，进一步的，可以将上述目标尺寸的网页图标转换为svg格式文件，并将上述svg格式文件存储至预先创建的目标文件夹中。
63.需要说明的是，svg是一种图形文件格式，它的英文全称为scalable vector graphics，意思为可缩放的矢量图形。svg使用xml格式定义图形。它是基于xml(extensible markup language，可扩展标记语言)，由world wide web consortium(w3c)联盟进行开发
的。严格来说应该是一种开放标准的矢量图形语言，可用于设计高分辨率的web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到html(hypertext mark-up language，超文本标记语言)中通过浏览器来观看。
64.进而，可以基于nodejs中fs模块的readdirsync函数遍历上述目标文件夹，以获取到每个网页图标对应的svg格式文件，进而，可以利用图像编辑器对上述svg格式文件进行解析，以获取到网页图标的xml描述代码。
65.在获取到每个网页图标对应的xml描述代码之后，可以对上述xml描述代码进行压缩处理，具体的，可以对xml描述代码中包含的缩进符号和换行符号去除，以对其进行压缩处理，从而，可以在后续将图标转换为base64文件时减小文件的体积。
66.在对xml描述代码进行压缩处理之后，可以利用nodejs的svg64模块对xml描述代码进行base64编码，得到base64文件。将xml描述代码转换为base64文件的理由如下：
67.第一，base64格式转换后的体积与原格式出入不大，高度保留了原图标的显示状态。再加上原格式是svg，svg具备矢量图的高质量特性，放大缩小都不会影响图片质量，因此将svg格式转换成base64格式可保障图片质量不会受到更多破坏。
68.第二，base64格式兼容性特别好，在新旧浏览器下都能得到硬件上的支持，保障图标在不同终端下显示的兼容性。另外其在不同场景下压缩都属于一个无损状态，大大保障图像质量。
69.第三，base64格式以文本形式存在，可随时附加到不同类型文件里跟随文件被程序解析直接生成图片，可移植性特别强。由于已移植到文件内，因此在渲染图片时无需发起http请求，可以大大减轻浏览器的带宽请求次数。
70.在将xml描述代码装换为base64格式文件之后，可以执行以下步骤s110：
71.在步骤s110中，根据获取到的多个网页图标的描述代码，确定每个网页图标的类型。
72.本步骤中，网页图标的类型包括单色图标和多色图标。单色图标即仅包含一种颜色的图标，而多色图标即包含两种或两种以上颜色的图标。
73.可以参考图2，图2示出本公开实施例中根据获取到的网页图标的描述代码，确定网页图标的类型的流程示意图，包含步骤s201-步骤s202：
74.在步骤s201中，利用正则表达式从描述代码中匹配网页图标的颜色信息。
75.本步骤中，鉴于描述代码中预先使用了十六进制来表示颜色信息，例如：#ffffff表示白色，#000000表示黑色，从而，可以利用十六进制的正则表达式(^#([0-9a-fa-f]{6}|[0-9a-fa-f]{3})$)从上述描述代码中匹配到网页图标的颜色信息。
[0076]
进而，可以根据所有的颜色信息生成一颜色数组，该颜色数组中包含多个颜色值。示例性的，某单色图标对应的颜色数组可以表示为[#ffffff，#ffffff，#ffffff，
……
，#ffffff]，某多色图标对应的颜色数组可以表示为[#ff6666，#0000ff，#ffffff，
……
，#0000ff]。
[0077]
其中，上述十六进制的正则表达式是指字符串以“#”符号开头，后跟一个从“a”到“f”，“a”到“z”的字母或从“0”到“9”的数字(正好是6或3)长度，$用于匹配一行的结尾，此正则表达式用于检查十六进制web颜色代码。
[0078]
在步骤s202中，根据颜色信息，确定网页图标的类型。
[0079]
本步骤中，在获取到网页图标的颜色信息之后，可以根据上述颜色数组，确定网页图标的类型。具体的，可以从上述颜色数组中选取一参考颜色值，以参考颜色值为颜色数组中的第一个颜色值为例进行说明，则可以将其他颜色值依次与上述第一个颜色值进行比对，若其他颜色值均与上述第一个颜色值相同，则可以确定上述网页图标的类型为单色图标，若其他颜色值中存在任一颜色值与上述第一个颜色值不同，可以确定上述网页图标的类型为多色图标。
[0080]
需要说明的是，上述参考颜色值可以是颜色数组中的第一个颜色值，也可以是颜色数组中的任意一个颜色值，可以根据实际情况自行设定，本公开对此不作特殊限定。
[0081]
当步骤s202中确定出的网页图标的类型为单色图标时，可以执行以下步骤s120。
[0082]
在步骤s120中，当网页图标的类型为单色图标时，利用第一渲染规则生成单色图标的渲染样式。
[0083]
本步骤中，若确定出网页图标为单色图标，则可以利用第一渲染规则生成单色图标的渲染样式。鉴于单色图标的颜色后续可能需要根据用户需求等进行变更，因此若直接使用css(cascading style sheets的缩写，主要用于设置网站外观，让我们的网站更加绚丽，引人注目)的background属性(用于渲染浏览器元素的背景层，一次性集中定义各种背景属性)对其进行渲染的话，会导致图标颜色固定，后续无法发生变更的问题，因此，在本公开中，可以使用mask属性对该单色图标的遮罩轮廓进行渲染，以便后续可以通过更改该遮罩轮廓的颜色属性实现对该单色图标的颜色变更。而mask属性中包含了对背景颜色的渲染，从而，上述第一渲染规则中的渲染样式可以包括单色图标的背景颜色，单色图标的遮罩图片、遮罩图片的显示属性、位置属性、尺寸属性等，可以根据实际情况自行设定，本公开对此不作特殊限定。
[0084]
在css中，mask属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。css遮罩属性是运用css3的最新属性mask-image，以为动态页面提供基于像素级别的遮罩层，进而也能进行透明度的控制。
[0085]
具体的，可以参考图3，图3示出本公开实施例中利用第一渲染规则生成单色图标的渲染样式的流程示意图，包含步骤s301-步骤s304：
[0086]
在步骤s301中，将单色图标的背景颜色设置为父标签的文本颜色。
[0087]
本步骤中，可以根据第一渲染规则中的“background-color:currentcolor”将单色图标的背景颜色设置为其父标签的文本颜色。
[0088]
background-color这个属性是为盒子添加背景颜色，可以是rgb值，也可以是16进制颜色值或颜色英文单词，可以根据实际情况自行设定，本公开对此不作特殊限定。
[0089]
其中，上述父标签是单色图标所对应的标签的上一级标签。具体而言，在html中，标签用来在网页中嵌入一幅图像(例如：背景图片、图标等)。从技术上讲，图像并不是插入到网页中，而是链接到网页中，标签的作用是为被引用的图像创建占位符。只要是有图片的地方，源代码中基本都有标签(除一些背景图片以外)。css在处理网页时，会认为每个标签都包含在一个不可见的盒子中，把每个标签看做一个盒子，那么定义布局实质上就是将每个盒子摆放到网页中相应的位置上。以标签内容为“《div》《i》《/i》《/div》”举例而言，则当单色图标对应的标签为i标签时，其父标签为div标签，《div》标签是一个块级纯净标签，可
以包含任何标签，它是可用于组合其他html元素的容器。
[0090]
在步骤s302中，根据单色图标对应的base64文件，生成单色图标的遮罩图片。
[0091]
本步骤中，可以根据第一渲染规则中的“mask-image:url(“data:image/svg+xml；base64,xxxx”)”获取单色图标对应的base64文件，并根据该base64文件生成单色图标的遮罩图片。同时，鉴于base64文件类似于字符串格式，因此，本方案无需发起http请求便可获取到每个图标文件，大大减轻请求所带来的带宽损耗。
[0092]
mask-image指遮罩使用的图片资源，默认值是none，也就是无遮罩图片，因此，和border属性中的border-style属性类似，是一个想要有效果就必须设定的属性值。mask-image遮罩所支持的图片类型非常的广泛，可以是url()静态图片资源，格式包括jpg，png以及svg等都是支持的；也可以是动态生成的图片，例如使用各种css3渐变绘制的图片。语法上支持css3各类渐变，以及url()功能符，image()功能符，甚至element()功能符，同时还支持多背景，可以根据实际情况自行设定，本公开对此不作特殊限定。
[0093]
在步骤s303中，将遮罩图片的显示属性设置为不重复。
[0094]
本步骤中，可以根据第一渲染规则中的“mask-repeat：no-repeat”属性将遮罩图片的显示属性(即背景重复次数)设置为不重复。mask-repeat属性设置是否及如何遮罩图片。no-repeat表示不重复遮罩图片。
[0095]
在步骤s304中，将遮罩图片的位置属性设置为居中。
[0096]
本步骤中，可以根据第一渲染规则中的“mask-position：center”将遮罩图片的位置属性设置为居中。mask-position属性设置遮罩图像的初始位置。center表示位置居中。
[0097]
在步骤s305中，将遮罩图片的尺寸属性设置为根据父标签的尺寸进行缩放。
[0098]
本步骤中，可以利用第一渲染规则中的“mask-size：cover”将遮罩图片的尺寸属性设置为跟随上述父标签的尺寸进行缩放。
[0099]
示例性的，上述父标签的尺寸(font-size)为预先设置的值，示例性的，其宽度width可以是1em，高度height可以是1em。em单位名称为相对长度单位，其相对于当前对象内文本的字体尺寸，如当前对象内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em的值并不是固定的，em会继承父级元素的字体大小。
[0100]
本公开中通过使用em单位来定义图标的尺寸，能够将图标模拟出字体的属性，使得图标可以根据其父元素所定的font-size字体尺寸自行调节，以达到自适应的效果。
[0101]
需要说明的是，考虑到不同浏览器的兼容性，可以在编程过程中在所有的mask属性前上
“‑
webkit”前缀，以尺寸属性为例而言，则可以将其代码编写为
“‑
webkit-mask-size：cover”，以使得高版本浏览器和低版本浏览器均能识别上述渲染样式。
[0102]
当步骤s202中确定出的网页图标的类型为多色图标时，可以执行以下步骤s130。
[0103]
在步骤s130中，当网页图标为多色图标时，利用第二渲染规则生成多色图标的渲染样式。
[0104]
本步骤中，若确定出网页图标为多色图标，则可以利用第二渲染规则生成多色图标的渲染样式。鉴于多色图标不涉及后续更改其颜色的问题，因此，可以直接使用css的background属性渲染图标，从而，上述渲染样式可以包括多色图标的背景颜色、显示属性、位置属性和尺寸属性。
[0105]
参考图4，图4示出本公开实施例中利用第二渲染规则生成多色图标的渲染样式的
流程示意图，包含步骤s401-步骤s404：
[0106]
在步骤s401中，根据多色图标对应的base64文件，生成背景图片。
[0107]
本步骤中，可以根据第二渲染规则中的“background-image:url(“data:image/svg+xml；base64,xxxx”)”多色图标对应的base64文件，生成背景图片。
[0108]
background-image这个属性是为盒子添加背景图片，可以直接使用图片链接地址url，可以是外链，可以是相对路径，可以是绝对路径。xxxx即为上述背景图片的具体链接地址。
[0109]
在步骤s402中，将多色图标的背景颜色设置为透明色。
[0110]
本步骤中，可以根据第二渲染规则中的“background-color：transparent”将多色图标的背景颜色设置为透明色。transparent表示透明色。
[0111]
在步骤s403中，将多色图标的显示属性设置为不重复。
[0112]
本步骤中，可以根据第二渲染规则中的“background-repeat：no-repeat”将多色图标的显示属性设置为不重复。
[0113]
background-repeat属性设置是否及如何重复背景图像。no-repeat表示不重复背景图片。
[0114]
在步骤s404中，将多色图标的位置属性设置为居中。
[0115]
本步骤中，可以根据第二渲染规则中的“background-position：center”将多色图标的位置属性设置为居中。
[0116]
background-position属性设置背景图像的初始位置。这个属性设置背景原图像(由background-image定义)的位置，背景图像如果要重复，将从该初始位置开始。center表示位置居中。
[0117]
在步骤s405中，将多色图标的尺寸属性设置为跟随父标签进行缩放。
[0118]
本步骤中，可以根据第二渲染规则中的“background-size：cover”将多色图标的位置属性设置为跟随父标签进行缩放。其中，该父标签即上述多色图标所对应标签的上一级标签。
[0119]
background-size属性用于设置背景图像的尺寸。cover表示把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
[0120]
在生成每个网页图标的渲染样式之后，可以执行以下步骤s140。
[0121]
在步骤s140中，根据多个网页图标的渲染样式生成样式文件，以根据样式文件加载每个网页图标。
[0122]
本步骤中，可以对每个网页图标的渲染样式进行拼接，得到拼接样式。
[0123]
示例性的，针对单色图标a所形成的拼接样式可以是：icon-${name}{background-color:currentcolor；-webkit-mask-image:url(“${b64}”)；
[0124]
mask-image：url(“${b64}”)；-webkit-mask-repeat:no-repeat；mask-repeat:
[0125]
no-repeat；-webkit-mask-position:center；mask-position:center；-webkit-mask-size:cover；mask-size:cover；}。其中，icon-${name}表示上述单色图标a的名称，以便于后续根据图标名称快速从样式文件中查询到单色图标a的渲染样式。
[0126]
示例性的，针对双色图标b所生成的拼接样式可以是：icon-${name}{background-color:transparent；background-image:url(“${b64}”)；
[0127]
background-repeat:no-repeat；background-position:center；background-size:cover；}。其中，上述icon-${name}表示上述多色图标b的名称，以便于后续快速从生成的样式文件中查询到多色图标b的渲染样式。
[0128]
在生成每个网页图标对应的拼接样式之后，可以将上述多个网页图标对应的多个拼接样式存储至同一文件中，得到上述样式文件。通过根据多个网页图标对应的拼接样式生成一份样式文件，使得后续仅需要一份样式文件便可加载所有的网页图标，无需依赖其他文件，解决了相关技术中需要引入字体系统才能完成图标加载的问题，降低系统负担。
[0129]
在生成上述样式文件之后，可以根据上述样式文件加载每个网页图标。具体的，参考图5，图5示出本公开实施例中根据样式文件加载每个网页图标的流程示意图，包含步骤s501-步骤s502：
[0130]
在步骤s501中，根据获取到的网页图标的名称，从样式文件中查询网页图标对应的拼接样式。
[0131]
本步骤中，可以获取图标标签中所添加的网页图标的名称，进而，根据上述网页图标的名称，从上述样式文件中查询到网页图标对应的拼接样式。从而，保留了webfont(网页字体)引用图标的方式，使得图标的形状类似字体图标但不是字体图标，可移植性高，对代码的侵入性小。
[0132]
需要说明的是，在查询到网页图标对应的拼接样式之后，若网页图标为单色图标，还可以根据实际显示需求对其拼接样式中的background-color属性进行更改，以更改网页图标的显示颜色，或者，根据实际显示需求对其拼接样式中的background-size属性进行更改，以更改网页图标的显示尺寸。若网页图标为多色图标，则可以根据实际显示需求对其拼接样式中的background-size属性进行更改，以更改网页图标的显示尺寸。
[0133]
因此，相比现有技术中每当图标需要增加一种新颜色时，就需要另外制作一个新颜色的图标的技术方案而言，本公开能够便捷的对图标的颜色、尺寸等属性进行快速修改，从而便于扩展更多的使用场景，提高了图标开发效率，减轻了开发负担。
[0134]
在步骤s502中，根据拼接样式，加载网页图标。
[0135]
本步骤中，在获取到网页图标对应的拼接样式之后，可以根据上述拼接样式加载上述网页图标。
[0136]
在一种可选的实施方式中，在生成上述样式文件之后，可以构建上述样式文件对应的抽象语法树，进而，当出现新增图标、删除图标或改动图标的图标变动情况时，可以直接根据上述图标变动情况更新上述抽象语法树，根据更新后的抽象语法树更新上述样式文件，以避免对原样式文件的多次请求和更改。具体的，参考图6，图6示出本公开实施例中如何更新样式文件的流程示意图，包含步骤s601-步骤s603：
[0137]
在步骤s601中，构建样式文件对应的抽象语法树。
[0138]
本步骤中，可以构建上述样式文件对应的抽象语法树，抽象语法树是(abstract syntax tree，ast)，或简称语法树(syntax tree)，是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。
[0139]
在步骤s602中，响应于图标变更操作，根据图标变更操作更新抽象语法树。
[0140]
本步骤中，若检测到图标变更操作(在图标库中新增图标、删除图标或改动某一图标)时，可以根据上述图标变更操作，更新上述抽象语法树。具体的，可以查找发生变更的图
标所对应的ast节点，并对其节点进行更新。举例而言，当发生新增图标的操作时，可以在ast底部插入新节点；当发生删除图标的操作时，可以从ast中查找被移除的图标对应的节点，并将其节点删除；当发生变更图标的操作时，可以从ast中查找发生变更图标所对应的节点，并对其节点进行更新。
[0141]
在步骤s603中，根据更新后的抽象语法树生成新的样式文件，以根据新的样式文件加载每个网页图标。
[0142]
本步骤中，在对抽象语法树进行更新之后，可以根据更新后的抽象语法树生成新的样式文件，以便于后续根据该新的样式文件加载每个网页图标。
[0143]
通过构建抽象语法树，使得仅在初次加载图标时需要读取上述样式文件，后续图标库的增删改等变更操作均无需读取上述样式文件，变更操作所涉及的css内容均可以直接在上述ast上进行处理，处理完成后再统一生成新的css文件。该方式使得后续各项变更操作均无需读取上述样式文件，只需直接在ast上写入内容即可生成新的样式文件，这样可以大大减轻样式文件的读取次数，降低后续由于图标库的更新所带来的文件读取开销。
[0144]
本公开还提供了一种网页图标的加载装置，图7示出本公开示例性实施例中网页图标的加载装置的结构示意图；如图7所示，网页图标的加载装置700可以包括类型识别模块710、第一渲染模块720、derivation渲染模块730和图标加载模块740。其中：
[0145]
类型识别模块710，用于根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型；所述网页图标的类型包括单色图标和多色图标；
[0146]
第一渲染模块720，用于当所述网页图标为单色图标时，利用第一渲染规则生成所述单色图标的渲染样式；
[0147]
第二渲染模块730，用于当所述网页图标为多色图标时，利用第二渲染规则生成所述多色图标的渲染样式；所述第二渲染规则不同于所述第一渲染规则；
[0148]
图标加载模块740，用于根据所述多个网页图标的渲染样式生成样式文件，以根据所述样式文件加载每个所述网页图标。
[0149]
在本公开的示例性实施例中，在根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型之前，类型识别模块710，被配置为：
[0150]
对所述多个网页图标中的单色图标进行去色处理；将每个所述网页图标调整为目标尺寸；将每个所述目标尺寸的网页图标转换为svg格式文件，并将所述svg格式文件存储至预先创建的目标文件夹中。
[0151]
在本公开的示例性实施例中，类型识别模块710，被配置为：
[0152]
对所述目标文件夹中存储的多个svg格式文件进行解析，以获取到所述多个网页图标的描述代码。
[0153]
在本公开的示例性实施例中，类型识别模块710，被配置为：
[0154]
利用正则表达式从所述描述代码中匹配所述网页图标的颜色信息；根据所述网页图标的颜色信息，确定所述网页图标的类型。
[0155]
在本公开的示例性实施例中，所述网页图标的颜色信息包括所述网页图标的多个像素点所对应的多个颜色值；类型识别模块710，被配置为：
[0156]
从所述多个颜色值中选取参考颜色值，比对剩余颜色值是否与所述参考颜色值相同；所述剩余颜色值为所述多个颜色值中除所述参考颜色值之外的颜色值；若所述剩余颜
色值与所述参考颜色值相同，确定所述网页图标为单色图标；若所述剩余颜色值与所述参考颜色值不相同，确定所述网页图标为多色图标。
[0157]
在本公开的示例性实施例中，在获取到多个网页图标的描述代码之后，类型识别模块710，被配置为：
[0158]
对每个网页图标对应的描述代码进行压缩处理；对压缩处理后的描述代码进行base64编码，得到base64文件。
[0159]
在本公开的示例性实施例中，第一渲染模块720，被配置为：
[0160]
将所述单色图标的背景颜色设置为父标签的文本颜色；所述父标签为所述单色图标所对应标签的上一级标签；根据所述单色图标对应的base64文件，生成所述单色图标的遮罩图片；将所述遮罩图片的显示属性设置为不重复；将所述遮罩图片的位置属性设置为居中；将所述遮罩图片的尺寸属性设置为根据所述父标签的尺寸进行缩放。
[0161]
在本公开的示例性实施例中，第二渲染模块730，被配置为：
[0162]
根据所述多色图标对应的base64文件，生成背景图片；将所述多色图标的背景颜色设置为透明色；将所述多色图标的显示属性设置为不重复；将所述多色图标的位置属性设置为居中；将所述多色图标的尺寸属性设置为跟随父标签进行缩放；所述父标签为所述多色图标所对应标签的上一级标签。
[0163]
在本公开的示例性实施例中，图标加载模块740，被配置为：
[0164]
对每个所述网页图标的渲染样式进行拼接，得到拼接样式；根据所述多个网页图标对应的多个拼接样式，生成所述样式文件。
[0165]
在本公开的示例性实施例中，图标加载模块740，被配置为：
[0166]
根据获取到的网页图标的名称，从所述样式文件中查询所述网页图标对应的拼接样式；根据所述拼接样式，加载所述网页图标。
[0167]
在本公开的示例性实施例中，在生成样式文件之后，图标加载模块740，被配置为：
[0168]
构建所述样式文件对应的抽象语法树；响应于图标变更操作，根据所述图标变更操作更新所述抽象语法树；所述图标变更操作包括以下任一：新增图标、删除图标或改动图标；根据更新后的抽象语法树生成新的样式文件，以根据所述新的样式文件加载每个网页图标。
[0169]
上述网页图标的加载装置中各模块的具体细节已经在对应的网页图标的加载方法中进行了详细的描述，因此此处不再赘述。
[0170]
应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
[0171]
此外，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。
[0172]
通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开
实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、移动终端、或者网络设备等)执行根据本公开实施方式的方法。
[0173]
本技术还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
[0174]
计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
[0175]
计算机可读存储介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。
[0176]
计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现如上述实施例中所述的方法。
[0177]
此外，在本公开实施例中还提供了一种能够实现上述方法的电子设备。
[0178]
所属技术领域的技术人员能够理解，本公开的各个方面可以实现为系统、方法或程序产品。因此，本公开的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。
[0179]
下面参照图8来描述根据本公开的这种实施方式的电子设备800。图8显示的电子设备800仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
[0180]
如图8所示，电子设备800以通用计算设备的形式表现。电子设备800的组件可以包括但不限于：上述至少一个处理单元810、上述至少一个存储单元820、连接不同系统组件(包括存储单元820和处理单元810)的总线830以及显示单元840。
[0181]
其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元810执行，使得所述处理单元810执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施方式的步骤。例如，所述处理单元810可以执行如图1中所示的：步骤s110，根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型；所述网页图标的类型包括单色图标和多色图标；步骤s120，当所述网页图标为单色图标时，利用第一渲染规则生成所述单色图标的渲染样式；步骤s130，当所述网页图标为多色图标时，利用第二渲染规则生成所述多色图标的渲染样式；所述第二渲染规则不同于所述第一渲染规则；步骤s140，根据所述多个网页图标的渲染样式生成样式文件，以根据所述样式文件加载每个所述网页图标。
[0182]
存储单元820可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(ram)8201和/或高速缓存存储单元8202，还可以进一步包括只读存储单元(rom)8203。
[0183]
存储单元820还可以包括具有一组(至少一个)程序模块8205的程序/实用工具8204，这样的程序模块8205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
[0184]
总线830可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
[0185]
电子设备800也可以与一个或多个外部设备900(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备800交互的设备通信，和/或与使得该电子设备800能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(i/o)接口850进行。并且，电子设备800还可以通过网络适配器860与一个或者多个网络(例如局域网(lan)，广域网(wan)和/或公共网络，例如因特网)通信。如图所示，网络适配器860通过总线830与电子设备800的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备800使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、raid系统、磁带驱动器以及数据备份存储系统等。
[0186]
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其他实施例。本技术旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。
技术特征：1.一种网页图标的加载方法，其特征在于，包括：根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型；所述网页图标的类型包括单色图标和多色图标；当所述网页图标为单色图标时，利用第一渲染规则生成所述单色图标的渲染样式；当所述网页图标为多色图标时，利用第二渲染规则生成所述多色图标的渲染样式；所述第二渲染规则不同于所述第一渲染规则；根据所述多个网页图标的渲染样式生成样式文件，以根据所述样式文件加载每个所述网页图标。2.根据权利要求1所述的方法，其特征在于，在根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型之前，所述方法还包括：对所述多个网页图标中的单色图标进行去色处理；将每个所述网页图标调整为目标尺寸；将每个所述目标尺寸的网页图标转换为svg格式文件，并将所述svg格式文件存储至预先创建的目标文件夹中。3.根据权利要求2所述的方法，其特征在于，所述多个网页图标的描述代码通过以下方式获取：对所述目标文件夹中存储的多个svg格式文件进行解析，以获取到所述多个网页图标的描述代码。4.根据权利要求2所述的方法，其特征在于，所述根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型，包括：利用正则表达式从所述描述代码中匹配所述网页图标的颜色信息；根据所述网页图标的颜色信息，确定所述网页图标的类型。5.根据权利要求1所述的方法，其特征在于，所述网页图标的颜色信息包括所述网页图标的多个像素点所对应的多个颜色值；所述根据所述颜色信息，确定所述网页图标的类型，包括：从所述多个颜色值中选取参考颜色值，比对剩余颜色值是否与所述参考颜色值相同；所述剩余颜色值为所述多个颜色值中除所述参考颜色值之外的颜色值；若所述剩余颜色值与所述参考颜色值相同，确定所述网页图标为单色图标；若所述剩余颜色值与所述参考颜色值不相同，确定所述网页图标为多色图标。6.根据权利要求1所述的方法，其特征在于，在获取到多个网页图标的描述代码之后，所述方法还包括：对每个网页图标对应的描述代码进行压缩处理；对压缩处理后的描述代码进行base64编码，得到base64文件。7.根据权利要求1至6任意一项所述的方法，其特征在于，所述利用第一渲染规则生成所述单色图标的渲染样式，包括：将所述单色图标的背景颜色设置为父标签的文本颜色；所述父标签为所述单色图标所对应标签的上一级标签；根据所述单色图标对应的base64文件，生成所述单色图标的遮罩图片；将所述遮罩图片的显示属性设置为不重复；
将所述遮罩图片的位置属性设置为居中；将所述遮罩图片的尺寸属性设置为根据所述父标签的尺寸进行缩放。8.根据权利要求1至6任意一项所述的方法，其特征在于，所述利用第二渲染规则生成所述多色图标的渲染样式，包括：根据所述多色图标对应的base64文件，生成背景图片；将所述多色图标的背景颜色设置为透明色；将所述多色图标的显示属性设置为不重复；将所述多色图标的位置属性设置为居中；将所述多色图标的尺寸属性设置为跟随父标签进行缩放；所述父标签为所述多色图标所对应标签的上一级标签。9.根据权利要求1所述的方法，其特征在于，所述根据所述多个网页图标的渲染样式生成样式文件，包括：对每个所述网页图标的渲染样式进行拼接，得到拼接样式；根据所述多个网页图标对应的多个拼接样式，生成所述样式文件。10.根据权利要求9所述的方法，其特征在于，所述根据所述样式文件加载每个网页图标，包括：根据获取到的网页图标的名称，从所述样式文件中查询所述网页图标对应的拼接样式；根据所述拼接样式，加载所述网页图标。11.根据权利要求1所述的方法，其特征在于，在生成样式文件之后，所述方法还包括：构建所述样式文件对应的抽象语法树；响应于图标变更操作，根据所述图标变更操作更新所述抽象语法树；所述图标变更操作包括以下任一：新增图标、删除图标或改动图标；根据更新后的抽象语法树生成新的样式文件，以根据所述新的样式文件加载每个网页图标。12.一种网页图标的加载装置，其特征在于，包括：类型识别模块，用于根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型；所述网页图标的类型包括单色图标和多色图标；第一渲染模块，用于当所述网页图标为单色图标时，利用第一渲染规则生成所述单色图标的渲染样式；第二渲染模块，用于当所述网页图标为多色图标时，利用第二渲染规则生成所述多色图标的渲染样式；所述第二渲染规则不同于所述第一渲染规则；图标加载模块，用于根据所述多个网页图标的渲染样式生成样式文件，以根据所述样式文件加载每个所述网页图标。13.一种计算机存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1～11中任意一项所述的网页图标的加载方法。14.一种电子设备，其特征在于，包括：处理器；以及存储器，用于存储所述处理器的可执行指令；
其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1～11中任意一项所述的网页图标的加载方法。
技术总结本公开涉及计算机技术领域，提供了一种网页图标的加载方法、网页图标的加载装置、计算机存储介质、电子设备，其中，网页图标的加载方法包括：根据获取到的多个网页图标的描述代码，确定每个所述网页图标的类型；所述网页图标的类型包括单色图标和多色图标；当所述网页图标为单色图标时，利用第一渲染规则生成所述单色图标的渲染样式；当所述网页图标为多色图标时，利用第二渲染规则生成所述多色图标的渲染样式；所述第二渲染规则不同于所述第一渲染规则；根据所述多个网页图标的渲染样式生成样式文件，以根据所述样式文件加载每个所述网页图标。本公开中的网页图标的加载方法能够快速加载大批量图标。加载大批量图标。加载大批量图标。
技术研发人员：杨泽伟
受保护的技术使用者：网易（杭州）网络有限公司
技术研发日：2022.07.21
技术公布日：2022/11/1
