CN112749353A - 网页图标的处理方法和装置 - Google Patents

Abstract

本发明公开了一种网页图标的处理方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：获取图标代码数据；对所述图标代码数据进行编码，得到中间代码数据；对所述中间代码数据进行指定字符的替换操作；对替换操作后得到的代码进行补全处理。该实施方式因为采用对图标代码数据进行编码后进行指定字符的替换操作、并对替换操作后得到的代码进行补全处理的技术手段，所以克服了现有技术中对DataURI(可以在web页面中包含图片且无需任何额外的超文本传输协议请求的一类统一资源标识符)中SVG进行编码后增加数据量较多、影响用户体验的技术问题，进而达到使编码后增加的代码数据量较小的技术效果。

Description

网页图标的处理方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种网页图标的处理方法和装置。

背景技术

可缩放矢量图形(Scalable Vector Graphics，简称SVG)是目前网页中常用的一种图标解决方案。网页中使用SVG的一种常见场景是将SVG数据进行编码，通过DataURI(可以在web页面中包含图片且无需任何额外的超文本传输协议请求的一类统一资源标识符)方式使用，则可以节省一个超文本传输协议请求。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

现有技术中使用Base64编码方式或URL编码方式对DataURI中SVG进行编码，由于原始数据中常常会包含较多的空格符、双引号符等需要编码的字符，所以编码之后增加的数据量往往较多，这将会对加载速度、流量消耗和图形渲染都带来负面影响，进而影响用户体验。

发明内容

有鉴于此，本发明实施例提供一种网页图标的处理方法和装置，能够解决现有技术中对DataURI中SVG进行编码后增加数据量较多、增加流量消耗、加载慢、影响用户体验的问题。

为实现上述目的，根据本发明实施例的一个方面，提供了一种网页图标的处理方法，包括：

获取图标代码数据；

对所述图标代码数据进行编码，得到中间代码数据；

对所述中间代码数据进行指定字符的替换操作；

对替换操作后得到的代码进行补全处理。

可选地，对所述图标代码数据进行编码的方式包括：

Java脚本语言中的统一资源标识符编码方法；或，Java脚本语言中的统一资源标识符组件编码方法。

可选地，对所述中间代码数据进行指定字符的替换操作，包括：

将所述中间代码数据中的“％20”转化为空格符。

可选地，对所述中间代码数据进行指定字符的替换操作，还包括：

将所述中间代码数据中的“％22”转化为单引号符。

可选地，在对所述图标代码数据进行编码之前，还包括：

将图标代码数据中的双引号转化为单引号。

可选地，对替换操作后得到的代码进行补全处理，包括：

为替换操作后得到的代码添加符合dataURI协议格式的前缀字符串。

根据本发明实施例的再一个方面，提供了一种网页图标的处理装置，包括：

获取模块，用于获取图标代码数据；

编码模块，用于对所述图标代码数据进行编码，得到中间代码数据；

替换模块，用于对所述中间代码数据进行指定字符的替换操作；

补全模块，用于对替换操作后得到的代码进行补全处理。

可选地，所述编码模块对所述图标代码数据进行编码的方式包括：

Java脚本语言中的统一资源标识符编码方法；或，Java脚本语言中的统一资源标识符组件编码方法。

可选地，所述替换模块对所述中间代码数据进行指定字符的替换操作，包括：

将所述中间代码数据中的“％20”转化为空格符。

可选地，所述替换模块对所述中间代码数据进行指定字符的替换操作，还包括：

将所述中间代码数据中的“％22”转化为单引号符。

可选地，在对所述图标代码数据进行编码之前，所述替换模块还用于：

将图标代码数据中的双引号转化为单引号。

可选地，所述补全模块对替换操作后得到的代码进行补全处理，包括：

为替换操作后得到的代码添加符合dataURI协议格式的前缀字符串。

根据本发明实施例的另一个方面，提供了一种网页图标的处理电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明提供的网页图标的处理方法。

根据本发明实施例的还一个方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明提供的网页图标的处理方法。

上述发明中的一个实施例具有如下优点或有益效果：因为采用对图标代码数据进行编码后进行指定字符的替换操作、并对替换操作后得到的代码进行补全处理的技术手段，所以克服了现有技术中对DataURI中SVG进行编码后增加数据量较多、影响用户体验的技术问题，进而达到使编码后增加的代码数据量较小的技术效果。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的一种网页图标的处理方法的主要流程的示意图；

图2是根据本发明实施例的一种网页图标的处理装置的主要模块的示意图；

图3是本发明实施例可以应用于其中的示例性***架构图；

图4是适于用来实现本发明实施例的终端设备或服务器的计算机***的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本发明实施例的一种网页图标的处理方法的主要流程的示意图，如图1所示，包括：

步骤S101、获取图标代码数据；

步骤S102、对所述图标代码数据进行编码，得到中间代码数据；

步骤S103、对所述中间代码数据进行指定字符的替换操作；

步骤S104、对替换操作后得到的代码进行补全处理。

所述图标代码数据可以是对原始图标代码进行过优化的、删减过冗余代码的数据。

本发明中的方法用于在包含SVG的网页被加载前，使用本发明中的方法对SVG图标代码数据进行编码，能够解决现有技术中对DataURI中SVG进行编码后增加数据量较多、增加流量消耗、加载慢、影响用户体验的问题，达到使编码后增加的代码数据量较小的技术效果。

在一些实施例中，对所述图标代码数据进行编码的方式包括：

Java脚本语言中的统一资源标识符编码方法；或，Java脚本语言中的统一资源标识符组件编码方法。

Java脚本语言中的统一资源标识符编码方法或统一资源标识符组件编码方法，是将字符串作为统一资源标识符进行编码的一种方法，适用于本发明中的需要对网页中SVG进行编码的场景。

在一些实施例中，对所述中间代码数据进行指定字符的替换操作，包括：

将所述中间代码数据中的“％20”转化为空格符。

对图标代码数据进行编码之后，会将其中的空格符转化为“％20”；

而由于在SVG图标代码中通常含有大量空格，所以对空格的编码是编码后数据量增大的一个重要因素；经过大量实验数据可知，不对DataURI中的空格进行编码，也不会对其的正常使用和浏览器兼容性产生影响；

因此，在网页加载前，先将中间代码数据中的“％20”转化回空格符，可以较大幅度地减少代码量，节省资源下载消耗、降低解码渲染工作量，进而提高下载速度，缩短整体加载时间。

在一些实施例中，对所述中间代码数据进行指定字符的替换操作，还包括：

将所述中间代码数据中的“％22”转化为单引号符。

对图标代码数据进行编码之后，会将其中的双引号符转化为“％22”；

由于在网页的编码过程中不会对单引号进行编码，而单引号与双引号的作用一致，故而，在网页加载前将中间代码数据中的“％22”转化为单引号符，也可以减少代码量、提高下载速度，缩短整体加载时间。

在一些实施例中，在对所述图标代码数据进行编码之前，还包括：

将图标代码数据中的双引号转化为单引号。

由于在网页的编码过程中不会对单引号进行编码，故也可以在对所述图标代码数据进行编码之前，先将图标代码数据中的双引号转化为单引号，进而达到减少代码量、提高下载速度，缩短整体加载时间的技术效果。

在一些实施例中，对替换操作后得到的代码进行补全处理，包括：

为替换操作后得到的代码添加符合dataURI协议格式的前缀字符串。

为了使上述处理猴得到的代码数据符合dataURI协议格式，需要为其添加前缀字符串：“data:image/svg+xml,”，该字符串可以用于指明被编码的数据类型，进而得到符合dataURI协议格式的dataURI代码数据；

在一些实施例中，为了将上述dataURI代码数据应用于网页中，可以将该dataURI代码数据放入超文本标记语言(html)代码<img src＝""/>的双引号中，用于在网页中***图片；或将该dataURI代码数据放入层叠样式表(css)代码background-image:url("")的双引号中，用于在网页中***背景图片；

其中，需要注意的是，为避免和本发明中未编码的SVG中的单引号相冲突，此处的<img src＝""/>与background-image:url("")中需要使用双引号进行包裹。

图2是根据本发明实施例的一种网页图标的处理装置的主要模块的示意图，如图2所示，网页图标的处理装置200包括：

获取模块201，用于获取图标代码数据；

编码模块202，用于对所述图标代码数据进行编码，得到中间代码数据；

替换模块203，用于对所述中间代码数据进行指定字符的替换操作；

补全模块204，用于对替换操作后得到的代码进行补全处理。

所述图标代码数据可以是对原始图标代码进行过优化的、删减过冗余代码的数据。

本发明中的方法用于在包含SVG的网页被加载前，使用本发明中的方法对SVG图标代码数据进行编码，能够解决现有技术中对DataURI中SVG进行编码后增加数据量较多、增加流量消耗、加载慢、影响用户体验的问题，达到使编码后增加的代码数据量较小的技术效果。

在一些实施例中，所述编码模块202对所述图标代码数据进行编码的方式包括：

Java脚本语言中的统一资源标识符编码方法；或，Java脚本语言中的统一资源标识符组件编码方法。

Java脚本语言中的统一资源标识符编码方法或统一资源标识符组件编码方法，是将字符串作为统一资源标识符进行编码的一种方法，适用于本发明中的需要对网页中SVG进行编码的场景。

在一些实施例中，所述替换模块203对所述中间代码数据进行指定字符的替换操作，包括：

将所述中间代码数据中的“％20”转化为空格符。

对图标代码数据进行编码之后，会将其中的空格符转化为“％20”；

而由于在SVG图标代码中通常含有大量空格，所以对空格的编码是编码后数据量增大的一个重要因素；经过大量实验数据可知，不对DataURI中的空格进行编码，也不会对其的正常使用和浏览器兼容性产生影响；

因此，在网页加载前，先将中间代码数据中的“％20”转化回空格符，可以较大幅度地减少代码量，节省资源下载消耗、降低解码渲染工作量，进而提高下载速度，缩短整体加载时间。

在一些实施例中，所述替换模块203对所述中间代码数据进行指定字符的替换操作，还包括：

将所述中间代码数据中的“％22”转化为单引号符。

对图标代码数据进行编码之后，会将其中的双引号符转化为“％22”；

由于在网页的加载解码过程中不会对单引号进行解码，而单引号与双引号的作用一致，故而，在网页加载前将中间代码数据中的“％22”转化为单引号符，也可以减少代码量提高下载速度，缩短整体加载时间。

在一些实施例中，在对所述图标代码数据进行编码之前，所述替换模块203还用于：

将图标代码数据中的双引号转化为单引号。

由于在网页的编码过程中不会对单引号进行编码，故也可以在对所述图标代码数据进行编码之前，先将图标代码数据中的双引号转化为单引号，进而达到减少代码量、提高下载速度，缩短整体加载时间的技术效果。

在一些实施例中，所述补全模块204对替换操作后得到的代码进行补全处理，包括：

为替换操作后得到的代码添加符合dataURI协议格式的前缀字符串。

为了使上述处理猴得到的代码数据符合dataURI协议格式，需要为其添加前缀字符串：“data:image/svg+xml,”，该字符串可以用于指明被编码的数据类型，进而得到符合dataURI协议格式的dataURI代码数据；

在一些实施例中，为了将上述dataURI代码数据应用于网页中，可以将该dataURI代码数据放入超文本标记语言(html)代码<img src＝""/>的双引号中，用于在网页中***图片；或将该dataURI代码数据放入层叠样式表(css)代码background-image:url("")的双引号中，用于在网页中***背景图片；

其中，需要注意的是，为避免和本发明中未编码的SVG中的单引号相冲突，此处的<img src＝""/>与background-image:url("")中需要使用双引号进行包裹。

图3示出了可以应用本发明实施例的网页图标的处理方法或网页图标的处理装置的示例性***架构300。

如图3所示，***架构300可以包括终端设备301、302、303，网络304和服务器305。网络304用以在终端设备301、302、303和服务器305之间提供通信链路的介质。网络304可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备301、302、303通过网络304与服务器305交互，以接收或发送消息等。终端设备301、302、303上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备301、302、303可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器305可以是提供各种服务的服务器，例如对用户利用终端设备301、302、303所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息--仅为示例)反馈给终端设备。

需要说明的是，本发明实施例所提供的网页图标的处理方法一般由服务器305执行，相应地，网页图标的处理装置一般设置于服务器305中。

应该理解，图3中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图4，其示出了适于用来实现本发明实施例的终端设备的计算机***400的结构示意图。图4示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图4所示，计算机***400包括中央处理单元(CPU)401，其可以根据存储在只读存储器(ROM)402中的程序或者从存储部分408加载到随机访问存储器(RAM)403中的程序而执行各种适当的动作和处理。在RAM 403中，还存储有***400操作所需的各种程序和数据。CPU 401、ROM 402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。

以下部件连接至I/O接口405：包括键盘、鼠标等的输入部分406；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分407；包括硬盘等的存储部分408；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分409。通信部分409经由诸如因特网的网络执行通信处理。驱动器410也根据需要连接至I/O接口405。可拆卸介质411，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器410上，以便于从其上读出的计算机程序根据需要被安装入存储部分408。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分409从网络上被下载和安装，和/或从可拆卸介质411被安装。在该计算机程序被中央处理单元(CPU)401执行时，执行本发明的***中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括获取模块、编码模块、替换模块和补全模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，发送模块还可以被描述为“向所连接的服务端发送图片获取请求的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：步骤S101、获取图标代码数据；步骤S102、对所述图标代码数据进行编码，得到中间代码数据；步骤S103、对所述中间代码数据进行指定字符的替换操作；步骤S104、对替换操作后得到的代码进行补全处理。

根据本发明实施例的技术方案，因为采用对图标代码数据进行编码后进行指定字符的替换操作、并对替换操作后得到的代码进行补全处理的技术手段，所以克服了现有技术中对DataURI中SVG进行编码后增加数据量较多、影响用户体验的技术问题，进而达到使编码后增加的代码数据量较小的技术效果。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (14)

1.一种网页图标的处理方法，其特征在于，包括：

获取图标代码数据；

对所述图标代码数据进行编码，得到中间代码数据；

对所述中间代码数据进行指定字符的替换操作；

对替换操作后得到的代码进行补全处理。

2.根据权利要求1所述的方法，其特征在于，对所述图标代码数据进行编码的方式包括：

Java脚本语言中的统一资源标识符编码方法；或，Java脚本语言中的统一资源标识符组件编码方法。

3.根据权利要求2所述的方法，其特征在于，对所述中间代码数据进行指定字符的替换操作，包括：

将所述中间代码数据中的“％20”转化为空格符。

4.根据权利要求2所述的方法，其特征在于，对所述中间代码数据进行指定字符的替换操作，还包括：

将所述中间代码数据中的“％22”转化为单引号符。

5.根据权利要求1-3所述的方法，其特征在于，在对所述图标代码数据进行编码之前，还包括：

将图标代码数据中的双引号转化为单引号。

6.根据权利要求1所述的方法，其特征在于，对替换操作后得到的代码进行补全处理，包括：

为替换操作后得到的代码添加符合dataURI协议格式的前缀字符串。

7.一种网页图标的处理装置，其特征在于，包括：

获取模块，用于获取图标代码数据；

编码模块，用于对所述图标代码数据进行编码，得到中间代码数据；

替换模块，用于对所述中间代码数据进行指定字符的替换操作；

补全模块，用于对替换操作后得到的代码进行补全处理。

8.根据权利要求7所述的装置，其特征在于，所述编码模块对所述图标代码数据进行编码的方式包括：

Java脚本语言中的统一资源标识符编码方法；或，Java脚本语言中的统一资源标识符组件编码方法。

9.根据权利要求8所述的装置，其特征在于，所述替换模块对所述中间代码数据进行指定字符的替换操作，包括：

将所述中间代码数据中的“％20”转化为空格符。

10.根据权利要求8所述的装置，其特征在于，所述替换模块对所述中间代码数据进行指定字符的替换操作，还包括：

将所述中间代码数据中的“％22”转化为单引号符。

11.根据权利要求7-9所述的装置，其特征在于，在对所述图标代码数据进行编码之前，所述替换模块还用于：

将图标代码数据中的双引号转化为单引号。

12.根据权利要求7所述的装置，其特征在于，所述补全模块对替换操作后得到的代码进行补全处理，包括：

为替换操作后得到的代码添加符合dataURI协议格式的前缀字符串。

13.一种网页图标的处理电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6中任一所述的方法。

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

Images