CN115221437A - 一种字体文件加载方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请提供一种字体文件加载方法、装置、电子设备和计算机可读存储介质，在该方法中先获取目标网站的源码文件和预设字体文件，将源码文件转换为抽象语法树，从抽象语法树的目标节点中提取静态文本，处理静态文本得到第一字符集，然后根据第一字符集和预设字体文件生成静态字体文件和动态字体文件，最后在浏览器的初始运行时间段加载静态字体文件和目标网站，在浏览器的第二运行时间段加载动态字体文件和目标网站，第二运行时间段在初始运行时间段之后。本申请提升了静态文本提取效率和提取完整度，且在不堵塞网站加载的同时实现了动态文本的个性化显示，即，本申请的字体文件加载方法适用场景较为广泛，在前端性能优化方面具有较大的优势。

Description

一种字体文件加载方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种字体文件加载方法、装置、电子设备及存储介质。

背景技术

浏览器中显示的各网页通常会包含数字、英文、汉字、符号等各类元素，各元素也会具有多种字体，各元素及对应的字体共同构成一个字体包，浏览器在运行时需先加载该字体包才能显示各网页上的文本内容。其中，由于汉字的数量本身较多，汉字的字体类型也较多，使得中文字体包的体积较大，在整个字体包中的体积占比也较高，则加载整个字体包的耗时较长，造成访问速度较慢，用户体验不佳。

针对此情况，当前采用字蛛方案来进行减包，具体为开发者先统计浏览器需要显示的所有页面，逐个页面找出需显示的静态文本，将这些静态文本复制到新建的HTML文件中，然后启动字蛛的脚本程序，字蛛以HTML文件为入口文件，扫描文件中所有中文字符并去除重复字符得到一个中文字符数组，再遍历预设中文字体包，依据上述数组里存在的中文字符，删除预设中文字体包里不存在的中文字符，最终只留下与数组里一致的中文字符，得到一个只包含指定中文字符的字体包，该字体包可以满足当前所有页面的静态文本显示需求，此方式可以大大减少所需加载的字体包体积，从而提高访问速度。然而，字蛛方案虽然可以通过压缩字体包的方式提升访问速度，但其存在需要人工进行静态文本提取效率较低、仅能支持特定类型文件的文本提取、无法支持动态文本显示等缺陷，使其在前端性能优化时适用场景较为受限。

发明内容

本申请实施例提供一种字体文件加载方法、装置、电子设备及存储介质，用以缓解现有字蛛方案适用场景受限的技术问题。

为解决上述技术问题，本申请实施例提供以下技术方案：

本申请提供一种字体文件加载方法，包括：

获取目标网站的源码文件和预设字体文件；

将所述源码文件转换为抽象语法树，从所述抽象语法树的目标节点中提取静态文本，处理所述静态文本得到第一字符集；

根据所述第一字符集和所述预设字体文件生成静态字体文件和动态字体文件；

在浏览器的初始运行时间段加载所述静态字体文件和所述目标网站，在所述浏览器的第二运行时间段加载所述动态字体文件，所述第二运行时间段在所述初始运行时间段之后。

同时，本申请实施例还提供了一种字体文件加载装置，包括：

获取模块，用于获取目标网站的源码文件和预设字体文件；

处理模块，用于将所述源码文件转换为抽象语法树，从所述抽象语法树的目标节点中提取静态文本，处理所述静态文本得到第一字符集；

生成模块，用于根据所述第一字符集和所述预设字体文件生成静态字体文件和动态字体文件；

加载模块，用于在浏览器的初始运行时间段加载所述静态字体文件和所述目标网站，在所述浏览器的第二运行时间段加载所述动态字体文件，所述第二运行时间段在所述初始运行时间段之后。

本申请还提供一种电子设备，包括存储器和处理器；所述存储器存储有应用程序，所述处理器用于运行所述存储器内的应用程序，以执行上述任一项所述的字体文件加载方法中的操作。

本申请实施例提供一种计算机可读存储介质，计算机可读存储介质存储有多条指令，指令适于处理器进行加载，以执行上述字体文件加载方法中的步骤。

本申请提供一种字体文件加载方法、装置、电子设备和计算机可读存储介质，在该方法中先获取目标网站的源码文件和预设字体文件，将源码文件转换为抽象语法树，从抽象语法树的目标节点中提取静态文本，处理静态文本得到第一字符集，然后根据第一字符集和预设字体文件生成静态字体文件和动态字体文件，最后在浏览器的初始运行时间段加载静态字体文件和目标网站，在浏览器的第二运行时间段加载动态字体文件和目标网站，第二运行时间段在初始运行时间段之后。本申请中通过将目标网站的源码文件转换成抽象语法树，可以直接从抽象语法树的各目标节点中提取静态文本，而不再需要人工逐个页面进行手动提取，因此提升了效率，且抽象语法树与源码文件的语言无关，提取静态文本时可对各类型源码文件均进行提取；此外，通过将原有的预设字体文件替换为静态字体文件和动态字体文件两部分，在浏览器初始运行时先加载静态字体文件，以保证网站具有较快的访问速度，在初始运行时间段过后再加载动态字体文件，以保证动态文本的正常显示，在不堵塞网站加载的同时也实现了动态文本的个性化显示，即，本申请的字体文件加载方法适用场景较为广泛，在前端性能优化方面具有较大的优势。

附图说明

下面结合附图，通过对本申请的具体实施方式详细描述，将使本申请的技术方案及其它有益效果显而易见。

图1为本申请实施例提供的字体文件加载方法的应用场景示意图。

图2为本申请实施例提供的字体文件加载方法的流程示意图。

图3为本申请实施例中HTML源码文件转换为AST的第一种示意图。

图4为本申请实施例中HTML源码文件转换为AST的第二种示意图。

图5为本申请实施例中CSS源码文件转换为AST的示意图。

图6为本申请实施例中JS源码文件转换为AST的示意图。

图7为本申请实施例中对第二字符去重处理时的逻辑示意图。

图8为本申请实施例中对第二字符进行分割和去重处理后得到第一字符的逻辑示意图。

图9为本申请实施例中建立动态文本与第一标识的第一对应关系的逻辑示意图。

图10为本申请实施例中建立动态文本与第二标识的第二对应关系的逻辑示意图。

图11为本申请实施例中加载动态字体文件过程的逻辑示意图。

图12为本申请实施例提供的字体文件加载装置的结构示意图。

图13为本申请实施例提供的电子设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请实施例提供一种字体文件加载方法、装置、电子设备和计算机可读存储介质，其中，该字体文件加载装置可以集成在电子设备中，该电子设备可以是服务器，也可以是终端等设备。

请参阅图1，图1为本申请实施例所提供的字体文件加载方法应用的场景示意图，该场景可以包括终端以及服务器，终端之间、服务器之间、以及终端与服务器之间通过各种网关组成的互联网等方式连接通信，其中，该应用场景中包括服务器11和客户端12；服务器11包括本地服务器和/或远程服务器等，客户端12为设置有浏览器并具备网页展示功能的设备。

服务器11和客户端12位于无线网络或有线网络中，以实现两者之间的数据交互，其中：

服务器11先获取目标网站中源码文件和预设字体文件，并将源码文件转换为抽象语法树，每个抽象语法树均包括至少一个目标节点，目标节点包括静态文本。然后，从各目标节点中提取静态文本并组合，并对组合后的各静态文本进行分割和去重等处理，得到多个单独且唯一的第一字符并生成第一字符集。接着，对第一字符集和预设字体文件中所有预设字符注册的预设字符集进行交集处理，根据处理结果，从预设字符集中确定位于交集的静态字符和位于非交集的动态字符，根据静态字符和静态字符的字体数据生成静态字体文件，根据动态字符和动态字符的字体数据生成动态字体文件。

在静态字体文件和动态字体文件生成后，当用户需要浏览目标网站中的某个网页时，需要先运行客户端12中的浏览器，然后在浏览器中加载初始页面进行显示。初始页面中需要显示文本，因此在初始运行时间段需要先加载字体文件，加载完后初始页面上的各类文本基于各自对应的字体文件进行显示。在浏览器初始运行时先加载静态字体文件和初始网页，则初始页面中的静态文本可基于静态字体文件得以正常显示，由于静态字体文件相对于预设字体文件体积较小，在初始运行时间段仅加载静态字体文件可以保证较快的访问速度。在初始运行时间段之后的第二运行时间段，再加载动态字体文件，由于动态字体文件中的动态字符可以涵盖各网页中的全部动态文本，则对于任意一个网页中的动态文本，均可以基于动态字体文件显示在浏览器的界面上。

需要说明的是，图1所示的系统场景示意图仅仅是一个示例，本申请实施例描述的服务器以及场景是为了更加清楚地说明本申请实施例的技术方案，并不构成对于本申请实施例提供的技术方案的限定，本领域普通技术人员可知，随着系统的演变和新业务场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。以下分别进行详细说明。需说明的是，以下实施例的描述顺序不作为对实施例优选顺序的限定。

在本申请实施例中，请参阅图2，图2是本申请实施例提供的字体文件加载方法的流程示意图，具体包括：

S201：获取目标网站的源码文件和预设字体文件。

网站是指在因特网上展示特定内容的网页集合，网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成，网页需要通过浏览器来显示供用户阅读，在本申请中，目标网站指可以在浏览器中展示的部分或所有网站，每个网站均包括至少一个网页，每个网页均具有源码文件，目标网站的源码文件包括各网页的源码文件。源码文件包括通过一定的语法规则使得该网页上的各元素可以在浏览器中进行显示的各类源码。网页中展示的各文本包括静态文本和动态文本，其中静态文本是指在网页展示过程中内容保持不变的文本，如网页中的各类控件名、功能分区名、超链接名等，需要在源码文件中进行提前设定；动态文本是指在网页展示过程中展示内容不固定的文本，如新闻、字幕、评论等，其对应的资源通常放在服务器中，当用户想要获取某个网页中的动态文本时，需要通过浏览器向服务器发送请求，服务器根据发送的请求传回相应的资源给浏览器，当用户请求的资源不同时，展示在网页中动态文本的内容也不同。由于静态文本为提前设定，其包括的字符是固定的，而对于动态文本，由于每次展示的文本不一定相同，则动态文本包括的字符是不固定的。

预设字体文件为存储有目标网站可能使用到的所有字符和字符对应字体的文件，这些所有字符均为预设字符。若项目的设置模式为中文字体文件、英文字体文件、数字字体文件等各类型字体文件单独存储和加载，则预设字体文件可以仅为中文字体文件，此时预设字符包括所有静态文本和所有动态文本可能使用到的中文字符。若项目的设置模式为中文字体文件、英文字体文件、数字字体文件等各类型字体文件作为一个整体进行存储和加载，则预设字体文件即为所有类型字体文件的组合，此时预设字符包括所有静态文本和所有动态文本可能使用到的中文字符、英文字符、数字字符等各类字符。字体是各字符的外观载体，用于描述各字符的几何形状信息，各字符需要通过选定的字体才能以具体的外形展示在网页上，字体可包括宋体、楷体、幼圆等各类常规字体，还可以包括UI设计时新创建的特殊字体。对于预设字符中的每一个字符，均具有至少一种字体。

在一种实施例中，S201具体包括：获取源码文件包，通过读取目录函数扫描源码文件包，得到至少一种目标文件类型的源码文件。项目在开发完成后所有的源码在上线前会打包形成源码文件包，源码数据包中除了目标网站的源码文件外还包括其他的源码文件，本申请实施例中方案主要与网页中文本和字体相关，因此仅针对源码文件包中符合目标文件类型的源码文件，将其作为目标网站的源码文件。各源码文件的目标文件类型可以包括超文本标记语言(HTML)类型、层叠样式表(CSS)类型和脚本语言(JS)类型中的至少一种，因此源码文件也包括HTML源码文件、CSS源码文件以及JS源码文件中的至少一种。其中，HTML源码文件用于对网页进行描述，其决定网页的结构；CSS源码文件用于决定网页的表现样式；JS源码文件用于决定网页的行为。三种目标文件类型的源码文件中均可以包括静态文本，为便于说明，下述实施例中均以目标文件类型同时包括HTML类型、CSS类型和JS类型为例。

具体地，在提前设定目标文件类型为HTML类型、CSS类型和JS类型后，可以通过NodeJS的Fs模块的readdir函数扫描指定的前端项目源码输出文件夹的HTML/CSS/JS类型的源码文件，并将符合目标文件类型的源码文件按照文件类型进行分类，后续再对这些源码文件分别进行处理。

S202：将源码文件转换为抽象语法树，从抽象语法树的目标节点中提取静态文本，处理静态文本得到第一字符集。

抽象语法树简称AST，是源码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源码中的一种结构。AST不依赖于源码的具体语法，也不依赖于语言的细节，因此可以清晰地展示源码文件的相关逻辑。将源码文件转换为抽象语法树时，先将源码文件中的源码按照预定规则分割为多个代码块，然后将这些代码块转换成一个由元素嵌套所组成的代表了程序语法结构的树，得到AST。在AST中包括多个节点，当某个节点表示源码中的文本内容时，该节点为AST中的文本节点，网页中显示的文本可以包括多种语言类型，如中文、英文、日文、数字、标点符号等，则每个抽象语法树中的文本节点也可以包括中文文本节点、英文文本节点等，在本申请实施例中，目标节点是指目标语言类型文本对应的文本节点，目标语言类型可以是中文、英文、日文、数字、标点符号中的至少一种，由于中文字体文件的体积通常较大，本实施例中以目标语言类型为中文为例进行说明，则目标语言类型对应的目标节点为中文文本节点。根据源码文件的复杂程度不同，每个抽象语法树包括至少一个目标节点。

以目标节点为中文文本对应的节点为例，则目标节点的静态文本均由中文字符构成。将每个目标节点所包含的静态文本均从AST中提取出来并进行组合和处理，可以得到组成这些静态文本所需的多个单独且唯一的第一字符，这些单独的第一字符可以组成第一字符集，第一字符集为一个数组，各第一字符分别为该数组中的一个元素。

在一种实施例中，S202具体包括：获取至少一种目标文件类型的源码文件；通过抽象语法树转译器分别解析不同目标文件类型的源码文件，得到各类源码文件对应的抽象语法树；遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合；处理组合后的所有静态文本，得到多个唯一的第一字符，根据多个唯一的第一字符生成第一字符集。

在目标文件类型同时包括HTML类型、CSS类型和JS类型时，对于HTML类型的源码文件，通过抽象语法树转译器进行解析，可以得到该类型源码文件对应的抽象语法树，抽象语法树转译器可以是Posthtml、Postcss或Babel等，具体如图3和图4所示，其中左侧为HTML源码，右侧为AST。对于CSS类型的源码文件，通过抽象语法树转译器进行解析，可以得到该类型源码文件对应的抽象语法树，具体如图5所示，其中左侧为CSS源码，右侧为AST。对于JS类型的源码文件，通过抽象语法树转译器进行解析，可以得到该类型源码文件对应的抽象语法树，具体如图5所示，其中左侧为JS源码，右侧为AST。目标网站中所有网页均具有源码文件，每个源码文件均可以转换得到抽象语法树，对所有抽象语法树上目标节点进行静态文本的遍历提取，可以得到目标网站的所有静态文本，将这些静态文本组合后进行处理，得到多个唯一第一字符，根据第一字符生成第一字符集。

在一种实施例中，遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合的步骤，包括：根据各源码文件的目标文件类型，确定各类抽象语法树的目标节点类型；根据目标节点类型，遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合。不同目标文件类型下的源码文件，其转换后抽象语法树中目标节点类型也不同，因此需要先确定该类型源码文件对应的目标节点类型，才能确定转换后的抽象语法树中哪些节点为目标节点，最后才能提取静态文本并组合。

在HTML源码中，目标节点类型为Text，在CSS源码中，目标节点类型为CSSStyleDeclaration，在JS源码中，目标节点类型为Literal。如图3和图4所示，HTML源码中〈button id＝"login-btn"〉登录〈/button〉表示网页中存在一个id为“登录”的按钮，其可以转换为AST中的一个目标节点，该目标节点的内容如图3中阴影部分所示，〈button id＝"login-btn"〉注册〈/button〉表示网页中存在一个id为“注册”的按钮，其也可以转换为AST中的一个目标节点，该目标节点的内容如图4中阴影部分所示。如图5所示，CSS源码中color：#66f；content："修改图像"可以转换为AST中的一个目标节点，该目标节点的内容如图5中阴影部分所示。如图6所示，JS源码中bin.innerText＝"修改昵称"可以转换为AST中的一个目标节点，该目标节点为Literal节点，该目标节点的内容如图6中阴影部分所示。

在一种实施例中，从多个目标节点中提取静态文本的步骤，包括：新建空字符串；遍历抽象语法树的目标节点，读取各目标节点的节点值并依次添加至空字符串中。对图3和图4所示的HTML源码文件，先新建空字符串A，然后遍历HTML源码文件对应的AST中的各Text节点，读取Text节点的value值，也即静态文本，将各静态文本依次追加到A中。例如，遍历AST时首先拿到“登录”，则将“登录”追加到A里，最后A就是“登录”；第二次拿到“注册”，则将“注册”追加到A里，最后A就是“登录注册”，依次类推，拿到的内容越多，A被追加的内容就越多。对图5所示的CSS源码文件，遍历CSS源码文件对应的AST中的各CSSStyleDeclaration节点，读取CSSStyleDeclaration节点的content值(若存在)，也即静态文本，将各静态文本依次追加到A中，追加方式与Text节点类似。对图6所示的JS源码文件，遍历JS源码文件对应的AST中的各Literal节点，读取Literal节点的value值，也即静态文本，将各静态文本依次追加到A中，追加方式与Text节点类似。

在新建A后，通过上述方式依次将各AST的目标节点的静态文本追加至A中，从而得到目标网站中所有网页的静态文本。

在一种实施例中，处理组合后的所有静态文本，得到多个唯一的第一字符，根据多个唯一的第一字符生成第一字符集的步骤，包括：对组合后的所有静态文本进行分割，得到组成各静态文本的多个第二字符，根据多个第二字符生成第二字符集；对第二字符集中各第二字符进行去重处理，得到多个唯一的第一字符，根据多个唯一的第一字符得到第一字符集。

从各目标节点中提取到静态文本后进行组合，由于各静态样本中可能存在相同的字符，因此需要先将所有的静态文本先以单个字符为单位进行分割，得到多个独立的第二字符，并生成第二字符集，第二字符集为数组，各第二字符分别为该数组中的一个元素。然后，对这些第二字符进行去重处理，删除重复的第二字符，剩下的第二字符即为独立且唯一的第一字符，去重处理后的第二字符集则作为第一字符集。

在一种实施例中，设第二字符集包括n个第二字符，n为大于1的整数，对第二字符集中各第二字符进行去重处理，得到多个唯一的第一字符，根据多个唯一的第一字符生成第一字符集的步骤，包括：按照预设顺序，依次将第二字符集中第i个第二字符作为目标第二字符，对每一目标第二字符，将位于目标第二字符之后的各第二字符与目标第二字符进行一次遍历对比，并将与目标第二字符相同的第二字符从第二字符集中删除，i为整数且0≤i≤n-2；经过n-1次遍历对比操作和对应的删除操作后，将第二字符集中剩余的第二字符作为第一字符，根据多个第一字符生成第一字符集。

第二字符集为一个数组，其中的各第二字符按照一定的顺序排列，该顺序可以与各AST节点的静态文本提取顺序相同，也可以是提取完成后按照预设规则对各第二字符进行重排列的顺序。按照该顺序，当第二字符集中包括n个第二字符时，n个第二字符依次为第二字符集中的第0、第1、第2、...、第n-1个元素。首先设置目标第二字符的位置i＝0，即将第0个第二字符作为目标第二字符，将位于其后的n-2个第二字符依次与第0个第二字符进行对比，n-2次对比作为一次遍历对比操作。在每次对比时，若某个第二字符与第0个第二字符为相同的字符，则将前者删除，同时将A的长度减1，若某个第二字符与第0个第二字符为不同字符，则继续将下一个第二字符与第0个第二字符进行对比，直至本次遍历结束，得到新的第二字符集。

然后，设置新的目标第二字符的位置i＝i+1，即将新的第二字符集中第1个第二字符作为目标第二字符，将位于其后的各第二字符依次与第0个第二字符进行对比，进行一次遍历对比操作和对应的删除操作。依次类推，直至完成n-1次遍历对比操作和对应的删除操作，此时剩余的每个第二字符均为单独且唯一的字符，再将这些第二字符作为第一字符，处理后的第二字符集作为第一字符集。

如图7所示，为完成上述遍历过程的相关逻辑。const arr＝str.split("")表示获取第二字符集中的每个元素；for(let i＝0，len＝arr.length；i<len；i++)表示获取当前元素后的每个元素；for(let i＝0，len＝arr.length；i<len；i++)表示判断两个元素的值是否相等；if(arr[i]＝＝＝arr[j])和arr.splice(j，1)表示如果相等就删除j位置的元素；j--表示每删除一个元素，j自减一，len--表示j减小时len相应减1，减少循环次数，节省性能。当然，图7中仅示出了遍历去重的其中一种实现方式，本领域的技术人员可根据需要，选择其他方式对第二字符集中进行去重操作。

设图3至图6中得到的静态文本集合为“登录注册修改头像修改头像”，如图8所示，在经过分割和去重处理后，最终得到的第一字符集为["登"，"录"，"注"，"册"，"修"，"改"，"头"，"像"]。

除了上述通过抽象语法树的方式自动提取静态文本外，也可以仍然手动筛选的方式从各类型的源码文件中获取静态文本，还可以同时采用自动提取和手动提取，即本申请在获取静态文本时可同时适配自动提取和手动提取两种模式，以尽可能提取到完整的静态文本。

S203：根据所述第一字符集和所述预设字体文件生成静态字体文件和动态字体文件。

第一字符集中的所有第一字符可以组合得到目标网站所有目标语言类型的静态文本，预设字符集中的所有预设字符可以组合得到目标网站中所有网页可能用到的文本，包括各种语言类型的静态文本和动态文本。将两者进行对比，可以对所有的预设字符进行分类，一类与第一字符相同，另一类与第一字符不同。与第一字符相同的这部分可以满足所有目标语言类型静态文本的显示需求，则根据预设字体文件，可以将这部分字符转换为静态字体文件，剩下的字符则转换为动态字符文件。

在一种实施例中，S203具体包括：提取预设字体文件中的多个预设字符，得到预设字符集；对第一字符集和预设字符集进行交集处理，根据处理结果，从预设字符集中确定位于交集的静态字符和位于非交集的动态字符；根据静态字符和预设字体文件生成静态字体文件，根据动态字符和预设字体文件生成动态字体文件。

将预设字体文件中的所有预设字体提取出，得到预设字符集，预设字符集也为数组，设第一字符集为X，预设字符集为Y，对X和Y求交集，则Y中的所有第二字符可以分为两部分，一部分位于两者交集中，另一部分不位于两者交集中，位于交集中的各第二字符为静态字符，位于非交集中的各第二字符为动态字符。将预设字符集中的所有动态字符删除，同时并将这些动态字符重新组合，并以预设字体文件中这些动态字符的字体为参照，对这些动态字符进行转换，可以得到动态字符集。预设字符集中剩余的所有静态字符形成静态字符集。以预设字体文件中这些静态字符对应的字体为参考，对这些静态字符进行转换，可以生成静态字体文件。该步骤可使用处理工具Fontmin来完成，Fontmin可根据指定的字符删除指定字符集里非指定的字符。

通过上述过程，原有的预设字体文件以静态字体文件和动态字体文件两部分作为替代存在，每类字体文件相对于预设字体文件，体积均得到压缩，静态字体文件可以满足目标网站中所有网页的静态文本显示，动态字体文件则可以满足目标网站中所有网页的动态文本显示。在该过程中，使用数组进行删除而不是采用预设字体文件直接删除，删除全程在进程内存中处理，不涉及到在预设字体文件中操作，整体性能比在文件中进行对比去重操作会更高更快，因此采用数组的方式更具优势，相关的减包压缩工具只需根据结果删除指定的未使用字符即可。

S204：在浏览器的初始运行时间段加载静态字体文件和目标网站，在浏览器的第二运行时间段加载动态字体文件，第二运行时间段在初始运行时间段之后。

网页需要通过浏览器来显示供用户阅读，浏览器在初始运行时间段会加载目标网站，具体为加载目标网站中的初始网页，初始页面可以是默认的网站主页面，也可以是用户选择的任何一个地址对应的网页，初始页面中需要显示静态文本，或者需要同时显示静态文本和动态文本，因此在初始运行时间段需要先加载字体文件，加载完后基于对应的字体文件对初始页面上的各类文本进行渲染显示。

在初始运行时间段，先加载静态字体文件，由于静态字体文件中的静态字符可以涵盖各网页中的全部静态文本，无论初始网页是哪一个，初始网页中的静态文本均可以基于静态字体文件显示在浏览器的界面上，从而保证了初始网页的正常显示。在初始运行时间段之后的第二运行时间段，再加载动态字体文件，由于动态字体文件中的动态字符可以涵盖各网页中的全部动态文本，则对于任意一个网页中的动态文本，均可以基于动态字体文件显示在浏览器的界面上。

在一种实施例中，S204具体包括：在浏览器的初始运行时间段加载静态字体文件和目标网站中的初始网页；在静态字体文件加载完成后，基于静态字体文件显示初始网页中的静态文本，基于浏览器的默认字体文件显示初始网页中的动态文本；在初始网页加载成功后，在浏览器的第二运行时间段加载动态字体文件，基于动态字体文件显示目标网站中各网页的动态文本。对于初始网页，当其同时包括静态文本和动态文本时，静态文本可以基于在初始运行时间段加载的静态字体文件进行显示，而动态文本则基于浏览器的默认字体文件进行显示，浏览器的默认字体文件在浏览器的任意运行时间段内均不需要加载，可以直接使用，因此保证了初始网页上动态文本的正常显示。而在初始网页加载成功后，再在浏览器的第二运行时间段加载动态字体文件，使得初始网页及后续可能加载的其他网页中的动态文本均基于动态字体文件进行显示。

在一种实施例中，基于浏览器的默认字体文件显示初始网页中的动态文本的步骤，包括：响应于动态文本的显示请求，获取目标网站中所有动态文本的类名，并获取类名和默认字体文件的第一标识之间的第一对应关系；根据第一对应关系，调用默认字体文件，并基于默认字体文件显示动态文本。

不同浏览器对使用字体文件的加载时机和处理方式上存在很大差异，为了让它们在处理动态文本上保持一致性，先统一在各网页的CSS源码文件中对需要使用动态字体文件的所有动态文本添加固定类名，同时，为默认字体文件设置第一标识，第一标识可以是默认字体文件的预设名称，为动态字体文件设置第二标识，第二标识可以是动态字体文件的预设名称，然后先将类名对应的字体类型设置为第一标识，即在类名与第一标识之间建立第一对应关系，则在初始运行时间段，服务器响应于动态文本的显示请求，会先获取目标网站中所有动态文本的类名，然后通过该类名获取第一对应关系，从而确定此刻动态文本所需的字体文件的类型为默认字体文件，最后才能调用默认字体文件，并基于默认字体文件显示动态文本。

具体地，如图9所示，添加的类名可以为“.dynamic-text”，第一标识可以是“PingFang SC，Microsoft YaHei，sans-serif”等，在图9中可以将该类名的字体类型设置为第一标识，还可以对第一标识对应的字体的字体宽度、字体尺寸、去除文字锯齿等信息进行设置，如设置字体宽度(font-weight)为常规(normal)，字体尺寸(font-size)为14px，设置在Chrome浏览器或Firefox浏览器中去除文字锯齿等。如图10所示，第二标识可以是“Dynamic Text”，在图10中同样可以对第二标识对应的字体的字体宽度、字体尺寸、去除文字锯齿等信息进行设置。

在一种实施例中，在初始网页加载成功后，在浏览器的第二运行时间段加载动态字体文件的步骤，包括：监听初始网页的加载状态；在初始网页加载成功后，创建script标签，并在第二运行时间段通过script标签加载动态字体文件。

如果在浏览器的初始运行时间段就加载动态字体文件，会阻塞初始网页的加载速度，因此需要将其加载时机进行调整，使其在初始网页加载完成后再加载，以避免阻塞。此时，先监听初始网页的加载状态，在初始网页加载成功后再动态创建一个script标签，然后在第二运行时间段通过该标签去加载动态字体文件。script标签用于从服务器端加载一段js脚本并在当前页面中执行，本申请实施例中在通过上述步骤得到动态字体文件后，可以将该文件托管到自有的服务器或CDN服务器中，并生成该文件的链接标记U，在创建script标签后，script标签通过U从服务器中获取动态字体文件的资源并进行加载。如图10所示，在CSS源码文件中动态字体文件的链接标记U为“https://xyz.com/font/dynamic-text.ttf”，则后续会通过该链接标记去获取动态字体文件。此外，由于初始运行时间段仅需加载默认字体文件，可以预先设定若不使用则不加载动态字体文件。

在一种实施例中，基于动态字体文件显示目标网站中各网页的动态文本的步骤，包括：监听动态字体文件的加载状态；若动态字体文件加载成功，断开类名和第一标识之间的第一对应关系，并建立类名和动态字体文件的第二标识之间的第二对应关系，根据第二对应关系调用动态字体文件，基于动态字体文件显示目标网站中各网页的动态文本。

在动态字体文件加载完成后，可以将动态文本的字体类型由默认字体文件的第一标识修改为动态字体文件的第二标识，则动态文本的显示字体将会由默认字体文件中的字体切换为动态字体文件中的字体，通过断开第一对应关系和建立第二对应关系的操作，实现了默认字体文件到动态字体文件的无缝切换，后续目标网站中所有网页的动态文本均可基于动态字体文件进行显示。通过上述方式可以保障动态文本的懒加载可行性，在不阻塞初始页面正常加载的情况下，通过延缓的方式将动态字体文件加载进来。

在一种实施例中，在监听动态字体文件的加载状态的步骤之后，还包括：若所述字体文件加载失败，维持类名和第一标识之间的第一对应关系，根据第一对应关系继续调用默认字体文件，并基于默认字体文件显示目标网站中各网页的动态文本。

对动态字体文件的加载状态进行监听时，如果加载成功可以由默认字体文件无缝切换至动态字体文件，而如果加载失败，为保证后续动态文本的正常显示，仍然继续维持第一对应关系，则后续各网页的动态文本仍然基于该默认字体文件进行显示。具体地，如图11所示，动态监听动态字体文件的加载状态，当动态字体文件加载完毕，将字体类型对应的第一标识更改为第二标识“Dynamic Text”，则动态文本基于动态字体文件进行显示，如果动态字体文件加载失败，则仍然保持第一标识“PingFang SC，Microsoft YaHei，sans-serif”，则动态文件仍然基于默认字体文件进行显示。同时，对于加载失败情况，还可以预先设置加载条件，如加载失败后再重新加载若干次，一旦加载成功则切换为动态字体文件，若加载若干次后仍然加载失败，则生成对应的加载失败信息，以便及时分析和解决该问题。

在浏览器的初始运行时间段，如果直接加载预设字体文件，由于预设字符为中文字符，中文字符的数量较多，字体也较多，使得预设字体文件的体积较大，加载预设字体文件需要较长时间，且会阻塞网页的加载速度。而在本申请中，由于预先处理将字体文件分为了静态字体文件和动态字体文件，在初始运行时间段仅加载静态字体文件，在第二运行时间段才加载动态字体文件，由于静态字体文件中的静态字符通常仅会占所以字符的一小部分，则静态字体文件的体积相对于预设字体文件的体积得到极大压缩，因此在初始运行时间段内，静态字体文件的加载速度和初始页面的加载速度均得到了有效提升，浏览器的访问速度加快，实现了对前端的性能优化。动态字体文件在之后的空闲时间段才加载，实现了字体文件的开源节流。

现有的字蛛方案中，虽然也采用提取静态文本的方法进行字体文件的减包处理，但在提取页面的静态文本时只能采用人工方式逐个网页进行处理，人工方式的时间成本随着网页数量增多会变得越重，且有可能存在遗漏的情况，准确性也不高。而在本申请中，通过将各网页的源码文件转换成抽象语法树，提取所有页面的静态文本均通过自动扫描的方式使用AST源码级别的解析获取，比常规方案的人工手动提取更具备速度、性能、成本和准确率的优势，可做到100％的匹配率将静态文本提取出来。

其次，在字蛛方案中，在逐个页面找出需显示的静态文本后，需要将这些静态文本复制到新建的HTML文件中，然后启动字蛛的脚本程序，字蛛以HTML文件为入口文件，扫描文件中所有中文字符并去除重复字符得到一个中文字符数组，再进行后续的减包处理。需要将静态文本复制到新建的HTML文件中是因为如果直接用字蛛程序提取网页中的静态文本，字蛛程度仅支持UTF8编码的HTML源码文件与CSS源码文件，不支持其他类型文件，且提取时在CSS源码文件下的content属性也仅支持文本形式与attr()形式，即直接使用字蛛程序进行提取的限制条件过多，容易造成静态文本提取不全或者出错。

而在本申请中，不直接从网页的源码文件中获取静态文本，而是先将源码文件转换为AST，再从AST的目标节点中提取静态文本。由于AST不依赖于源码的具体语法，也不依赖于语言的细节，仅清晰地展示源码文件的相关逻辑，因此不仅对于HTML类型、CSS类型和JS类型的文件均支持，对其他后端语言如Java/Python/Go等均有效，只需使用AST解析时从相关标记字段提取静态文本即可达到与上述实施例相同的技术效果，因此提取的限制条件放宽，扩充了不同开发语言实现字体压缩的可行性与可靠性。此外，由于是AST源码级别的解析，所以在CSS源码文件对应的AST上对content属性解析也更易捕获到相关的中文字符。

由于字蛛方案仅支持特定类型文件中静态文本的提取，因此字蛛程序只能处理前端页面的代码，而无法处理后端服务应用中采用其他语言编写的代码，使用场景较为单一，即使在前端领域里也只能用于单一开发模式，无法与主流前端框架或构建脚手架结合使用，整体植入性过低从而不利于使用，且字蛛方案需在低版本NodeJS环境里运行，目前大部分开发者都使用高版本的NodeJS，有些不符合开发主流。而在本申请中，由于采用与语言无关的AST转换的方式，无论对前端的源码还是后端的源码均适用，两者的原理相通，使得方案的适用场景更广阔，在前端领域里既能用于单一开发模式，也能与主流前端框架或构建脚手架结合使用。

另外，字蛛方案需要手动对源码文件进行直接操作，可能有对源码文件产生污染的风险。而在本申请中，整个处理过程在目标网站的相关项目构建打包之后，对打包后的源码文件仅需转换成AST，后续处理过程均针对AST进行，因此植入过程不会污染项目构建打包的过程，也不存在因为植入本申请的技术方案而导致构建打包增长。

最后，由于网页中的动态文本不在源码文件中，而是通过相关接口从服务器中获取并返回，此时由于字蛛方案为预先处理方式，减包后加载的字体文件仅包括从源码文件中提取的静态字符，对于从接口返回的这类动态插入的字符则无法支持，因此在字蛛方案中的动态文本只能采用浏览器默认的字体，无法显示UI设计中原本的字体样式，使得显示效果大打折扣。而在本申请中，静态字体文件可以支持各网页中的静态文本，而动态字体文件可以支持各网页中的动态文本，无论是静态文本还是动态文本均可以与原有UI设计时的字体相同，因此实现了个性化显示。

通过上述各实施例可知，本申请的字体文件加载方法可以解决当前字蛛方案的各类技术缺陷，适用场景较为广泛，在前端性能优化方面具有较大的优势。

相应地，如图12所示，本申请还提供一种字体文件加载装置，具体包括：

获取模块101，用于获取目标网站的源码文件和预设字体文件；

处理模块102，用于将源码文件转换为抽象语法树，从抽象语法树的目标节点中提取静态文本，处理静态文本得到第一字符集；

生成模块103，用于根据第一字符集和预设字体文件生成静态字体文件和动态字体文件；

加载模块104，用于在浏览器的初始运行时间段加载静态字体文件和目标网站，在浏览器的第二运行时间段加载动态字体文件，第二运行时间段在初始运行时间段之后。

在一种实施例中，处理模块102包括：

第一获取子模块，用于获取至少一种目标文件类型的源码文件；

解析子模块，用于通过抽象语法树转译器分别解析不同目标文件类型的源码文件，得到各类源码文件对应的抽象语法树；

第一提取子模块，用于遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合；

第一生成子模块，用于处理组合后的所有静态文本，得到多个唯一的第一字符，根据所述多个唯一的第一字符生成第一字符集。

在一种实施例中，第一提取子模块用于，根据各类源码文件的目标文件类型，确定各类抽象语法树的目标节点类型；根据目标节点类型，遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合。

在一种实施例中，第一生成子模块用于，对组合后的所有静态文本进行分割，得到组成各静态文本的多个第二字符，根据多个第二字符生成第二字符集；对第二字符集中各第二字符进行去重处理，得到多个唯一的第一字符，根据多个唯一的第一字符得到第一字符集。

在一种实施例中，生成模块103包括：

第二提取子模块，用于提取预设字体文件中的多个预设字符，得到预设字符集；

确定子模块，用于对第一字符集和预设字符集进行交集处理，根据处理结果，从预设字符集中确定位于交集的静态字符和位于非交集的动态字符；

第二生成子模块，用于根据静态字符和预设字体文件生成静态字体文件，根据动态字符和预设字体文件生成动态字体文件。

在一种实施例中，加载模块104包括：

加载子模块，用于在浏览器的初始运行时间段加载所述静态字体文件和所述目标网站中的初始网页；

第一显示子模块，用于在所述静态字体文件加载完成后，基于静态字体文件显示初始网页中的静态文本，基于浏览器的默认字体文件显示初始网页中的动态文本；

第二显示子模块，用于在初始网页加载成功后，在浏览器的第二运行时间段加载动态字体文件，基于动态字体文件显示目标网站中各网页的动态文本。

在一种实施例中，第一显示子模块用于，响应于动态文本的显示请求，获取目标网站中所有动态文本的类名，并获取类名和默认字体文件的第一标识之间的第一对应关系；根据第一对应关系，调用默认字体文件，并基于默认字体文件显示动态文本。

在一种实施例中，第二显示子模块用于，监听初始网页的加载状态；在初始网页加载成功后，创建script标签，并在第二运行时间段通过script标签加载动态字体文件。

在一种实施例中，第二显示子模块用于，监听动态字体文件的加载状态；若动态字体文件加载成功，断开类名和所述第一标识之间的第一对应关系，并建立类名和动态字体文件的第二标识之间的第二对应关系；根据第二对应关系，调用动态字体文件，基于动态字体文件显示目标网站中各网页的动态文本。

在一种实施例中，第二显示子模块还用于，若动态字体文件加载失败，维持类名和第一标识之间的第一对应关系，根据第一对应关系继续调用默认字体文件，并基于默认字体文件显示目标网站中各网页的动态文本。

本申请的字体文件加载装置，通过将目标网站的源码文件转换成抽象语法树，可以直接从抽象语法树的各目标节点中提取静态文本，而不再需要人工逐个页面进行手动提取，因此提升了效率，且抽象语法树与源码文件的语言无关，提取静态文本时可对各类型源码文件均进行提取；此外，通过将原有的预设字体文件替换为静态字体文件和动态字体文件两部分，在浏览器初始运行时先加载静态字体文件，以保证网站具有较快的访问速度，在初始运行时间段过后再加载动态字体文件，以保证动态文本的正常显示，在不堵塞网站加载的同时也实现了动态文本的个性化显示，即，本申请的字体文件加载装置适用场景较为广泛，在前端性能优化方面具有较大的优势。

相应的，本申请实施例还提供一种电子设备，如图13所示，该电子设备可以包括射频(RF，Radio Frequency)电路1301、包括有一个或一个以上计算机可读存储介质的存储器1302、输入单元1303、显示单元1304、传感器1305、音频电路1306、WiFi模块1307、包括有一个或者一个以上处理核心的处理器1308、以及电源1309等部件。本领域技术人员可以理解，图13中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

射频电路1301可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器1308处理；另外，将涉及上行的数据发送给基站。存储器1302可用于存储软件程序以及模块，处理器1308通过运行存储在存储器1302的软件程序以及模块，从而执行各种功能应用以及数据处理。输入单元1303可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

显示单元1304可用于显示由用户输入的信息或提供给用户的信息以及服务器的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。

电子设备还可包括至少一种传感器1305，比如光传感器、运动传感器以及其他传感器。音频电路1306包括扬声器，扬声器可提供用户与电子设备之间的音频接口。

WiFi属于短距离无线传输技术，电子设备通过WiFi模块1307可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图13示出了WiFi模块1307，但是可以理解的是，其并不属于电子设备的必须构成，完全可以根据需要在不改变申请的本质的范围内而省略。

处理器1308是电子设备的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器1302内的软件程序和/或模块，以及调用存储在存储器1302内的数据，执行电子设备的各种功能和处理数据，从而对手机进行整体监控。

电子设备还包括给各个部件供电的电源1309(比如电池)，优选的，电源可以通过电源管理系统与处理器1308逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

尽管未示出，电子设备还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，服务器中的处理器1308会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器1302中，并由处理器1308来运行存储在存储器1302中的应用程序，从而实现以下功能：

获取目标网站的源码文件和预设字体文件；

将源码文件转换为抽象语法树，从抽象语法树的目标节点中提取静态文本，处理静态文本得到第一字符集；

根据第一字符集和预设字体文件生成静态字体文件和动态字体文件；

在浏览器的初始运行时间段加载静态字体文件和所述目标网站，在浏览器的第二运行时间段加载动态字体文件，所述第二运行时间段在初始运行时间段之后。

在一种实施例中，可以实现功能：

获取至少一种目标文件类型的源码文件；

通过抽象语法树转译器分别解析不同目标文件类型的源码文件，得到各类源码文件对应的抽象语法树；

遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合；

处理组合后的所有静态文本，得到多个唯一的第一字符，根据多个唯一的第一字符生成第一字符集。

在一种实施例中，可以实现功能：

根据各类源码文件的目标文件类型，确定各类抽象语法树的目标节点类型；

根据目标节点类型，遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合。

在一种实施例中，可以实现功能：

对组合后的所有静态文本进行分割，得到组成各静态文本的多个第二字符，根据多个第二字符生成第二字符集；

对第二字符集中各第二字符进行去重处理，得到多个唯一的第一字符，根据多个唯一的第一字符得到第一字符集。

在一种实施例中，可以实现功能：

提取预设字体文件中的多个预设字符，得到预设字符集；

对第一字符集和预设字符集进行交集处理，根据处理结果，从预设字符集中确定位于交集的静态字符和位于非交集的动态字符；

根据静态字符和预设字体文件生成静态字体文件，根据动态字符和预设字体文件生成动态字体文件。

在一种实施例中，可以实现功能：

在浏览器的初始运行时间段加载静态字体文件和目标网站中的初始网页；

在静态字体文件加载完成后，基于静态字体文件显示初始网页中的静态文本，基于浏览器的默认字体文件显示初始网页中的动态文本；

在初始网页加载成功后，在浏览器的第二运行时间段加载动态字体文件，基于动态字体文件显示目标网站中各网页的动态文本。

在一种实施例中，可以实现功能：

响应于动态文本的显示请求，获取目标网站中所有动态文本的类名，并获取类名和默认字体文件的第一标识之间的第一对应关系；

根据第一对应关系，调用默认字体文件，并基于默认字体文件显示动态文本。

在一种实施例中，可以实现功能：

监听初始网页的加载状态；

在初始网页加载成功后，创建script标签，并在第二运行时间段通过script标签加载动态字体文件。

在一种实施例中，可以实现功能：

若动态字体文件加载失败，维持类名和第一标识之间的第一对应关系，根据第一对应关系继续调用默认字体文件，并基于默认字体文件显示目标网站中各网页的动态文本。

本申请的电子设备，通过将目标网站的源码文件转换成抽象语法树，可以直接从抽象语法树的各目标节点中提取静态文本，而不再需要人工逐个页面进行手动提取，因此提升了效率，且抽象语法树与源码文件的语言无关，提取静态文本时可对各类型源码文件均进行提取；此外，通过将原有的预设字体文件替换为静态字体文件和动态字体文件两部分，在浏览器初始运行时先加载静态字体文件，以保证网站具有较快的访问速度，在初始运行时间段过后再加载动态字体文件，以保证动态文本的正常显示，在不堵塞网站加载的同时也实现了动态文本的个性化显示，即，本申请的电子设备适用场景较为广泛，在前端性能优化方面具有较大的优势。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见上文的详细描述，此处不再赘述。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

为此，本申请实施例提供一种计算机可读存储介质，其中存储有多条指令，该指令能够被处理器进行加载，以实现以下功能：

获取目标网站的源码文件和预设字体文件；

将源码文件转换为抽象语法树，从抽象语法树的目标节点中提取静态文本，处理静态文本得到第一字符集；

根据第一字符集和预设字体文件生成静态字体文件和动态字体文件；

在浏览器的初始运行时间段加载静态字体文件和所述目标网站，在浏览器的第二运行时间段加载动态字体文件，所述第二运行时间段在初始运行时间段之后。

在一种实施例中，可以实现功能：

获取至少一种目标文件类型的源码文件；

通过抽象语法树转译器分别解析不同目标文件类型的源码文件，得到各类源码文件对应的抽象语法树；

遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合；

处理组合后的所有静态文本，得到多个唯一的第一字符，根据多个唯一的第一字符生成第一字符集。

在一种实施例中，可以实现功能：

根据各类源码文件的目标文件类型，确定各类抽象语法树的目标节点类型；

根据目标节点类型，遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合。

在一种实施例中，可以实现功能：

对组合后的所有静态文本进行分割，得到组成各静态文本的多个第二字符，根据多个第二字符生成第二字符集；

对第二字符集中各第二字符进行去重处理，得到多个唯一的第一字符，根据多个唯一的第一字符得到第一字符集。

在一种实施例中，可以实现功能：

提取预设字体文件中的多个预设字符，得到预设字符集；

对第一字符集和预设字符集进行交集处理，根据处理结果，从预设字符集中确定位于交集的静态字符和位于非交集的动态字符；

根据静态字符和预设字体文件生成静态字体文件，根据动态字符和预设字体文件生成动态字体文件。

在一种实施例中，可以实现功能：

在浏览器的初始运行时间段加载静态字体文件和目标网站中的初始网页；

在静态字体文件加载完成后，基于静态字体文件显示初始网页中的静态文本，基于浏览器的默认字体文件显示初始网页中的动态文本；

在初始网页加载成功后，在浏览器的第二运行时间段加载动态字体文件，基于动态字体文件显示目标网站中各网页的动态文本。

在一种实施例中，可以实现功能：

响应于动态文本的显示请求，获取目标网站中所有动态文本的类名，并获取类名和默认字体文件的第一标识之间的第一对应关系；

根据第一对应关系，调用默认字体文件，并基于默认字体文件显示动态文本。

在一种实施例中，可以实现功能：

监听初始网页的加载状态；

在初始网页加载成功后，创建script标签，并在第二运行时间段通过script标签加载动态字体文件。

在一种实施例中，可以实现功能：

若动态字体文件加载失败，维持类名和第一标识之间的第一对应关系，根据第一对应关系继续调用默认字体文件，并基于默认字体文件显示目标网站中各网页的动态文本。

本申请的计算机可读存储介质，通过将目标网站的源码文件转换成抽象语法树，可以直接从抽象语法树的各目标节点中提取静态文本，而不再需要人工逐个页面进行手动提取，因此提升了效率，且抽象语法树与源码文件的语言无关，提取静态文本时可对各类型源码文件均进行提取；此外，通过将原有的预设字体文件替换为静态字体文件和动态字体文件两部分，在浏览器初始运行时先加载静态字体文件，以保证网站具有较快的访问速度，在初始运行时间段过后再加载动态字体文件，以保证动态文本的正常显示，在不堵塞网站加载的同时也实现了动态文本的个性化显示，即，本申请的计算机可读存储介质适用场景较为广泛，在前端性能优化方面具有较大的优势。

以上对本申请实施例所提供的一种字体文件加载方法、装置、电子设备和计算机可读存储介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的技术方案及其核心思想；本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例的技术方案的范围。

Claims (13)

1.一种字体文件加载方法，其特征在于，包括：

获取目标网站的源码文件和预设字体文件；

将所述源码文件转换为抽象语法树，从所述抽象语法树的目标节点中提取静态文本，处理所述静态文本得到第一字符集；

根据所述第一字符集和所述预设字体文件生成静态字体文件和动态字体文件；

在浏览器的初始运行时间段加载所述静态字体文件和所述目标网站，在所述浏览器的第二运行时间段加载所述动态字体文件，所述第二运行时间段在所述初始运行时间段之后。

2.如权利要求1所述的字体文件加载方法，其特征在于，将所述源码文件转换为抽象语法树，从所述抽象语法树的目标节点中提取静态文本，处理所述静态文本得到第一字符集的步骤，包括：

获取至少一种目标文件类型的源码文件；

通过抽象语法树转译器分别解析不同目标文件类型的源码文件，得到各类源码文件对应的抽象语法树；

遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合；

处理组合后的所有静态文本，得到多个唯一的第一字符，根据所述多个唯一的第一字符生成第一字符集。

3.如权利要求2所述的字体文件加载方法，其特征在于，遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合的步骤，包括：

根据各类源码文件的目标文件类型，确定各类抽象语法树的目标节点类型；

根据所述目标节点类型，遍历所有抽象语法树的目标节点，从各目标节点中提取静态文本并组合。

4.如权利要求2所述的字体文件加载方法，其特征在于，处理组合后的所有静态文本，得到多个唯一的第一字符，根据所述多个唯一的第一字符生成第一字符集的步骤，包括：

对组合后的所有静态文本进行分割，得到组成各静态文本的多个第二字符，根据所述多个第二字符生成第二字符集；

对所述第二字符集中各第二字符进行去重处理，得到多个唯一的第一字符，根据所述多个唯一的第一字符得到第一字符集。

5.如权利要求1所述的字体文件加载方法，其特征在于，根据所述第一字符集和所述预设字体文件生成静态字体文件和动态字体文件的步骤，包括：

提取所述预设字体文件中的多个预设字符，得到预设字符集；

对所述第一字符集和所述预设字符集进行交集处理，根据处理结果，从所述预设字符集中确定位于交集的静态字符和位于非交集的动态字符；

根据所述静态字符和所述预设字体文件生成静态字体文件，根据所述动态字符和所述预设字体文件生成动态字体文件。

6.如权利要求1所述的字体文件加载方法，其特征在于，在浏览器的初始运行时间段加载所述静态字体文件和所述目标网站，在所述浏览器的第二运行时间段加载所述动态字体文件的步骤，包括：

在浏览器的初始运行时间段加载所述静态字体文件和所述目标网站中的初始网页；

在所述静态字体文件加载完成后，基于所述静态字体文件显示所述初始网页中的静态文本，基于所述浏览器的默认字体文件显示所述初始网页中的动态文本；

在所述初始网页加载成功后，在所述浏览器的第二运行时间段加载所述动态字体文件，基于所述动态字体文件显示所述目标网站中各网页的动态文本。

7.如权利要求6所述的字体文件加载方法，其特征在于，基于所述浏览器的默认字体文件显示所述初始网页中的动态文本的步骤，包括：

响应于所述动态文本的显示请求，获取所述目标网站中所有动态文本的类名，并获取所述类名和默认字体文件的第一标识之间的第一对应关系；

根据所述第一对应关系，调用所述默认字体文件，并基于所述默认字体文件显示所述动态文本。

8.如权利要求7所述的字体文件加载方法，其特征在于，在所述初始网页加载成功后，在所述浏览器的第二运行时间段加载所述动态字体文件的步骤，包括：

监听所述初始网页的加载状态；

在所述初始网页加载成功后，创建script标签，并在所述第二运行时间段通过所述script标签加载所述动态字体文件。

9.如权利要求7所述的字体文件加载方法，其特征在于，基于所述动态字体文件显示所述目标网站中各网页的动态文本的步骤，包括：

监听所述动态字体文件的加载状态；

若所述动态字体文件加载成功，断开所述类名和所述第一标识之间的第一对应关系，并建立所述类名和所述动态字体文件的第二标识之间的第二对应关系；

根据所述第二对应关系，调用所述动态字体文件，基于所述动态字体文件显示所述目标网站中各网页的动态文本。

10.如权利要求9所述的字体文件加载方法，其特征在于，在监听所述动态字体文件的加载状态的步骤之后，还包括：

若所述动态字体文件加载失败，维持所述类名和所述第一标识之间的第一对应关系，根据所述第一对应关系继续调用所述默认字体文件，并基于所述默认字体文件显示所述目标网站中各网页的动态文本。

11.一种字体文件加载装置，其特征在于，包括：

获取模块，用于获取目标网站的源码文件和预设字体文件；

处理模块，用于将所述源码文件转换为抽象语法树，从所述抽象语法树的目标节点中提取静态文本，处理所述静态文本得到第一字符集；

生成模块，用于根据所述第一字符集和所述预设字体文件生成静态字体文件和动态字体文件；

加载模块，用于在浏览器的初始运行时间段加载所述静态字体文件和所述目标网站，在所述浏览器的第二运行时间段加载所述动态字体文件，所述第二运行时间段在所述初始运行时间段之后。

12.一种电子设备，其特征在于，包括存储器和处理器；所述存储器存储有应用程序，所述处理器用于运行所述存储器内的应用程序，以执行权利要求1至10任一项所述的字体文件加载方法中的步骤。

13.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行以实现权利要求1至10任一项所述的字体文件加载方法中的步骤。

Images