一种基于vite实现的SPA应用字体资源加载方法及装置制造方法及图纸

本发明专利技术实施例公开一种基于vite实现的SPA应用字体资源加载方法及装置，首先，使用前端构建工具vite生成用户访问的HTML页面，采集HTML页面中所有的汉字；然后，获取预设自定义字体的全量字体包，根据HTML页面中的汉字，在全量字体包中选取出对应的汉字字体，并生成临时字体包；最后，在用户浏览器加载临时字体包和HTML页面。本发明专利技术实施例使用vite直接生成HTML页面，不需要安装额外的工具包，同时，流程也有所减少，从而使得用户浏览器需要加载数据量的体积更小、速度更快。速度更快。速度更快。

【技术实现步骤摘要】
一种基于vite实现的SPA应用字体资源加载方法及装置


[0001]本专利技术属于互联网
，具体涉及一种基于vite实现的SPA应用字体资源加载方法及装置。

技术介绍

[0002]为丰富页面的文案效果，以及避免出现由于用户端设备预置字体包不同导致文案效果不一致的情况，往往会在页面设计中采用自定义字体。
[0003]在网站开发设计中，用户的浏览器获取到展示页面所需要的资源后，才会按照预期的形式将信息展示给用户。展示的整体结构由页面的HTML决定，样式由css决定。通常，一个网站中HTML和css的总体积不会超过两兆，加载速度很快。但是，若在css中声明使用自定义字体来展示文本，而自定义字体的字体包可能有七八兆，这就导致了css比字体包先加载到用户浏览器中，即声明的时候字体还没加载出来，导致页面结构和页面图片已经显示，而文字区域出现空白的现象。

技术实现思路

[0004]本专利技术实施例中提供了一种基于vite实现的SPA应用字体资源加载方法及装置，以解决现有技术中由于自定义字体包较大，在用户浏览器加载过慢而导致文字不能与页面结构和页面图片同时显示的问题。
[0005]为了解决上述技术问题，本专利技术实施例公开了如下技术方案：
[0006]本专利技术的一个方面提供一种基于vite实现的SPA应用字体资源加载方法，应用于SPA单页面应用，包括：
[0007]使用前端构建工具vite生成用户访问的HTML页面；
[0008]采集所述HTML页面中所有的汉字；/>[0009]获取预设自定义字体的全量字体包；
[0010]根据HTML页面中的汉字，在全量字体包中选取出对应的汉字字体，并生成临时字体包；
[0011]在用户浏览器加载所述临时字体包和HTML页面。
[0012]可选地，所述使用前端构建工具vite生成用户访问的HTML页面，包括：
[0013]利用vite的SSR服务端渲染功能或SSG静态页面生成功能生成用户访问的HTML页面。
[0014]可选地，所述采集所述HTML页面中所有的汉字，包括：
[0015]遍历页面HTML的DOM树，根据DOM树节点的innerText属性获取页面HTML中的所有汉字。
[0016]可选地，所述根据HTML页面中的汉字，在全量字体包中选取出对应的汉字字体，并生成临时字体包，包括：
[0017]获取页面HTML中所有汉字的unicode编码；
[0018]根据汉字的unicode编码，从全量字体包中选取出对应的汉字字体，生成一个包含页面HTML中所有汉字的临时字体包。
[0019]可选地，在执行所述在用户浏览器加载所述临时字体包和
[0020]HTML页面的步骤之后，所述方法还包括：
[0021]监测用户浏览器是否抛出HTML页面已经加载完成的事件，
[0022]如果是，在用户浏览器加载全量字体包，并删除用户浏览器中已加载的临时字体包。
[0023]可选地，在执行所述遍历页面HTML的DOM树，根据DOM树节点的innerText属性获取页面HTML中的所有汉字的步骤之前，包括：
[0024]利用HTML解析器将页面的HTML构建成DOM树。
[0025]可选地，所述遍历页面HTML的DOM树，根据DOM树节点的innerText属性获取页面HTML中的所有汉字，包括：
[0026]按照从上到下、从左到右的顺序，读取所述DOM树的所有节点；
[0027]获取每个节点的所有属性；
[0028]针对每个节点，均判断是否存在innerText属性，
[0029]如果是，获取所述节点innerText属性中的汉字。
[0030]本专利技术的另一个方面提供一种基于vite实现的SPA应用字体资源加载装置，应用于SPA单页面应用，包括：
[0031]页面生成模块，用于使用前端构建工具vite生成用户访问的HTML页面；
[0032]汉字采集模块，用于采集所述HTML页面中所有的汉字；
[0033]全量字体包获取模块，用于获取预设自定义字体的全量字体包；
[0034]临时字体包生成模块，用于根据HTML页面中的汉字，在全量字体包中选取出对应的汉字字体，并生成临时字体包；
[0035]加载模块，用于在用户浏览器加载所述临时字体包和HTML页面。
[0036]可选地，所述临时字体包生成模块，包括：
[0037]编码获取子模块，用于获取页面HTML中所有汉字的unicode编码；
[0038]字体包生成子模块，用于根据汉字的unicode编码，从全量字体包中选取出对应的汉字字体，生成一个包含页面HTML中所有汉字的临时字体包。
[0039]可选地，所述装置还包括：
[0040]监测模块，用于监测用户浏览器是否抛出HTML页面已经加载完成的事件；
[0041]字体包处理模块，用于在监测到用户浏览器抛出HTML页面已经加载完成的事件时，在用户浏览器加载全量字体包，并删除用户浏览器中已加载的临时字体包。
[0042]本专利技术实施例提供的一种基于vite实现的SPA应用字体资源加载方法及装置，使用vite直接生成HTML页面，不需要安装额外的工具包，同时，流程也有所减少，从而使得用户浏览器需要加载数据量的体积更小、速度更快。
附图说明
[0043]图1为本专利技术实施例公开的一种基于vite实现的SPA应用字体资源加载方法的流程示意图；
[0044]图2为本专利技术一实施例公开的一种实现图1中步骤S104的流程示意图；
[0045]图3为本专利技术另一实施例公开的一种基于vite实现的SPA应用字体资源加载方法的流程示意图；
[0046]图4为本专利技术实施例公开的一种基于vite实现的SPA应用字体资源加载装置的结构示意图。
具体实施方式
[0047]为使本领域技术人员更好地理解本专利技术的技术方案，下面结合附图和具体实施方式对本专利技术作进一步详细描述。
[0048]图1为本专利技术实施例公开的一种基于vite实现的SPA应用字体资源加载方法的流程示意图，应用于单页面应用(single pageapplication，SPA)，SPA为只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。如图1所示，该方法包括以下步骤：
[0049]步骤S101：使用前端构建工具vite生成用户访问的HTML页面。
[0050]vite是一款前端构建工具，可以做到开箱即用。在网站开发过程中，有很多资源都需要特殊处理，前端构建工具就是将这个处理过程自动化的工具。
[0051]在本专利技术公开的实施例中，可利用vite的SSR服务端渲染功能或SSG静态页面生成功能生成用户访问的HTML页面。
[0052]步骤S102：采集HTML页面中所有的汉本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于vite实现的SPA应用字体资源加载方法，应用于SPA单页面应用，其特征在于，包括：使用前端构建工具vite生成用户访问的HTML页面；采集所述HTML页面中所有的汉字；获取预设自定义字体的全量字体包；根据HTML页面中的汉字，在全量字体包中选取出对应的汉字字体，并生成临时字体包；在用户浏览器加载所述临时字体包和HTML页面。2.根据权利要求1所述的方法，其特征在于，所述使用前端构建工具vite生成用户访问的HTML页面，包括：利用vite的SSR服务端渲染功能或SSG静态页面生成功能生成用户访问的HTML页面。3.根据权利要求1所述的方法，其特征在于，所述采集所述HTML页面中所有的汉字，包括：遍历页面HTML的DOM树，根据DOM树节点的innerText属性获取页面HTML中的所有汉字。4.根据权利要求1所述的方法，其特征在于，所述根据HTML页面中的汉字，在全量字体包中选取出对应的汉字字体，并生成临时字体包，包括：获取页面HTML中所有汉字的unicode编码；根据汉字的unicode编码，从全量字体包中选取出对应的汉字字体，生成一个包含页面HTML中所有汉字的临时字体包。5.根据权利要求1所述的方法，其特征在于，在执行所述在用户浏览器加载所述临时字体包和HTML页面的步骤之后，所述方法还包括：监测用户浏览器是否抛出HTML页面已经加载完成的事件，如果是，在用户浏览器加载全量字体包，并删除用户浏览器中已加载的临时字体包。6.根据权利要求3所述的方法，其特征在于，在执行所述遍历页面HTML的DOM树，根据DOM树节点的innerText属性获取页面HTML中的所有汉字的步...

【专利技术属性】
技术研发人员：周小富，
申请(专利权)人：光控特斯联上海信息科技有限公司，
类型：发明
国别省市：