CN115270024A

CN115270024A - Webpage icon loading method and device, computer storage medium and electronic equipment

Info

Publication number: CN115270024A
Application number: CN202210873489.8A
Authority: CN
Inventors: 杨泽伟
Original assignee: Netease Hangzhou Network Co Ltd
Current assignee: Netease Hangzhou Network Co Ltd
Priority date: 2022-07-21
Filing date: 2022-07-21
Publication date: 2022-11-01

Abstract

The disclosure relates to the technical field of computers, and provides a webpage icon loading method, a webpage icon loading device, a computer storage medium and electronic equipment, wherein the webpage icon loading method comprises the following steps: determining the type of each webpage icon according to the acquired description codes of the plurality of webpage icons; the types of the webpage icons comprise monochrome icons and multi-color icons; when the webpage icon is a monochrome icon, generating a rendering style of the monochrome icon by using a first rendering rule; when the webpage icon is a multi-color icon, generating a rendering style of the multi-color icon by using a second rendering rule; the second rendering rule is different from the first rendering rule; and generating a style file according to the rendering styles of the plurality of webpage icons so as to load each webpage icon according to the style file. The loading method of the webpage icons in the disclosure can quickly load a large batch of icons.

Description

Webpage icon loading method and device, computer storage medium and electronic equipment

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a method and an apparatus for loading a webpage icon, a computer storage medium, and an electronic device.

Background

The webpage icon is an icon used on a webpage, for example, when a website is developed, various icons are often required to be used on pages of the website, and the icon can be used as a page function identifier, such as clicking a switching icon, downloading an icon, and the like.

At present, icons are generally made by using pictures in a JPG (Joint Photographic Experts Group ) or PNG (portable network graphics format) format, however, the above scheme requires at least one style file and entity files of all icons, and if too many icons are needed, a large number of HTTP (hypertext Transfer Protocol) requests are generated each time a page is loaded, which affects the loading speed of the icons.

In view of this, there is a need in the art to develop a new method and apparatus for loading a webpage icon.

It is to be noted that the information disclosed in the background section above is only used to enhance understanding of the background of the present disclosure.

Disclosure of Invention

The present disclosure is directed to a method and an apparatus for loading a webpage icon, a computer storage medium, and an electronic device, so as to overcome at least some technical problems that a large batch of icons cannot be loaded quickly due to limitations of related technologies.

Additional features and advantages of the disclosure will be set forth in the detailed description which follows, or in part will be obvious from the description, or may be learned by practice of the disclosure.

According to a first aspect of the present disclosure, a method for loading a webpage icon is provided, including: a method for loading a webpage icon is characterized by comprising the following steps: determining the type of each webpage icon according to the acquired description codes of the plurality of webpage icons; the types of the webpage icons comprise monochrome icons and multi-color icons; when the webpage icon is a monochromatic icon, generating a rendering style of the monochromatic icon by using a first rendering rule; when the webpage icon is a multi-color icon, generating a rendering style of the multi-color icon by using a second rendering rule; the second rendering rule is different from the first rendering rule; and generating a style file according to the rendering styles of the plurality of webpage icons so as to load each webpage icon according to the style file.

In an exemplary embodiment of the present disclosure, before determining a type of each of the plurality of web page icons according to the obtained description codes of the plurality of web page icons, the method further includes: performing decoloring treatment on a single-color icon in the plurality of webpage icons; adjusting each webpage icon to a target size; and converting each webpage icon with the target size into an SVG format file, and storing the SVG format file into a pre-created target folder.

In an exemplary embodiment of the present disclosure, the description codes of the plurality of web page icons are acquired by: and analyzing the multiple SVG format files stored in the target folder to obtain the description codes of the multiple webpage icons.

In an exemplary embodiment of the present disclosure, the determining, according to the obtained description codes of the plurality of web page icons, a type of each of the web page icons includes: matching color information of the webpage icon from the description code by using a regular expression; and determining the type of the webpage icon according to the color information of the webpage icon.

In an exemplary embodiment of the present disclosure, the color information of the webpage icon includes a plurality of color values corresponding to a plurality of pixel points of the webpage icon; determining the type of the webpage icon according to the color information comprises the following steps: selecting a reference color value from the plurality of color values, and comparing whether the remaining color value is the same as the reference color value; the remaining color value is a color value of the plurality of color values other than the reference color value; if the residual color value is the same as the reference color value, determining that the webpage icon is a monochrome icon; and if the residual color value is different from the reference color value, determining that the webpage icon is a multi-color icon.

In an exemplary embodiment of the present disclosure, after obtaining the description codes of the plurality of web page icons, the method further includes: compressing the description codes corresponding to the webpage icons; and carrying out Base64 encoding on the compressed description codes to obtain a Base64 file.

In an exemplary embodiment of the present disclosure, the generating a rendering style for the monochrome icon using the first rendering rule includes: setting the background color of the monochrome icon as the text color of the parent label; the parent label is a previous-level label of the label corresponding to the monochrome icon; generating a mask picture of the monochrome icon according to the Base64 file corresponding to the monochrome icon; setting the display attribute of the mask picture to be not repeated; setting the position attribute of the mask picture to be centered; and setting the size attribute of the mask picture to be scaled according to the size of the parent tag.

In an exemplary embodiment of the present disclosure, the generating a rendering style of the multi-colored icon using a second rendering rule includes: generating a background picture according to the Base64 file corresponding to the multi-color icon; setting the background color of the multi-color icon to be transparent; setting a display attribute of the multi-colored icon to be non-repetitive; setting a position attribute of the multi-colored icon to be centered; setting a size attribute of the multi-colored icon to follow a parent label for zooming; the parent label is a previous-level label of the label corresponding to the multi-color icon.

In an exemplary embodiment of the present disclosure, the generating a style file according to the rendering style of the plurality of webpage icons includes: splicing the rendering style of each webpage icon to obtain a splicing style; and generating the style file according to a plurality of splicing styles corresponding to the plurality of webpage icons.

In an exemplary embodiment of the present disclosure, the loading each webpage icon according to the style file includes: according to the obtained name of the webpage icon, a splicing style corresponding to the webpage icon is inquired from the style file; and loading the webpage icon according to the splicing style.

In an exemplary embodiment of the present disclosure, after generating the style file, the method further includes: constructing an abstract syntax tree corresponding to the style file; in response to an icon change operation, updating the abstract syntax tree according to the icon change operation; the icon change operation includes any one of: adding, deleting or changing icons; and generating a new style file according to the updated abstract syntax tree so as to load each webpage icon according to the new style file.

According to a second aspect of the present disclosure, there is provided a device for loading a webpage icon, including: the type identification module is used for determining the type of each webpage icon according to the acquired description codes of the plurality of webpage icons; the types of the webpage icons comprise monochrome icons and multi-color icons; the first rendering module is used for generating a rendering style of the monochrome icon by utilizing a first rendering rule when the webpage icon is the monochrome icon; the second rendering module is used for generating a rendering style of the multi-color icon by using a second rendering rule when the webpage icon is the multi-color icon; the second rendering rule is different from the first rendering rule; and the icon loading module is used for generating a style file according to the rendering styles of the plurality of webpage icons so as to load each webpage icon according to the style file.

According to a third aspect of the present disclosure, there is provided a computer storage medium having a computer program stored thereon, the computer program, when executed by a processor, implementing the method for loading a webpage icon according to the first aspect.

According to a fourth aspect of the present disclosure, there is provided an electronic device comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to execute the loading method of the webpage icon according to the first aspect through executing the executable instructions.

As can be seen from the foregoing technical solutions, the method for loading a webpage icon, the device for loading a webpage icon, the computer storage medium, and the electronic device in the exemplary embodiment of the disclosure have at least the following advantages and positive effects:

in the technical solutions provided in some embodiments of the present disclosure, on one hand, when it is determined that the webpage icon is a monochromatic icon according to the description code of the webpage icon, a rendering style of the monochromatic icon is generated by using a first rendering rule, and when the webpage icon is a polychromatic icon, a rendering style of the polychromatic icon is generated by using a second rendering rule different from the first rendering rule, so that the rendered monochromatic icon and the polychromatic icon respectively correspond to different rendering styles. On the other hand, the style file is generated according to the rendering styles of the webpage icons, and each webpage icon is loaded according to the style file, so that the technical problem that the related style file of each webpage icon can be acquired only by initiating multiple requests in the related technology can be solved, the bandwidth loss caused by multiple requests is reduced, and the rapid loading of a large batch of icons is realized.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and together with the description, serve to explain the principles of the disclosure. It should be apparent that the drawings in the following description are merely examples of the disclosure and that other drawings may be derived by those of ordinary skill in the art without inventive effort.

Fig. 1 is a flowchart illustrating a method for loading a web page icon in an embodiment of the present disclosure;

fig. 2 is a schematic flowchart illustrating a process of determining a type of a webpage icon according to an acquired description code of the webpage icon in the embodiment of the present disclosure;

FIG. 3 is a flow chart illustrating a process of generating a rendering style for a monochrome icon using a first rendering rule in an embodiment of the present disclosure;

FIG. 4 shows a flowchart for generating a rendering style for a multi-colored icon using a second rendering rule in an embodiment of the disclosure;

FIG. 5 is a schematic diagram illustrating a process for loading each webpage icon according to a style file in an embodiment of the present disclosure;

FIG. 6 shows a flow diagram of how a style file is updated in an embodiment of the present disclosure;

fig. 7 is a schematic structural diagram illustrating a device for loading a web page icon in an exemplary embodiment of the present disclosure;

fig. 8 shows a schematic structural diagram of an electronic device in an exemplary embodiment of the present disclosure.

Detailed Description

Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of example embodiments to those skilled in the art. The described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of embodiments of the disclosure. One skilled in the relevant art will recognize, however, that the embodiments of the present disclosure can be practiced without one or more of the specific details, or with other methods, components, devices, steps, etc. In other instances, well-known technical solutions have not been shown or described in detail to avoid obscuring aspects of the present disclosure.

The terms "a", "an", "the" and "said" are used in this specification to denote the presence of one or more elements/components/parts/etc.; the terms "comprising" and "having" are intended to be inclusive and mean that there may be additional elements/components/etc. other than the listed elements/components/etc.; the terms "first" and "second", etc. are used merely as labels, and are not limiting on the number of their objects.

Furthermore, the drawings are merely schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and a repetitive description thereof will be omitted. Some of the block diagrams shown in the figures are functional entities and do not necessarily correspond to physically or logically separate entities.

A slightly shaped website usually has a set of own icon system, and icons are used as elements for enriching the web page vision, and are combined with texts or buttons to enhance the interactivity and readability of the web page.

The related icon system is generally made by using pictures in the JPG or PNG format, or a font-family attribute of the CSS is used to introduce a font file and to use the icon as a font in combination with the content attribute.

However, icons in the JPG or PNG format have the following drawbacks:

first, compression of JPG or PNG can increase the loading speed of icons, but can obscure icons or produce a jagged effect;

secondly, the icons cannot be freely colored, the use of the icons in different scenes is limited, and the icons can only be additionally manufactured if other colors are used, so that the flexibility and the expandability of the icons are reduced;

thirdly, the icon system needs at least one style file and entity files of all icons, if the icons are too many, a large number of HTTP requests are generated each time a page is loaded, and network bandwidth is wasted;

fourth, icons cannot be sized due to the limitations of CSS background properties, reducing flexibility and scalability of icons.

The scheme of using icons as fonts has the following defects:

firstly, due to the browser compatibility problem, 4 font files (TTF/SVG/EOT/WOFF format) need to be prepared, and a designer or a developer needs to convert the vector file of the icon into the font file in advance, so that additional work overhead is increased;

secondly, the volume of the converted font file is usually much larger than that of the original vector file, so that the icon volume is increased, and the speed of loading the icon resources on the webpage is reduced;

thirdly, as is well known, only a single color can be used when the font is set, and only a single color can be used when the icon is changed into the font, and the single color and the multiple colors cannot coexist, so that the icon cannot be used in some scenes, and thus, only a multi-color picture can be additionally made for replacement;

fourthly, when the icons are newly added, only the vector files of the icons can be recombined and then converted into font files, the whole process is complex and tedious, and the website iteration with high updating frequency is not facilitated.

In the embodiment of the disclosure, a method for loading a webpage icon is provided first, which overcomes the defect that a large batch of icons cannot be loaded quickly in the related art at least to a certain extent.

Fig. 1 is a flowchart illustrating a method for loading a webpage icon according to an embodiment of the present disclosure, where an execution subject of the method for loading a webpage icon may be a server for loading the webpage icon.

Referring to fig. 1, a method for loading a webpage icon according to one embodiment of the present disclosure includes the steps of:

step S110, determining the type of each webpage icon according to the acquired description codes of the plurality of webpage icons; the types of the webpage icons comprise monochrome icons and multi-color icons;

step S120, when the webpage icon is a monochromatic icon, generating a rendering style of the monochromatic icon by using a first rendering rule;

step S130, when the webpage icon is a multi-color icon, generating a rendering style of the multi-color icon by using a second rendering rule; the second rendering rule is different from the first rendering rule;

step S140, generating a style file according to the rendering styles of the plurality of webpage icons, and loading each webpage icon according to the style file.

In the technical scheme provided by the embodiment shown in fig. 1, on one hand, when the webpage icon is determined to be the monochromatic icon according to the description code of the webpage icon, the rendering style of the monochromatic icon is generated by using a first rendering rule, and when the webpage icon is the multicolor icon, the rendering style of the multicolor icon is generated by using a second rendering rule different from the first rendering rule, so that the rendered monochromatic icon and the multicolor icon respectively correspond to different rendering styles. On the other hand, the style file is generated according to the rendering styles of the webpage icons, and each webpage icon is loaded according to the style file, so that the technical problem that the related style file of each webpage icon can be acquired only by initiating multiple requests in the related technology can be solved, the bandwidth loss caused by multiple requests is reduced, and the rapid loading of a large batch of icons is realized.

The following describes the specific implementation of each step in fig. 1 in detail:

before step S110, it should be noted that a plurality of preset webpage icons (the plurality of webpage icons may include a monochrome icon and a multi-color icon) may be obtained from the icon library, and further, the following processing is performed on the plurality of webpage icons:

for the monochrome icons in the plurality of web page icons, the monochrome icons may be decolored, or the color of each of the monochrome icons is changed to white, and then the web page icons are adjusted to a target size (for example, 48 × 48, which may be set according to actual conditions, and is not particularly limited by this disclosure).

The color of the monochrome icon is changed into white, so that the monochrome icon can be conveniently and subsequently rendered into different colors according to the requirement.

By converting the webpage icons into the SVG format files, compared with the JPG format, the PNG format and other formats, the SVG format files have the advantages that the data volume occupied by the files is small, the downloading speed is high, and in addition, the display quality of the SVG format files can not be influenced under the condition that the icons are enlarged or the sizes of the icons are changed.

Aiming at the multi-color icons in the plurality of webpage icons, the webpage icons can be directly adjusted to be in a target size (for example, 48 x 48 can be set according to the actual situation, and the method is not specially limited by the present disclosure), and further, the webpage icons in the target size can be converted into an SVG format file, and the SVG format file is stored in a target folder which is created in advance.

SVG is a graphic file format, and its english language is called Scalable Vector Graphics, which means Scalable Vector Graphics. SVG defines graphics using XML format. It is developed by World Wide Web Consortium (W3C) alliance based on XML (Extensible Markup Language). Strictly speaking, the method is an open standard vector graphics language, and can be used for designing high-resolution Web graphic pages. The user can directly draw the image by the code, open the SVG image by any word processing tool, make the image have interactive function by changing part of the code, and can insert into HTML (Hypertext Mark-up Language) at any time to watch through the browser.

Furthermore, the target folder can be traversed based on a readdirSync function of the Fs module in the nodjs to obtain an SVG format file corresponding to each webpage icon, and further, the SVG format file can be analyzed by using an image editor to obtain an XML description code of the webpage icon.

After the XML description code corresponding to each web page icon is acquired, the XML description code may be compressed, specifically, the indentation symbol and the linefeed symbol included in the XML description code may be removed to compress the XML description code, so that the file volume may be reduced when the icon is subsequently converted into a Base64 file.

After the XML description code is compressed, base64 encoding can be performed on the XML description code by using the Svg64 module of nodjs, so that a Base64 file is obtained. The reason for transcoding XML descriptions into Base64 files is as follows:

firstly, the volume after the Base64 format conversion is not large with the original format, and the display state of the original icon is highly reserved. In addition, the original format is SVG which has the high-quality characteristic of vector graphics, and the picture quality cannot be influenced by zooming in and zooming out, so that the quality of the picture cannot be damaged more by converting the SVG format into the Base64 format.

Secondly, the compatibility of the Base64 format is particularly good, hardware support can be obtained under new and old browsers, and the compatibility of icon display under different terminals is guaranteed. In addition, the compression of the image belongs to a lossless state under different scenes, and the image quality is greatly guaranteed.

Thirdly, the Base64 format exists in a text form, can be attached to different types of files at any time and directly generates pictures by program analysis, and has extremely strong portability. Because the method is transplanted into the file, an HTTP request does not need to be initiated when the picture is rendered, and the frequency of bandwidth requests of the browser can be greatly reduced.

After the XML description code is converted into the Base64 format file, the following step S110 may be performed:

in step S110, the type of each webpage icon is determined according to the acquired description codes of the plurality of webpage icons.

In this step, the types of the webpage icons include a monochrome icon and a multi-color icon. A monochrome icon is an icon that contains only one color, while a multi-colored icon is an icon that contains two or more colors.

Referring to fig. 2, fig. 2 shows a schematic flowchart of determining a type of a webpage icon according to an acquired description code of the webpage icon in the embodiment of the present disclosure, including steps S201 to S202:

in step S201, color information of the web page icon is matched from the description code using a regular expression.

In this step, considering that hexadecimal is used in the description code to represent the color information in advance, for example: # FFFFFF indicates white and #000000 indicates black, so that a hexadecimal regular expression ([ 0-9a-fA-F ] {6} | [0-9a-fA-F ] {3 }) $) can be used to match the color information of the webpage icon from the above description code.

Furthermore, a color array can be generated according to all the color information, and the color array comprises a plurality of color values. Illustratively, the color array corresponding to a single color icon may be represented as [ # FFFFFF, # FFFFFFFF, \ 8230 [ \8230; # FFFFFF ], the color array corresponding to a multi-color icon may be represented as [ # FF6666, #0000FF, # FFFFFFFF, \8230 [ # 8230; #0000FF ].

The hexadecimal regular expression refers to that a character string starts with a "#" symbol, and is followed by a letter from "a" to "f", "a" to "Z" or a length of a number from "0" to "9" (which is exactly 6 or 3), and the hexadecimal regular expression is used for matching the end of a row and is used for checking a hexadecimal Web color code.

In step S202, the type of the webpage icon is determined according to the color information.

In this step, after the color information of the webpage icon is obtained, the type of the webpage icon may be determined according to the color array. Specifically, a reference color value may be selected from the color array, and the reference color value is taken as a first color value in the color array for illustration, so that other color values may be sequentially compared with the first color value, if the other color values are the same as the first color value, the type of the webpage icon may be determined to be a monochrome icon, and if any color value in the other color values is different from the first color value, the type of the webpage icon may be determined to be a multicolor icon.

It should be noted that the reference color value may be a first color value in the color array, or may be any color value in the color array, and may be set by itself according to an actual situation, and this disclosure does not specially limit this.

When the type of the web page icon determined in step S202 is a monochrome icon, the following step S120 may be performed.

In step S120, when the type of the webpage icon is a monochrome icon, a rendering style of the monochrome icon is generated using a first rendering rule.

In this step, if it is determined that the webpage icon is a monochrome icon, a rendering style of the monochrome icon may be generated by using a first rendering rule. In view of the fact that the color of a monochrome icon may need to be changed subsequently according to the needs of a user, if the monochrome icon is rendered directly by using a background attribute (used for rendering a background layer of a browser element, and collectively defining various background attributes at a time) of a CSS (abbreviation of a masking Style Sheets), which is mainly used for setting the appearance of a website and making the website more gorgeous and attractive, the color of the icon is fixed, and the subsequent change cannot occur. The mask attribute includes rendering of a background color, so that the rendering style in the first rendering rule may include the background color of the monochrome icon, the mask picture of the monochrome icon, the display attribute, the position attribute, the size attribute, and the like of the mask picture, and may be set according to the actual situation, which is not particularly limited by the present disclosure.

In CSS, the mask attribute allows the user to hide some or all of the visible area of an element by masking or cropping the picture of a particular area. The CSS mask attribute uses the latest attribute mask-image of CSS3 to provide a pixel-level based mask layer for a dynamic page, which in turn enables transparency control.

Specifically, referring to fig. 3, fig. 3 is a schematic flow diagram illustrating a process of generating a rendering style of a monochrome icon by using a first rendering rule in the embodiment of the present disclosure, where the process includes steps S301 to S304:

in step S301, the background color of the monochrome icon is set to the text color of the parent tag.

In this step, the background color of the monochrome icon may be set to the text color of its parent tag according to "background-color: currentColor" in the first rendering rule.

The background-color attribute is that background color is added to the box, and can be rgb value, or 16-system color value or color English word, which can be set according to actual situation, and the present disclosure does not make special limitation on the background color.

The parent label is a previous-level label of the label corresponding to the monochrome icon. Specifically, in html, tags are used to embed an image (e.g., background picture, icon, etc.) in a web page. Technically, the image is not inserted into the web page, but is linked into the web page, and the role of the tag is to create a placeholder for the referenced image. Basically, the source code has tags (except some background pictures) wherever there are pictures. When the CSS processes a web page, each tag is considered to be contained in an invisible box, and each tag is considered to be a box, the layout is defined by placing each box in a corresponding position in the web page. For example, if the tag content is "< div > < i > </i > </div >", when the tag corresponding to the monochrome icon is an i tag, its parent tag is a div tag, and the < div > tag is a block-level clean tag, which may include any tag, which is a container that can be used to combine other HTML elements.

In step S302, a mask picture of the monochrome icon is generated from the Base64 file corresponding to the monochrome icon.

In this step, a Base64 file corresponding to the monochrome icon may be obtained according to "mask-image: url" (data: image/svg + xml; base64, XXXX ")" in the first rendering rule, and a mask picture of the monochrome icon may be generated according to the Base64 file. Meanwhile, because the Base64 file is similar to a character string format, each icon file can be acquired without initiating an http request, and bandwidth loss caused by the request is greatly reduced.

The mask-image refers to a picture resource used by a mask, and the default value is none, i.e. a non-masked picture, and therefore, similar to the border-style attribute in the border attribute, is an attribute value that must be set to have an effect. The types of pictures supported by the mask-image mask are very wide, and can be url () static picture resources, and formats including JPG, PNG, SVG and the like are supported; it may also be a dynamically generated picture, for example a picture drawn with various CSS3 fades. The method supports various kinds of gradual changes of the CSS3, url () function symbols, image () function symbols and even element () function symbols in syntax, and also supports multiple backgrounds, and can be set according to actual conditions, and the method is not limited by the disclosure.

In step S303, the display attribute of the mask picture is set not to be repeated.

In this step, the rendering rule may be set according to "mask-repeat: the no-repeat attribute sets the display attribute (i.e., the number of background repeats) of the mask picture to no repeat. The mask-repeat attribute sets whether and how to mask a picture. no-repeat indicates that the mask picture is not repeated.

In step S304, the position attribute of the mask picture is set to be centered.

In this step, the rendering rule may be set according to "mask-position: center "sets the position attribute of the mask picture to centered. The mask-position attribute sets the initial position of the mask image. center indicates the position centering.

In step S305, the size attribute of the mask picture is set to be scaled according to the size of the parent tag.

In this step, the "mask-size" in the first rendering rule may be used: cover "sets the size attribute of the mask picture to scale following the size of the parent tag.

Illustratively, the size (font-size) of the parent tag is a preset value, and illustratively, the width may be 1em, and the height may be 1em. em unit name is relative length unit, which is relative to the font size of the text in the current object, if the font size of the text in the current object is not set by human, then relative to the default font size of the browser. The value of em is not fixed, em inherits the font size of the parent element.

The size of the icon is defined by using em units in the disclosure, the icon can be simulated into the attribute of the font, so that the icon can be self-adjusted according to the font-size font size determined by the parent element of the icon, and the self-adaptive effect is achieved.

It should be noted that, in consideration of compatibility of different browsers, an "-webkit" prefix may be added before all mask attributes in the programming process, and for example, regarding a size attribute, the code of the prefix may be written as a "" -webkit-mask-size: cover "so that both the high-version browser and the low-version browser can recognize the rendering style.

When the type of the webpage icon determined in step S202 is the multi-color icon, the following step S130 may be performed.

In step S130, when the webpage icon is a multi-color icon, a rendering style of the multi-color icon is generated using a second rendering rule.

In this step, if it is determined that the webpage icon is a multi-color icon, a rendering style of the multi-color icon may be generated by using a second rendering rule. Since the multi-colored icon does not involve the problem of subsequently changing its color, the icons may be rendered directly using the background property of the CSS, and thus, the rendering style may include the background color, the display property, the position property, and the size property of the multi-colored icon.

Referring to fig. 4, fig. 4 is a schematic flow chart illustrating a process of generating a rendering style of a multicolor icon by using a second rendering rule in the embodiment of the present disclosure, including steps S401 to S404:

in step S401, a background picture is generated from the Base64 file corresponding to the multicolor icon.

In this step, a background picture may be generated according to a Base64 file corresponding to a "background-image: url" (data: image/svg + xml; base64, XXXX ")" multicolor icon in the second rendering rule.

The background-image attribute is that a background picture is added to the box, the picture can be directly linked with an address url, the picture can be an external link, the picture can be a relative path, and the picture can be an absolute path. XXXX is the specific link address of the background picture.

In step S402, the background color of the multicolor icon is set to a transparent color.

In this step, the rendering rule may be determined according to a "background-color: transparent "sets the background color of the multicolor icon to a transparent color. transparent indicates a transparent color.

In step S403, the display attributes of the multicolor icon are set so as not to be repeated.

In this step, the rendering rule may be determined according to "background-repeat: no-repeat "sets the display properties of the multicolored icon to not repeat.

The background-repeat attribute sets whether and how to repeat the background image. no-repeat indicates no background picture is repeated.

In step S404, the position attribute of the multi-color icon is set to be centered.

In this step, the rendering rule may be set according to a "background-position: center "sets the position attribute of the multi-colored icon to centered.

The background-position attribute sets the initial position of the background image. This attribute sets the position of the background original image (defined by background-image) from which the background image, if it is to be repeated, will start. center denotes the position centering.

In step S405, the size attribute of the multi-color icon is set to zoom following the parent tag.

In this step, the rendering rule may be determined according to a "background-size: cover "sets the location attribute of the multi-colored icon to follow the parent tag for zooming. Wherein, the parent label is the upper label of the label corresponding to the multi-color icon.

The background-size attribute is used to set the size of the background image. cover means that the background image is expanded to be large enough so that the background image completely covers the background area.

After the rendering style of each webpage icon is generated, the following step S140 may be performed.

In step S140, a style file is generated according to the rendering styles of the plurality of webpage icons, so that each webpage icon is loaded according to the style file.

In this step, the rendering style of each webpage icon can be spliced to obtain a splicing style.

For example, the stitching style formed for the monochrome icon a may be: icon- $ { name } { background-color, currentcolor; webkit-mask-image url ("$ { b64 }");

mask-image：url(“${b64}”)；-webkit-mask-repeat:no-repeat；mask-repeat:

no-repeat; -webkit-mask-position center; mask-position center; -webkit-mask-size: cover; mask-size is cover; }. And icon- $ { name } represents the name of the monochrome icon A, so that the rendering style of the monochrome icon A can be conveniently and quickly queried from the style file according to the icon name.

For example, the generated stitching style for the bi-color icon B may be: icon- $ { name } { background-color: transaction; backlight-image url ("$ { b64 }");

background-repeat no-repeat; background-position center; back ground-size, cover; }. And the icon- $ { name } represents the name of the multicolor icon B, so that the rendering style of the multicolor icon B can be conveniently and quickly inquired from the generated style file in the follow-up process.

After the splicing style corresponding to each webpage icon is generated, a plurality of splicing styles corresponding to the plurality of webpage icons may be stored in the same file, so as to obtain the style file. By generating a style file according to the splicing style corresponding to the plurality of webpage icons, all the webpage icons can be loaded subsequently only by one style file without depending on other files, the problem that icon loading can be completed only by introducing a font system in the related technology is solved, and the system load is reduced.

After the style file is generated, each webpage icon may be loaded according to the style file. Specifically, referring to fig. 5, fig. 5 is a schematic flowchart illustrating a process of loading each webpage icon according to a style file in the embodiment of the present disclosure, where the process includes steps S501 to S502:

in step S501, a splicing style corresponding to the webpage icon is queried from the style file according to the acquired name of the webpage icon.

In this step, the name of the webpage icon added to the icon label may be acquired, and then, the splicing style corresponding to the webpage icon may be queried from the style file according to the name of the webpage icon. Therefore, the mode of the WebFont (webpage font) reference icon is reserved, so that the shape of the icon is similar to the font icon but not the font icon, the portability is high, and the invasiveness to the code is small.

It should be noted that after the splicing style corresponding to the webpage icon is queried, if the webpage icon is a monochrome icon, the background-color attribute in the splicing style can be changed according to the actual display requirement to change the display color of the webpage icon, or the background-size attribute in the splicing style can be changed according to the actual display requirement to change the display size of the webpage icon. If the webpage icon is a multi-color icon, the background-size attribute in the splicing style of the webpage icon can be changed according to the actual display requirement, so that the display size of the webpage icon can be changed.

Therefore, compared with the technical scheme that when a new color needs to be added to the icon in the prior art, the icon with the new color needs to be additionally made, the method and the device can conveniently and quickly modify the attributes of the icon such as the color, the size and the like, so that more use scenes can be conveniently expanded, the icon development efficiency is improved, and the development burden is reduced.

In step S502, the web page icon is loaded according to the splicing style.

In this step, after the splicing style corresponding to the webpage icon is obtained, the webpage icon may be loaded according to the splicing style.

In an optional implementation manner, after the style file is generated, an abstract syntax tree corresponding to the style file may be constructed, and further, when an icon change condition occurs for adding an icon, deleting an icon, or changing an icon, the abstract syntax tree may be directly updated according to the icon change condition, and the style file may be updated according to the updated abstract syntax tree, so as to avoid multiple requests and changes for the original style file. Specifically, referring to fig. 6, fig. 6 is a schematic flow chart illustrating how to update a style file in the embodiment of the present disclosure, and the method includes steps S601 to S603:

in step S601, an abstract syntax tree corresponding to the style file is constructed.

In this step, an Abstract Syntax Tree corresponding to the style file may be constructed, where the Abstract Syntax Tree is (Abstract Syntax Tree, AST), or Syntax Tree (Syntax Tree) for short, and is an Abstract representation of a source code Syntax structure. It represents the syntactic structure of the programming language in the form of a tree, each node on the tree representing a structure in the source code.

In step S602, in response to the icon change operation, the abstract syntax tree is updated according to the icon change operation.

In this step, if an icon change operation (adding an icon in the icon library, deleting an icon, or changing an icon) is detected, the abstract syntax tree may be updated according to the icon change operation. Specifically, the AST node corresponding to the changed icon may be searched for and updated. For example, when an operation of adding an icon newly occurs, a new node may be inserted at the bottom of the AST; when the icon deletion operation occurs, a node corresponding to the removed icon can be searched from the AST and the node can be deleted; when the change icon is operated, the node corresponding to the change icon can be searched from the AST and updated.

In step S603, a new style file is generated according to the updated abstract syntax tree, so as to load each webpage icon according to the new style file.

In this step, after the abstract syntax tree is updated, a new style file may be generated according to the updated abstract syntax tree, so as to subsequently load each webpage icon according to the new style file.

By constructing the abstract syntax tree, the style file is required to be read only when the icon is loaded for the first time, the style file is not required to be read in subsequent change operations such as addition, deletion and modification of the icon library, the CSS content related to the change operations can be directly processed on the AST, and new CSS files are generated in a unified manner after the processing is finished. By the method, the subsequent change operations do not need to read the style file, and only the content is directly written in the AST to generate a new style file, so that the reading times of the style file can be greatly reduced, and the subsequent file reading expense caused by updating of the icon library is reduced.

The present disclosure further provides a device for loading a webpage icon, and fig. 7 shows a schematic structural diagram of the device for loading a webpage icon in an exemplary embodiment of the present disclosure; as shown in fig. 7, the loading apparatus 700 of the webpage icon may include a type recognition module 710, a first rendering module 720, a derivative rendering module 730, and an icon loading module 740. Wherein:

the type identification module 710 is configured to determine a type of each webpage icon according to the obtained description codes of the plurality of webpage icons; the types of the webpage icons comprise monochrome icons and multi-color icons;

a first rendering module 720, configured to, when the webpage icon is a monochrome icon, generate a rendering style of the monochrome icon by using a first rendering rule;

a second rendering module 730, configured to, when the webpage icon is a multi-color icon, generate a rendering style of the multi-color icon by using a second rendering rule; the second rendering rule is different from the first rendering rule;

the icon loading module 740 is configured to generate a style file according to the rendering style of the plurality of webpage icons, so as to load each of the webpage icons according to the style file.

In an exemplary embodiment of the present disclosure, before determining a type of each of the plurality of web page icons according to the obtained description codes of the web page icons, the type identifying module 710 is configured to:

performing decoloring treatment on a single-color icon in the plurality of webpage icons; adjusting each webpage icon to a target size; and converting each webpage icon with the target size into an SVG format file, and storing the SVG format file into a pre-created target folder.

In an exemplary embodiment of the present disclosure, the type identification module 710 is configured to:

and analyzing the multiple SVG format files stored in the target folder to obtain the description codes of the multiple webpage icons.

matching color information of the webpage icon from the description code by using a regular expression; and determining the type of the webpage icon according to the color information of the webpage icon.

In an exemplary embodiment of the present disclosure, the color information of the webpage icon includes a plurality of color values corresponding to a plurality of pixel points of the webpage icon; a type identification module 710 configured to:

selecting a reference color value from the plurality of color values, and comparing whether the remaining color value is the same as the reference color value; the remaining color value is a color value of the plurality of color values other than the reference color value; if the residual color value is the same as the reference color value, determining that the webpage icon is a monochrome icon; and if the residual color value is different from the reference color value, determining that the webpage icon is a multi-color icon.

In an exemplary embodiment of the present disclosure, after obtaining the description codes of the plurality of web page icons, the type identifying module 710 is configured to:

compressing the description codes corresponding to the webpage icons; and carrying out Base64 encoding on the compressed description codes to obtain a Base64 file.

In an exemplary embodiment of the present disclosure, the first rendering module 720 is configured to:

setting the background color of the monochrome icon as the text color of the parent label; the parent label is a previous-level label of the label corresponding to the monochrome icon; generating a mask picture of the monochrome icon according to the Base64 file corresponding to the monochrome icon; setting the display attribute of the mask picture to be not repeated; setting the position attribute of the mask picture to be centered; and setting the size attribute of the mask picture to be scaled according to the size of the parent tag.

In an exemplary embodiment of the present disclosure, the second rendering module 730 is configured to:

generating a background picture according to the Base64 file corresponding to the multi-color icon; setting the background color of the multi-color icon to be transparent; setting a display attribute of the multi-colored icon to be non-repetitive; setting a position attribute of the multi-colored icon to be centered; setting a size attribute of the multi-colored icon to zoom following a parent label; the parent label is a previous-level label of the label corresponding to the multi-color icon.

In an exemplary embodiment of the present disclosure, the icon loading module 740 is configured to:

splicing the rendering style of each webpage icon to obtain a splicing style; and generating the style file according to a plurality of splicing styles corresponding to the plurality of webpage icons.

according to the obtained name of the webpage icon, inquiring a splicing style corresponding to the webpage icon from the style file; and loading the webpage icon according to the splicing style.

In an exemplary embodiment of the present disclosure, after generating the style file, the icon loading module 740 is configured to:

constructing an abstract syntax tree corresponding to the style file; in response to an icon change operation, updating the abstract syntax tree according to the icon change operation; the icon change operation includes any one of: adding, deleting or changing icons; and generating a new style file according to the updated abstract syntax tree so as to load each webpage icon according to the new style file.

The specific details of each module in the device for loading a webpage icon are described in detail in the method for loading a corresponding webpage icon, and therefore are not described herein again.

It should be noted that although in the above detailed description several modules or units of the device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functionality of two or more modules or units described above may be embodied in one module or unit, according to embodiments of the present disclosure. Conversely, the features and functions of one module or unit described above may be further divided into embodiments by a plurality of modules or units.

Moreover, although the steps of the methods of the present disclosure are depicted in the drawings in a particular order, this does not require or imply that the steps must be performed in this particular order, or that all of the depicted steps must be performed, to achieve desirable results. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step execution, and/or one step broken down into multiple step executions, etc.

Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein may be implemented by software, or by software in combination with necessary hardware. Therefore, the technical solution according to the embodiments of the present disclosure may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (which may be a CD-ROM, a usb disk, a removable hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which may be a personal computer, a server, a mobile terminal, or a network device, etc.) to execute the method according to the embodiments of the present disclosure.

The present application also provides a computer-readable storage medium, which may be contained in the electronic device described in the above embodiments; or may exist separately without being assembled into the electronic device.

A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

A computer readable storage medium may transmit, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable storage medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.

The computer readable storage medium carries one or more programs which, when executed by an electronic device, cause the electronic device to implement the method as described in the above embodiments.

In addition, the embodiment of the disclosure also provides electronic equipment capable of realizing the method.

As will be appreciated by one skilled in the art, aspects of the present disclosure may be embodied as a system, method or program product. Accordingly, various aspects of the present disclosure may be embodied in the form of: an entirely hardware embodiment, an entirely software embodiment (including firmware, microcode, etc.) or an embodiment combining hardware and software aspects that may all generally be referred to herein as a "circuit," module "or" system.

An electronic device 800 according to this embodiment of the disclosure is described below with reference to fig. 8. The electronic device 800 shown in fig. 8 is only an example and should not bring any limitations to the functionality and scope of use of the embodiments of the present disclosure.

As shown in fig. 8, electronic device 800 is in the form of a general purpose computing device. The components of the electronic device 800 may include, but are not limited to: the at least one processing unit 810, the at least one memory unit 820, a bus 830 connecting various system components (including the memory unit 820 and the processing unit 810), and a display unit 840.

Wherein the storage unit stores program code that is executable by the processing unit 810 to cause the processing unit 810 to perform steps according to various exemplary embodiments of the present disclosure as described in the "exemplary methods" section above in this specification. For example, the processing unit 810 may perform the following as shown in fig. 1: step S110, determining the type of each webpage icon according to the acquired description codes of the plurality of webpage icons; the types of the webpage icons comprise monochrome icons and multi-color icons; step S120, when the webpage icon is a monochromatic icon, generating a rendering style of the monochromatic icon by using a first rendering rule; step S130, when the webpage icon is a multi-color icon, generating a rendering style of the multi-color icon by using a second rendering rule; the second rendering rule is different from the first rendering rule; step S140, generating a style file according to the rendering styles of the plurality of webpage icons, and loading each webpage icon according to the style file.

The memory unit 820 may include readable media in the form of volatile memory units, such as a random access memory unit (RAM) 8201 and/or a cache memory unit 8202, and may further include a read only memory unit (ROM) 8203.

The storage unit 820 may also include a program/utility 8204 having a set (at least one) of program modules 8205, such program modules 8205 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which, or some combination thereof, may comprise an implementation of a network environment.

Bus 830 may be any of several types of bus structures including a memory unit bus or memory unit controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.

The electronic device 800 may also communicate with one or more external devices 900 (e.g., keyboard, pointing device, bluetooth device, etc.), with one or more devices that enable a user to interact with the electronic device 800, and/or with any devices (e.g., router, modem, etc.) that enable the electronic device 800 to communicate with one or more other computing devices. Such communication may occur via input/output (I/O) interfaces 850. Also, the electronic device 800 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the internet) via the network adapter 860. As shown, the network adapter 860 communicates with the other modules of the electronic device 800 via the bus 830. It should be understood that although not shown in the figures, other hardware and/or software modules may be used in conjunction with the electronic device 800, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, among others.

Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice in the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.

Claims

1. A method for loading a webpage icon is characterized by comprising the following steps:

determining the type of each webpage icon according to the acquired description codes of the plurality of webpage icons; the types of the webpage icons comprise monochrome icons and multi-color icons;

when the webpage icon is a monochrome icon, generating a rendering style of the monochrome icon by using a first rendering rule;

when the webpage icon is a multi-color icon, generating a rendering style of the multi-color icon by using a second rendering rule; the second rendering rule is different from the first rendering rule;

and generating a style file according to the rendering styles of the plurality of webpage icons so as to load each webpage icon according to the style file.

2. The method according to claim 1, wherein before determining the type of each webpage icon according to the description code of the acquired webpage icons, the method further comprises:

performing decoloring treatment on a single-color icon in the plurality of webpage icons;

adjusting each webpage icon to a target size;

and converting each webpage icon with the target size into an SVG format file, and storing the SVG format file into a pre-created target folder.

3. The method of claim 2, wherein the description code of the plurality of webpage icons is obtained by:

4. The method according to claim 2, wherein the determining the type of each webpage icon according to the obtained description codes of the plurality of webpage icons comprises:

matching color information of the webpage icon from the description code by using a regular expression;

and determining the type of the webpage icon according to the color information of the webpage icon.

5. The method of claim 1, wherein the color information of the webpage icon comprises a plurality of color values corresponding to a plurality of pixel points of the webpage icon;

determining the type of the webpage icon according to the color information comprises the following steps:

selecting a reference color value from the plurality of color values, and comparing whether the remaining color value is the same as the reference color value; the remaining color value is a color value of the plurality of color values other than the reference color value;

if the residual color value is the same as the reference color value, determining that the webpage icon is a monochrome icon;

and if the residual color value is different from the reference color value, determining that the webpage icon is a multi-color icon.

6. The method of claim 1, wherein after obtaining the description codes of the plurality of web page icons, the method further comprises:

compressing the description codes corresponding to the webpage icons;

and carrying out Base64 encoding on the compressed description codes to obtain a Base64 file.

7. The method according to any one of claims 1 to 6, wherein the generating the rendering style of the monochrome icon by using the first rendering rule comprises:

setting the background color of the monochrome icon as the text color of the parent label; the parent label is a previous-level label of the label corresponding to the monochrome icon;

generating a mask picture of the monochrome icon according to the Base64 file corresponding to the monochrome icon;

setting the display attribute of the mask picture to be not repeated;

setting the position attribute of the mask picture to be centered;

and setting the size attribute of the mask picture to be scaled according to the size of the parent tag.

8. The method of any of claims 1 to 6, wherein generating the rendering style for the multi-colored icon using the second rendering rule comprises:

generating a background picture according to the Base64 file corresponding to the multi-color icon;

setting the background color of the multi-color icon to be transparent;

setting a display attribute of the multi-colored icon to be non-repetitive;

setting a position attribute of the multi-colored icon to be centered;

setting a size attribute of the multi-colored icon to follow a parent label for zooming; the parent label is a previous-level label of the label corresponding to the multi-color icon.

9. The method of claim 1, wherein generating a style file according to the rendering style of the plurality of webpage icons comprises:

splicing the rendering style of each webpage icon to obtain a splicing style;

and generating the style file according to a plurality of splicing styles corresponding to the plurality of webpage icons.

10. The method of claim 9, wherein said loading each webpage icon according to the style file comprises:

according to the obtained name of the webpage icon, a splicing style corresponding to the webpage icon is inquired from the style file;

and loading the webpage icon according to the splicing style.

11. The method of claim 1, wherein after generating the style file, the method further comprises:

constructing an abstract syntax tree corresponding to the style file;

responding to icon change operation, and updating the abstract syntax tree according to the icon change operation; the icon change operation includes any one of: adding, deleting or changing icons;

and generating a new style file according to the updated abstract syntax tree so as to load each webpage icon according to the new style file.

12. An apparatus for loading a webpage icon, comprising:

the type identification module is used for determining the type of each webpage icon according to the acquired description codes of the plurality of webpage icons; the types of the webpage icons comprise monochrome icons and multi-color icons;

the first rendering module is used for generating a rendering style of the monochrome icon by utilizing a first rendering rule when the webpage icon is the monochrome icon;

the second rendering module is used for generating a rendering style of the multi-color icon by using a second rendering rule when the webpage icon is the multi-color icon; the second rendering rule is different from the first rendering rule;

and the icon loading module is used for generating a style file according to the rendering styles of the plurality of webpage icons so as to load each webpage icon according to the style file.

13. A computer storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the method of loading a web page icon according to any one of claims 1 to 11.

14. An electronic device, comprising:

a processor; and

a memory for storing executable instructions of the processor;

wherein the processor is configured to execute the loading method of the webpage icon according to any one of claims 1 to 11 by executing the executable instruction.