CN113656000B - 网页的处理方法和装置 - Google Patents

网页的处理方法和装置 Download PDF

Info

Publication number
CN113656000B
CN113656000B CN202110920289.9A CN202110920289A CN113656000B CN 113656000 B CN113656000 B CN 113656000B CN 202110920289 A CN202110920289 A CN 202110920289A CN 113656000 B CN113656000 B CN 113656000B
Authority
CN
China
Prior art keywords
collected
file
characters
target
source code
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202110920289.9A
Other languages
English (en)
Other versions
CN113656000A (zh
Inventor
胡富民
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Dajia Internet Information Technology Co Ltd
Original Assignee
Beijing Dajia Internet Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Dajia Internet Information Technology Co Ltd filed Critical Beijing Dajia Internet Information Technology Co Ltd
Priority to CN202110920289.9A priority Critical patent/CN113656000B/zh
Publication of CN113656000A publication Critical patent/CN113656000A/zh
Application granted granted Critical
Publication of CN113656000B publication Critical patent/CN113656000B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G06F8/24—Object-oriented
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/109—Font handling; Temporal or kinetic typography
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本公开关于一种网页的处理方法和装置。该方法包括：获取预先注册的模块打包插件的配置参数，其中，配置参数至少包括指定文件的文件路径，其中，指定文件用于存储目标字体下的全量文字；通过模块打包插件基于待处理网页的源代码识别出待收集文字，其中，待收集文字用于表示待处理网页中，需要转换为目标字体的文字；在指定文件所存储的全量文字中，对待收集文字进行匹配，得到目标字体子集，其中，目标字体子集包括目标字体下的待收集文字；在编译源代码的过程中，基于目标字体子集，在待处理网页中以目标字体显示文字。本方法解决了现有技术中使用自动化脚本进行子集化时，不同项目之间难以复用，导致开发效率较低的技术问题。

Description

网页的处理方法和装置
技术领域
本公开涉及计算机领域，尤其涉及一种网页的处理方法和装置。
背景技术
现代浏览器可以通过CSS规范的font-face规则，在网页中使用自定义中文字体。自定义中文字体是相对于跟随系统字体而言的。自定义中文字体可以使网页在各系统中保持一致的外观，丰富了网页的设计元素，如在武侠风格的网页设计中使用隶书、行书等中文字体，可以使网页观感更加统一，优化用户的浏览体验。但是由于中文字符数量远比拼音语言的字符数量多，在网页开发中给用户传输如此大的字体文件会使网页加载时间超长，导致用户体验受影响。
由于网页中实际出现的字符数量远远小于提供的相对全面的字符数量。因此在网页中使用自定义中文字体时，通常会收集需要用自定义字体的字符集，以此为准对自定义中文字体取子集，子集化后的中文字体单独保存成一个字体文件，在网页的CSS代码中引用子集化后的中文字体文件。通过取子集缩小自定义字体中的字符数量，从而减小文字体文件的大小，使展现网页所需的下载资源时间缩减到用户可接受范围内。
目前可以使用自动化脚本将调用font-spider生成字体子集、使用字体子集替换编译成品中的字体全集的过程整合进编译流程中，但由于不同的项目编译成品可能有区别，每个项目调用font-spider、替换字体文件的逻辑都不相同，整合进项目编译流程的自动化脚本需要逐个项目编写，因此可复用性差，从而降低了开发效率。
发明内容
本公开提供一种网页的处理方法和装置及系统，以至少解决相关技术中现有技术中使用自动化脚本进行子集化时，不同项目之间难以复用，导致开发效率较低的问题。本公开的技术方案如下：
根据本公开实施例的第一方面，提供一种网页的处理方法，包括：：获取预先注册的模块打包插件的配置参数，其中，配置参数至少包括指定文件的文件路径，其中，指定文件用于存储目标字体下的全量文字；通过模块打包插件基于待处理网页的源代码识别出待收集文字，其中，待收集文字用于表示待处理网页中，需要转换为目标字体的文字；在指定文件所存储的全量文字中，对待收集文字进行匹配，得到目标字体子集，其中，目标字体子集包括目标字体下的待收集文字；在编译源代码的过程中，基于目标字体子集，在待处理网页中以目标字体显示文字
作为一种可选的实施例，所述配置参数还包括待收集文字的文件目录，所述基于源代码识别出待收集文字的骤包括：确定属于预设文件类型的目标文件，其中，预设文件类型为待收集文字对应的文件类型；在编译源代码的过程中，在目标文件属于待收集文字的文件目录的情况下，调用与目标文件类型对应的读取模块，对目标文件的源代码进行识别，得到待收集文字。
作为一种可选的实施例，所述配置参数还包括待收集文字的文件目录，所述基于源代码识别出待收集文字的步骤包括：遍历待收集文字的文件目录，对待收集文字的文件目录中的源代码进行识别，得到待收集文字。
作为一种可选的实施例，所述对所述目标文件的源代码进行识别，得到所述待收集文字的步骤包括：通过预设的正则表达式匹配目标文件的源代码中的字符，得到待收集文字；其中，配置参数还包括指定的附加字符集，上述方法还包括：确定所述指定的附加字符集为所述待收集文字。
作为一种可选的实施例，所述对所述目标文件的源代码进行识别，得到所述待收集文字的步骤包括：识别目标文件的源代码中预设的包裹字符；确定包裹字符之间的文字为待收集文字。
作为一种可选的实施例，基于当前时间信息生成第一哈希值，并确定第一哈希值为目标字体子集的文件名；或基于待收集文字生成第二哈希值，并确定第二哈希值为目标字体子集的文件名。
作为一种可选的实施例，所述在编译所述源代码的过程中，基于所述目标字体子集，在所述待处理网页中以所述目标字体显示文字的步骤包括：在编译所述源代码的过程中，通过所述目标字体子集替换所述待处理网页的初始字体文件；输出编译结果，其中，在执行所述编译结果时，所述待处理网页按照所述目标字体显示文字。
根据本公开实施例的第二方面，提供一种网页的处理装置，包括：获取单元，被配置为获取预先注册的模块打包插件的配置参数，其中，所述配置参数至少包括指定文件的文件路径，所述指定文件用于存储目标字体下的全量文字；识别单元，被配置为通过所述模块打包插件基于待处理网页的源代码识别出待收集文字，其中，所述待收集文字用于表示所述待处理网页中，需要转换为所述目标字体的文字；子集化单元，被配置为在所述指定文件所存储的所述全量文字中，对所述待收集文字进行匹配，得到目标字体子集，其中，所述目标字体子集包括所述目标字体下的所述待收集文字；显示单元，被配置为在编译所述源代码的过程中，基于所述目标字体子集，在所述待处理网页中以所述目标字体显示文字。
作为一种可选的实施例，所述配置参数还包括待收集文字的文件目录，识别单元包括：第一确定单元，被配置为确定属于预设文件类型的目标文件，其中，预设文件类型为待收集文字对应的文件类型；调用单元，被配置为在编译源代码的过程中，在目标文件属于待收集文字的文件目录的情况下，调用与目标文件类型对应的读取模块，对目标文件的源代码进行识别，得到待收集文字。
作为一种可选的实施例，所述配置参数还包括待收集文字的文件目录，识别单元包括：获取单元，被配置为遍历待收集文字的文件目录，对待收集文字的文件目录中的源代码进行识别，得到待收集文字。
作为一种可选的实施例，调用单元包括：匹配单元，被配置为通过预设的正则表达式匹配目标文件的源代码中的字符，得到待收集文字；其中，配置参数还包括指定的附加字符集，装置还还包括：添加单元，被配置为确定所述指定的附加字符集为所述待收集文字。
作为一种可选的实施例，第二确定包括：字符识别单元，被配置为识别目标文件的源代码中预设的包裹字符；第三确定单元，被配置为确定包裹字符之间的文字为待收集文字。
作为一种可选的实施例，上述装置还包括：第四确定单元，被配置为基于当前时间信息生成第一哈希值，并确定第一哈希值为目标字体子集的文件名；或第五确定单元，被配置为基于待收集文字生成第二哈希值，并确定第二哈希值为目标字体子集的文件名。
作为一种可选的实施例，所述显示单元包括：替换单元，被配置为在编译所述源代码的过程中，通过所述目标字体子集替换所述待处理网页的初始字体文件；输出单元，被配置为输出编译结果，其中，在执行所述编译结果时，所述待处理网页按照所述目标字体显示文字。
根据本公开实施例的第三方面，提供一种计算机可读存储介质，当计算机可读存储介质中的指令由服务器的处理器执行时，使得服务器能够执行上述的网页的处理方法。
根据本公开实施例的第四方面，提供一种计算机程序产品，包括计算机程序/指令，其特征在于，计算机程序/指令被处理器执行时实现上述的网页的处理方法。
本公开的实施例提供的技术方案至少带来以下有益效果：获取预先注册的模块打包插件的配置参数，其中，配置参数至少包括指定文件的文件路径，其中，指定文件用于存储目标字体下的全量文字；通过模块打包插件基于待处理网页的源代码识别出待收集文字，其中，待收集文字用于表示待处理网页中，需要转换为目标字体的文字；在指定文件所存储的全量文字中，对待收集文字进行匹配，得到目标字体子集，其中，目标字体子集包括目标字体下的待收集文字；在编译源代码的过程中，基于目标字体子集，在待处理网页中以目标字体显示文字。由于webpack plugin机制的通用性，上述方案可以在任意使用webpack工具的项目中运行，在新项目中的使用只需要注册webpack plugin以使其引用预先生成的子集化脚本，并设置配置参数以在编译配置中声明文件路径，即可在通过webpack对源代码进行编译的过程中实现对待处理网页的字体的转换，而解决了现有技术中使用自动化脚本进行子集化时，不同项目之间难以复用，导致开发效率较低的技术问题，且由于这一过程是在编译过程中进行的，而并不对编译后的成品代码进行修改，因此对原有项目的源代码开发-编译–部署上线的流程无影响。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。
图1是根据一示例性实施例示出的一种网页的处理方法的流程图。
图2是根据一示例性实施例示出的一种网页的处理装置框图。
图3是根据一示例性实施例示出的一种用于电子设备800的框图。
首先，对下述实施例中出现的专业名词进行解释：
HTML(HyperText Markup Language)：超文本标记语言，是一种用于创建网页的标准标记语言，运行在浏览器上，由浏览器来解析。
CSS(Cascading Style Sheets)：是一种样式表语言，用来描述HTML文档的呈现。CSS描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
JS(JavaScript)：一种编程语言，在大部分浏览器中可以被执行。
URL(Uniform Resource Locator)：统一资源定位器是因特网上标准的资源的地址。
CDN(Content Delivery Network)：内容分发网络是指一种透过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
相关技术中，已有多种字体子集化的工具，如基于Python语言的fonttools，基于JS语言的glyphhanger、fontmin、font-carrier等，但是缺少为开发者提供的完整的自动化方案。例如，基于fontmin的font-spider爬取方案，fontmin是一个可以进行字体子集化的工具类库。基于fontmin的字体子集化功能，相关技术提出了font-spider和font-spider-plus的自动化方案。其步骤包括：
1、开发者指定某个网页文件；
2、font-spider工具获取网页HTML代码；
3、font-spider-plus改进了获取逻辑，使用无头浏览器技术获取完全加载后的HTML代码，实现了对动态生成页面的解析；
4、font-spider工具遍历HTML代码中的文本节点，获取网页需要展示的字符集合；
5、font-spider获取CSS代码中定义的自定义字体文件；
6、font-spider给fontmin输入字符集合与字体文件，使用fontmin执行字体子集化操作，输出的子集化后的字体文件；
现代网页的开发流程通常为：源代码–编译得到成品代码–部署上线，其编译到上线步骤基本可以自动化完成。上述方案输入输出要求意味着开发者需要在编译得到成品代码和部署上线两步中插入上述步骤，从而对已有的开发流程造成了影响，进而会导致降低开发效率。针对上述问题，虽然可以使用自动化脚本将调用font-spider生成字体子集、使用字体子集替换编译成品中的字体全集的过程整合进编译流程中，但由于不同的项目编译成品可能有区别，每个项目调用font-spider、替换字体文件的逻辑都不相同，整合进项目编译流程的自动化脚本需要逐个项目编写，因此可复用性差。
进一步的，对于使用前端框架(如Vue)开发的网页项目，获取到的网页HTML代码中的文本节点可能不完整。以Vue框架为例，同一个网页中可能有页面切换操作，下一个页面的HTML节点在展示前不会被输出到HTML代码中，而是以JS代码的形式存在，从而使得字符集收集不完整，进而使部分使用自定义字体的字符无法正常展示。
基于上述问题，本申请提出了一种网页的处理方法，图1是根据一示例性实施例示出的一种网页的处理方法的流程图，如图1所示，该一种网页的处理方法用于网页开发中，包括以下步骤。
在步骤S11中，获取预先注册的模块打包插件的配置参数，其中，所述配置参数至少包括指定文件的文件路径，所述指定文件用于存储目标字体下的全量文字。
具体的，上述模块打包插件为webpack plugin。webpack是一个模块打包器，是一种可以在打包过程中增加自动化步骤的机制，它的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用。webpack将项目当做一个整体，通过一个给定的主文件(如：index.js)，找到项目的所有依赖其他文件，使用loaders处理它们，最后打包为一个(或多个)浏览器可识别的文件，例如JavaScript文件、CSS样式文件等。
上述方案在对源代码进行编译之前，可以通过webpack编译配置文件以注册模块打包插件，注册模块打包插件的目的在于，在对源代码进行编译的过程中，可以引用预先生成的子集化脚本，以实现下述的功能。
上述配置参数至少包括：指定文件的文件路径，该指定文件用于存储目标字体下的全量文字。具体的，目标字体是指需要在待处理页面中显示的字体，待收集文字可以是待处理页面中需要按照目标字体显示的文字。指定文件即为需要子集化的字体文件，其被作为字体资源使用。
在上述方案中，模块打包插件获取的配置参数与实际开发的业务相关，可以由开发人员输入得到，使用webpack plugin的模式可以在使用webpack的前端项目中复用，在新项目中的使用只需要在编译配置中引用本方案提供的子集化脚本，在编译配置中声明文件路径即可(即输入配置参数)。本方案提供的子集化脚本即用于实现下述的步骤。
在步骤S12中，通过所述模块打包插件基于待处理网页的源代码识别出待收集文字，其中，所述待收集文字用于表示所述待处理网页中，需要转换为所述目标字体的文字。
webpack作为前端项目自动化编译工具，其编译流程可以分为如下四个步骤：1、获取编译设置参数；2、遍历和获取源代码内容；3、整合源代码并准备输出内容；4、将输出内容写入磁盘文件中。该工具在各流程中的关键节点提供了事件和钩子函数，允许开发者编写webpack plugin，来实现在某个编译流程中的时间节点上运行自定义代码、调整编译结果的功能，利用以上功能，本方案可以在编译流程步骤2或在步骤2之前收集字符集，并在编译流程步骤3中进行目标字体子集和原本字体文件的替换工作。
在注册模块打包插件之后，首先可以先初始化模块打包插件，在内存中生成一个字符集合来存放上述步骤生成的待收集文字。
本申请上述实施例中，识别待收集文字时遍历了源代码，而不是遍历成品HTML文件，从而能够完整收集项目中的字符集，解决了相关技术不支持动态页面生成的问题。
在步骤S13中，在所述指定文件所存储的所述全量文字中，对所述待收集文字进行匹配，得到目标字体子集，其中，所述目标字体子集包括所述目标字体下的所述待收集文字。
具体的，可以通过调用预设的字体子集化工具，基于字符集合中的待收集文字，对文件路径指示的指定文件进行子集化处理，生成目标字体子集，上述字体子集化工具可以是font-carrier等。
在一种可选的实施例中，字体子集化工具根据文件路径确定指定文件，并在指定文件中，获取待收集文字对应的部分文字，构成目标字体子集。更具体的，将待收集文字和在编译配置文件中指定的需要子集化的字体文件(即上述指定文件)作为上述字体子集化工具的输入参数，调用字体子集化工具，即可得到精简后的字体文件内容(二进制文件流形式)，即上述目标字体子集。
在步骤S14中，在编译所述源代码的过程中，基于所述目标字体子集，在所述待处理网页中以所述目标字体显示文字。
具体的，可以在编译所述源代码的过程中，设置所述待处理网页中引用所述目标字体子集，从而使得待处理网页能够以目标字体显示文字。
由于这一过程是在编译流程中进行的，因此对原有项目的源代码开发-编译–部署上线的流程无影响。
由上可知，本申请上述实施例注册模块打包插件，并获取配置参数，其中，配置参数至少包括：待收集文字的文件目录和指定文件的文件路径；初始化模块打包插件，在内存中生成一个字符集合；基于源代码和待收集文字的文件目录识别出待收集文字，并将待收集文字存储至字符集合；调用预设的字体子集化工具，基于字符集合中的待收集文字，对文件路径指示的指定文件进行子集化处理，生成目标字体子集，其中，目标字体子集包括通过目标字体表示的待收集文字。由于webpack plugin机制的通用性，上述方案可以在任意使用webpack工具的项目中运行，在新项目中的使用只需要注册webpack plugin以使其引用预先生成的子集化脚本，并设置配置参数以在编译配置中声明文件路径，即可对待处理网页中文字的字体进行转换，解决了现有技术中使用自动化脚本进行子集化时，不同项目之间难以复用，导致开发效率较低的技术问题，且有这一过程是在源代码编译过程中进行的，而并不对编译后的成品代码进行修改，因此不影响原有项目的源代码开发-编译–部署上线的流程。
作为一种可选的实施例，所述配置参数还包括待收集文字的文件目录，所述基于源代码识别出待收集文字的步骤包括：步骤S131，确定属于预设文件类型的目标文件，其中，预设文件类型为待收集文字对应的文件类型；在编译源代码的过程中，在目标文件属于待收集文字的文件目录的情况下，调用与目标文件类型对应的读取模块，对目标文件的源代码进行识别，得到待收集文字。
在一种可选的实施例中，前端项目分成用户端和管理端这样的多入口，用户端和管理端用户通常不会重叠，因此用户端目录和管理端目录被分为两个独立模块，为了对用户端页面的文字进行子集化，收集中文字符集时应该只收集用户端字符，管理端所用字符可忽略，因此待收集文字的文件目录可以是用户端或者管理端代码的目录。在另一种可选的实施例中，前端项目没有划分用户端和管理端这样的多入口，则待收集文字的文件目录可以是项目的根目录。
上述步骤在webpack对源代码进行编译的过程中执行。具体的，待收集文件对应的文件类型是开发人员已知的文件类型，首先在源代码中找出预设文件类型的目标文件，从而通过与文件类型对应的loader(读取模块)对文件进行处理，从而识别出待收集文字。
在确定出目标文件后，还需要确定目标文件是否处于待收集文字的文件目录下，如果不处于待收集文字的文件目录下，则目标文件中的文字不为待收集文字，无需进行识别，仅在目标文件属于待收集文字的文件目录的情况下，才继续执行识别步骤。
在一种可选的实施例中，在webpack遍历源代码阶段进行收集字符集工作，在遍历源代码期间，webpack工具对一种或多种预设文件类型的目标文件会调用不同的读取模块(loader)来识别文件内容，loader也可以自定义。例如，预设文件类型为.js类型，可以调用一个识别.js文件的loader(可在webpack编译配置文件时指定)，向其输入源代码中的.js文件，如果.js处于编译参数中指定的待收集文字的文件目录下，则执行中文字符识别，并将获取到的字符存储于字符集合内。
作为一种可选的实施例，所述配置参数还包括待收集文字的文件目录，所述基于待处理网页的源代码识别出待收集文字的步骤包括：步骤S132，遍历待收集文字的文件目录，对待收集文字的文件目录中的源代码进行识别，得到待收集文字。
上述步骤在webpack编译源代码之前执行。在一种可选的实施例中，在webpack调用loader遍历源代码之前，先遍历编译配置中指定的文件夹，即上述待收集文字的文件目录，识别其中的中文字符，并将其存储于字符集合中。
所述对所述目标文件的源代码进行识别，得到所述待收集文字，可以具有如下两种方式：
在第一种方式中，所述对所述目标文件的源代码进行识别，得到所述待收集文字的步骤包括：通过预设的正则表达式匹配目标文件的源代码中的字符，得到待收集文字；其中，配置参数还包括指定的附加字符集，方法还包括：将指定的附加字符集添加至字符集合。
上述方案中，预设的正则表达式可以为“/\p{Unified_Ideograph}/ugm”，通过该预设的正则表达式即可在源代码中匹配出中文字符，即待收集文字。该方案的实现代码逻辑较为简单，但可能会遗漏和中文字符共用的阿拉伯数字、字母、标点符号等，因此需要在编译配置的附加字符中补充声明这些字符，即在配置参数内加上附加字符集(如阿拉伯数字的0-9这10个字符等)，并将附加字符集存储在字符集合中，即可得到完成的待收集文字。
在第二种方式中，所述对所述目标文件的源代码进行识别，得到所述待收集文字的步骤包括：识别目标文件的源代码中预设的包裹字符；确定包裹字符之间的文字为待收集文字。
在上述方案中，由于html文件中和js文件使用字符串的方式是通过双引号、单引号和形如<tag></tag>标签的形式包裹的。因此可以识别如上模式包裹的字符。该方案的实现代码较为复杂，但使用这种方式能获取的字符更加全面。
需要说明的是，对所述待收集文字的文件目录中的源代码进行识别，得到所述待收集文字，也可以使用上述两种方式，此处不再赘述。
为了区别文件名相同的字体文件(待收集文字所构成的文件)对应的目标字体子集，webpack遍历源代码阶段，字体文件作为源代码的一部分也会被读取到，此时webpack会调用字体相关的loader读取字体文件并给字体文件生成一个哈希值作为输出的目标字体子集的特征名(例如，源代码中字体文件的文件名为font.ttf，最终输出在磁盘上目标字体子集的文件名是font.hash01.ttf)。由于在源代码中的字体文件内容不会发生变化，但每一次部署生成的目标字体子集内容可能是不同的(例如，对同一个页面进行多种自定义字体的子集化)，如果按webpack默认逻辑，以原字体文件的文件特征值作为输出文件的文件名，则由于两次输出的文件名相同，用户浏览器可能会直接使用上一次请求到的字体文件而不去请求最新的字体文件，从而导致同名文件在部署上线时可能触发缓存问题。另外，如果前端项目的静态资源由CDN分发，CDN的节点更新不及时也会造成用户请求不到最新的字体文件。以上两种原因都会造成自定义字体字符集不全面导致字体样式展示异常。因此本发明还提供了两种修改文件名的方案：6作为一种可选的实施例，上述方法还包括：
步骤S15，基于当前时间信息生成第一哈希值，并确定第一哈希值为目标字体子集的文件名；或
步骤S16，基于待收集文字生成第二哈希值，并确定第二哈希值为目标字体子集的文件名。
具体的，上述步骤S15中，可以在通过webpack对源代码进行编译之前执行，直接使用当前时间戳产生一个第一哈希值，覆盖由字体原文件内容生成的哈希值，以使得每一次编译生成的目标字体子集的文件名都是全新的。
上述步骤S16中，根据识别得到的待收集文字生成第二哈希值。该第二哈希值与待收集文字相关，可以减少重复字体文件的生成。
需要注意的是，上述第一种方案在使用步骤S131和步骤S132识别待收集文字的情况下均可以使用；而上述第二种方案需要基于已经识别出的待收集文字进行，但步骤S131是在编译源代码的过程中执行的，也即在使用步骤S131识别待收集文字的情况下，在编译源代码前并没有获取到待收集文字，因此上述第二种方案仅可以在采用步骤S132识别待收集字体的情况下使用。
作为一种可选的实施例，所述在编译所述源代码的过程中，基于所述目标字体子集，在所述待处理网页中以所述目标字体显示文字的步骤包括：在编译所述源代码的过程中，通过所述目标字体子集替换所述待处理网页的初始字体文件；输出编译结果，其中，在执行所述编译结果时，所述待处理网页按照所述目标字体显示文字。
具体的，上述编译结果可以以二进制文件流的形式输出，编译结果输出至磁盘后，即可部署上线。
在上述方案中，在通过webpack plugin对待处理网页的源代码编译的过程中，将得到的目标字体子集覆盖待处理网页的初始字体文件，并通过webpack将编译结果写入磁盘的输出文件夹中。如果编译设置需要输出的目标字体子集的文件名携带特征值，则文件名中的哈希部分可以使用上述步骤S15或步骤S16所提供的方法得到。
通过本实施例所提供的子集化方案，在一用于测试的上线流程中，使用了两个自定义字体，其中，喜鹊招牌体由13.3Mb缩减到了231Kb，字魂225号-暮云手书由16.2Mb缩减到了59Kb，总压缩比例达到99.04％。不仅还原了网页的设计风格，同时使用户设备能在可容忍的加载时间范围内完整体验浏览效果。在开发测试过程中，由于中文字体子集化是自动执行的，因此文案的修改也不影响开发和测试流程。
图2是根据一示例性实施例示出的一种网页的处理装置框图。参照图2，该装置包括获取单元121，识别单元122、子集化单元123和显示单元124。
该获取单元121被配置为获取预先注册的模块打包插件的配置参数，其中，所述配置参数至少包括指定文件的文件路径，所述指定文件用于存储目标字体下的全量文字；
识别单元122被配置为通过所述模块打包插件基于待处理网页的源代码识别出待收集文字，其中，所述待收集文字用于表示所述待处理网页中，需要转换为所述目标字体的文字；
子集化单元123被配置为在所述指定文件所存储的所述全量文字中，对所述待收集文字进行匹配，得到目标字体子集，其中，所述目标字体子集包括所述目标字体下的所述待收集文字；
显示单元124被配置为在编译所述源代码的过程中，基于所述目标字体子集，在所述待处理网页中以所述目标字体显示文字。
作为一种可选的实施例，所述配置参数还包括待收集文字的文件目录，识别单元包括：第一确定单元，被配置为确定属于预设文件类型的目标文件，其中，预设文件类型为待收集文字对应的文件类型；调用单元，被配置为在编译源代码的过程中，在目标文件属于待收集文字的文件目录的情况下，调用与目标文件类型对应的读取模块，对目标文件的源代码进行识别，得到待收集文字。
作为一种可选的实施例，所述配置参数还包括待收集文字的文件目录，识别单元包括：获取单元，被配置为遍历待收集文字的文件目录，对待收集文字的文件目录中的源代码进行识别，得到待收集文字。
作为一种可选的实施例，调用单元包括：匹配单元，被配置为通过预设的正则表达式匹配目标文件的源代码中的字符，得到待收集文字；其中，配置参数还包括指定的附加字符集，装置还还包括：第二确定单元，被配置为确定所述指定的附加字符集为所述待收集文字。
作为一种可选的实施例，调用单元包括：字符识别单元，被配置为识别目标文件的源代码中预设的包裹字符；第三确定单元，被配置为确定包裹字符之间的文字为待收集文字。
作为一种可选的实施例，上述装置还包括：第四确定单元，被配置为基于当前时间信息生成第一哈希值，并确定第一哈希值为目标字体子集的文件名；或第五确定单元，被配置为基于待收集文字生成第二哈希值，并确定第二哈希值为目标字体子集的文件名。
作为一种可选的实施例，显示单元包括：替换单元，被配置为在编译所述源代码的过程中，通过所述目标字体子集替换所述待处理网页的初始字体文件；输出单元，被配置为输出编译结果，其中，在执行所述编译结果时，所述待处理网页按照所述目标字体显示文字。
关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
本申请还提供了一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现上述的网页的处理方法。
图3是根据一示例性实施例示出的一种用于电子设备800的框图。
在示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器804，上述指令可由电子设备800的处理器820执行以完成上述方法。可选地，计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
在示例性实施例中，还提供一种计算机程序产品，包括计算机程序/指令，其特征在于，所述计算机程序/指令被处理器执行时实现实施例1所述的网页的处理方法。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (14)

1.一种网页的处理方法，其特征在于，包括：
获取预先注册的模块打包插件的配置参数，其中，所述配置参数至少包括指定文件的文件路径，所述指定文件用于存储目标字体下的全量文字；
通过所述模块打包插件，基于待处理网页的源代码识别出待收集文字，其中，所述待收集文字用于表示所述待处理网页中，需要转换为所述目标字体的文字；
在所述指定文件所存储的所述全量文字中，对所述待收集文字进行匹配，得到目标字体子集，其中，所述目标字体子集包括所述目标字体下的所述待收集文字；
在编译所述源代码的过程中，基于所述目标字体子集，在所述待处理网页中以所述目标字体显示文字；
其中，所述配置参数还包括待收集文字的文件目录，所述基于待处理网页的源代码识别出待收集文字的步骤包括：
确定属于预设文件类型的目标文件，其中，所述预设文件类型为所述待收集文字对应的文件类型；
在编译所述源代码的过程中，在所述目标文件属于所述待收集文字的文件目录的情况下，调用与所述目标文件类型对应的读取模块，对所述目标文件的源代码进行识别，得到所述待收集文字。
2.根据权利要求1所述的网页的处理方法，其特征在于，所述配置参数还包括待收集文字的文件目录，所述基于待处理网页的源代码识别出待收集文字的步骤包括：
遍历所述待收集文字的文件目录，对所述待收集文字的文件目录中的源代码进行识别，得到所述待收集文字。
3.根据权利要求1所述的网页的处理方法，其特征在于，所述对所述目标文件的源代码进行识别，得到所述待收集文字的步骤包括：
通过预设的正则表达式匹配所述目标文件的源代码中的字符，得到所述待收集文字；
其中，所述配置参数还包括指定的附加字符集，所述方法还包括：确定所述指定的附加字符集为所述待收集文字。
4.根据权利要求1所述的网页的处理方法，其特征在于，所述对所述目标文件的源代码进行识别，得到所述待收集文字的步骤包括：
识别所述目标文件的源代码中预设的包裹字符；
确定所述包裹字符之间的文字为所述待收集文字。
5.根据权利要求1所述的网页的处理方法，其特征在于，所述方法还包括：
基于当前时间信息生成第一哈希值，并确定所述第一哈希值为所述目标字体子集的文件名；或
基于所述待收集文字生成第二哈希值，并确定所述第二哈希值为所述目标字体子集的文件名。
6.根据权利要求1所述的网页的处理方法，其特征在于，所述在编译所述源代码的过程中，基于所述目标字体子集，在所述待处理网页中以所述目标字体显示文字的步骤包括：
在编译所述源代码的过程中，通过所述目标字体子集替换所述待处理网页的初始字体文件；
输出编译结果，其中，在执行所述编译结果时，所述待处理网页按照所述目标字体显示文字。
7.一种网页的处理装置，其特征在于，包括：
获取单元，被配置为获取预先注册的模块打包插件的配置参数，其中，所述配置参数至少包括指定文件的文件路径，所述指定文件用于存储目标字体下的全量文字；
识别单元，被配置为通过所述模块打包插件基于待处理网页的源代码识别出待收集文字，其中，所述待收集文字用于表示所述待处理网页中，需要转换为所述目标字体的文字；
子集化单元，被配置为在所述指定文件所存储的所述全量文字中，对所述待收集文字进行匹配，得到目标字体子集，其中，所述目标字体子集包括所述目标字体下的所述待收集文字；
显示单元，被配置为在编译所述源代码的过程中，基于所述目标字体子集，在所述待处理网页中以所述目标字体显示文字；
其中，所述配置参数还包括待收集文字的文件目录，所述识别单元包括：
第一确定单元，被配置为确定属于预设文件类型的目标文件，其中，所述预设文件类型为所述待收集文字对应的文件类型；
调用单元，被配置为在编译所述源代码的过程中，在所述目标文件属于所述待收集文字的文件目录的情况下，调用与所述目标文件类型对应的读取模块，对所述目标文件的源代码进行识别，得到所述待收集文字。
8.根据权利要求7所述的网页的处理装置，其特征在于，所述配置参数还包括待收集文字的文件目录，所述识别单元包括：
获取单元，被配置为遍历所述待收集文字的文件目录，对所述待收集文字的文件目录中的源代码进行识别，得到所述待收集文字。
9.根据权利要求7所述的网页的处理装置，其特征在于，所述调用单元包括：
匹配单元，被配置为通过预设的正则表达式匹配所述目标文件的源代码中的字符，得到所述待收集文字；
其中，所述配置参数还包括指定的附加字符集，所述装置还包括：第二确定单元，被配置为确定所述指定的附加字符集为所述待收集文字。
10.根据权利要求7所述的网页的处理装置，其特征在于，所述调用单元包括：
字符识别单元，被配置为识别所述目标文件的源代码中预设的包裹字符；
第三确定单元，被配置为确定所述包裹字符之间的文字为所述待收集文字。
11.根据权利要求7所述的网页的处理装置，其特征在于，所述装置还包括：
第四确定单元，被配置为基于当前时间信息生成第一哈希值，并确定所述第一哈希值为所述目标字体子集的文件名；或
第五确定单元，被配置为基于所述待收集文字生成第二哈希值，并确定所述第二哈希值为所述目标字体子集的文件名。
12.根据权利要求7所述的网页的处理装置，其特征在于，所述显示单元包括：
替换单元，被配置为在编译所述源代码的过程中，通过所述目标字体子集替换所述待处理网页的初始字体文件；
输出单元，被配置为输出编译结果，其中，在执行所述编译结果时，所述待处理网页按照所述目标字体显示文字。
13.一种电子设备，其特征在于，包括：
处理器；
用于存储所述处理器可执行指令的存储器；
其中，所述处理器被配置为执行所述指令，以实现如权利要求1至6中任一项所述的网页的处理方法。
14.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由服务器的处理器执行时，使得服务器能够执行如权利要求1至6中任一项所述的网页的处理方法。
CN202110920289.9A 2021-08-11 2021-08-11 网页的处理方法和装置 Active CN113656000B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110920289.9A CN113656000B (zh) 2021-08-11 2021-08-11 网页的处理方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110920289.9A CN113656000B (zh) 2021-08-11 2021-08-11 网页的处理方法和装置

Publications (2)

Publication Number Publication Date
CN113656000A CN113656000A (zh) 2021-11-16
CN113656000B true CN113656000B (zh) 2024-01-09

Family

ID=78491424

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110920289.9A Active CN113656000B (zh) 2021-08-11 2021-08-11 网页的处理方法和装置

Country Status (1)

Country Link
CN (1) CN113656000B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117033672A (zh) * 2023-08-23 2023-11-10 北京饼干科技有限公司 幻灯片导出方法、装置及存储介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103761110A (zh) * 2014-02-18 2014-04-30 优视科技有限公司 浏览器字体显示处理方法和装置
CN106202422A (zh) * 2016-07-12 2016-12-07 腾讯科技（深圳）有限公司 网页图标的处理方法和装置
CN110309648A (zh) * 2018-03-20 2019-10-08 福建天泉教育科技有限公司 一种网页监控方法及终端
CN112016267A (zh) * 2020-08-05 2020-12-01 北京达佳互联信息技术有限公司 一种图标字体处理方法、装置及存储介质
CN112667246A (zh) * 2021-01-08 2021-04-16 深圳前海微众银行股份有限公司 应用功能扩展的方法、装置及电子设备
CN112685035A (zh) * 2020-12-25 2021-04-20 京东数字科技控股股份有限公司 项目开发方法及装置、计算机可读存储介质、电子设备
WO2021154496A1 (en) * 2020-01-31 2021-08-05 Salesforce.Com, Inc. User interface design update automation

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103761110A (zh) * 2014-02-18 2014-04-30 优视科技有限公司 浏览器字体显示处理方法和装置
CN106202422A (zh) * 2016-07-12 2016-12-07 腾讯科技（深圳）有限公司 网页图标的处理方法和装置
CN110309648A (zh) * 2018-03-20 2019-10-08 福建天泉教育科技有限公司 一种网页监控方法及终端
WO2021154496A1 (en) * 2020-01-31 2021-08-05 Salesforce.Com, Inc. User interface design update automation
CN112016267A (zh) * 2020-08-05 2020-12-01 北京达佳互联信息技术有限公司 一种图标字体处理方法、装置及存储介质
CN112685035A (zh) * 2020-12-25 2021-04-20 京东数字科技控股股份有限公司 项目开发方法及装置、计算机可读存储介质、电子设备
CN112667246A (zh) * 2021-01-08 2021-04-16 深圳前海微众银行股份有限公司 应用功能扩展的方法、装置及电子设备

Also Published As

Publication number Publication date
CN113656000A (zh) 2021-11-16

Similar Documents

Publication Publication Date Title
CN109508191B (zh) 一种代码生成方法及系统
KR100661393B1 (ko) 웹 프로그래밍 환경을 응용한 웹사이트 관리 시스템 및방법
US20080028302A1 (en) Method and apparatus for incrementally updating a web page
US20090100154A1 (en) Automatically instrumenting a set of web documents
EP1901179A1 (en) Document processing device, and document processing method
EP1818835A1 (en) Document processing device, and document processing method
US5940615A (en) Programming aid for enabling a computer program in source code form to be viewed using a general purpose document browser
US7130862B2 (en) Methods, systems and computer program prodcuts for validation of XML instance documents using Java classloaders
EP1830275A1 (en) Information distribution system
EP1250661A2 (en) A generalized system for automatically hyperlinking multimedia product documents
US20030020752A1 (en) Methods and systems for representing and accessing data
CN109710250B (zh) 一种用于构建用户界面的可视化引擎系统及方法
US20070258100A1 (en) Document Processing Device and Document Processing Method
CN111831384A (zh) 语言切换方法和装置、设备及存储介质
CN111797336A (zh) 一种网页解析方法、装置、电子设备及介质
Gottfried et al. Drawsocket: A browser based system for networked score display
CN113656000B (zh) 网页的处理方法和装置
US7802181B2 (en) Document processing device and document processing method
CN113836451A (zh) 网页访问方法、装置、计算机设备和存储介质
CN112016267A (zh) 一种图标字体处理方法、装置及存储介质
US20080005136A1 (en) Data Processing Device, Document Processing Device, and Document Processing Method
EP2901277A1 (en) Documentation parser
Stamey et al. The aspect-oriented web
US20070273936A1 (en) Document Processing Device, And Document Processing Method
US20080262832A1 (en) Document Processing Device, and Document Processing Method

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant