加速网页字体加载

加速网页字体加载

现状

每次打开博客都要好久才能显示出网页内容,在网上查了一下并且分析了一下原因:

  1. 图片太大导致加载慢——这个有两个解决方案,一个是找个速度快一点的图床,另一个是压缩图片。

  2. 字体加载缓慢,而且字体很丑(字体不是中文字体)

最后图片选择了老老实实压缩图片,而字体怎么压缩呢…最后发现了“字蛛”(FontSpider)这个操作,使加载字体速度急速提升!

字蛛的安装

官网:http://font-spider.org/

字蛛的安装命令:

npm install font-spider -g

之后就是使用了。

文件操作

字蛛貌似必须把所有html文件放在同一个文件夹下才能进行操作,如果手动把100+网页复制粘贴+重命名,估计要累死,因此决定研究以下批处理,用bat脚本来帮助我们!

参考资料:

批处理脚本遍历指定文件夹下的文件

BAT批处理 文件重命名

BAT重命名所有目录下所有子文件夹内的文件

最后经过研究得到下面这个勉强能用的bat:

@echo off
set k = 1
setlocal enabledelayedexpansion
for /r .\public %%i in (*.html) do (
    set /a k+=1
    echo %%i
    copy %%i E:\index
    ren E:\index\%%~ni.html !k!.html
    echo !k!
)
pause

字蛛的使用

执行上面的bat后,将字体文件夹和css配置文件复制到E盘,之后在命令行切至E盘,执行下面的命令:

font-spider ./index/*.html

之后把font文件夹的字体复制回博客主题的字体文件夹即可。

update

复制来复制去还是太麻烦了,干脆都写到bat里面…
(因为font-spider会导致bat直接退出,所以分了两个文件)

@echo off
del /f /s /q E:\index\*.*
echo 删除完成
pause
set k = 1
setlocal enabledelayedexpansion
for /r .\public %%i in (*.html) do (
    set /a k+=1
    echo %%i
    copy %%i E:\index
    ren E:\index\%%~ni.html !k!.html
    echo !k!
)
echo 复制完成
pause
E:
del E:\fonts\stfangso_back.ttf
copy E:\fonts\.font-spider\stfangso_back.ttf E:\fonts\
echo 请显示执行完成信息后再手动执行2.bat
font-spider ./index/*.html
pause

2.bat:

@echo off
del D:\blog\public\fonts\stfangso_back.ttf
copy E:\fonts\stfangso_back.ttf D:\blog\public\fonts\
del D:\blog\themes\mic\source\fonts\stfangso_back.ttf
copy E:\fonts\stfangso_back.ttf D:\blog\themes\mic\source\fonts\
echo 处理完成
pause