加速网页字体加载

现状

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

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