hexo利用SAE提高网页打开速度

起因

之前一直觉得网页加载速度其实也还行，就是有两个图标加载的非常慢，经常是网页都出来了，那两个图标还是个方框，要等好久才出来。终于，好好研究了一番，发现那个图标是fontawesome里的，然后字体文件储存在github上，所以加载的比较慢。

那么解决的思路就是把字体文件放在连接较快的某个cdn或者服务器上

一波三折

plan A

利用七牛或者又拍云的cdn。然而，七牛之前用的欠费了，又拍云直接把好给我封了，登录都登不上。那既然七牛好歹还让我登录上了，就选七牛吧。

然而，把那欠的30多块钱充上之后，发现他只能提供一个临时的30的域名。我TMD，我要是域名备案了就不找你们了。30天过后就自动删库了。并且那个30天的临时域名还不支持https。

所以，放弃。

plan B

用我的搬瓦工的服务器，虽然在国外，但是看了一下速度，还可以。

然而，在配置之后，发现github的hexo博客是https访问的，但是我搬瓦工那个网站域名没有ssl证书。chrome直接就禁止了http和https的混用。遂字体无法加载。

所以，放弃

plan C

寻找有没有那种字体cdn库。虽然bootcdn上有fontawesome这个库，但是字体文件和我本地的不一样。我也没继续试。还有其他的js，css也是这样，有些我用的，他没有。可能是主题作者自己修改了吧

所以，放弃。

plan D

用SAE。因为我之前用过SAE，他会给一个域名，而且支持https。

先是创建了一个php应用，把文件存了上去，然后调用，发现出现了无法跨域调用。在SAE设置了允许跨域（设置允许跨域header头）。（刚刚去找这个网页，在SAE的官网上就然没有，官网的文档和这个文档不一样，官网也没链接，搞不懂为什么这么弄。或者是我没找到？）但是设置之后依然无法跨域调用。于是工单询问。在告知客服我的需求后，他告诉我可以使用云储存SCS，支持https并且流量费用更低。还说我设置的跨域头文件是正确的。啧，那我就不明白了，算了，不想了。就用那个SCS吧。

经过一番折腾，终于成功了。

操作过程

上传静态文件到SCS

上传之后要把ACL的匿名读权限打开。吐槽一下，竟然不能一下将同一文件夹下的所有文件全部设置ACL权限，也不能多选设置，只能一个一个文件的设置。问了客服，他说暂时没有这个功能，可以写一个脚本来实现(http://document.applinzi.com/scs/php-sdk.html)，（好奇+1，他这里发给我的也是这个document的网站，那为什么官网主页没有这个连接嘞。）。我写个锤子的脚本，也没几个文件，还要现学，还不如一个一个设置呢。

更改主题中的引用链接

我使用的是jacman，作者两年没更新了，也没有出一个cdn的选项。好像next主题有设置cdn的选项，可以直接在配置文件里改。唉，我也不想换next，那个太花里胡哨了。

于是，就用chrome开发者调试，看整个网页哪个静态文件加载慢，就替换掉。结果是，基本全替换掉了。以下是替换的部分

字体文件

N:\blog\themes\jacman\source\css\_base\font.styl

第3行

return '../font/' + filename

JS文件

N:\blog\themes\jacman\layout\_partial\after_footer.ejs

1-4行

<script src="<%- config.root %>js/jquery-2.0.3.min.js"></script>
<script src="<%- config.root %>js/jquery.imagesloaded.min.js"></script>
<script src="<%- config.root %>js/gallery.js"></script>
<script src="<%- config.root %>js/jquery.qrcode-0.12.0.min.js"></script>

215-216行

<link rel="stylesheet" href="<%- config.root %>fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="<%- config.root %>fancybox/jquery.fancybox.pack.js"></script>

N:\blog\themes\jacman\layout\_partial\totop.ejs

第3行

这个png只有几kb大小，但是在某次测试中花了十几秒加载，索性也换到SAE上

<a title="<%= __('totop')%>"><img src="<%- config.root %>img/scrollup.png"/></a>

第5行

<script src="<%- config.root %>js/totop.js"></script>

logo图片

N:\blog\themes\jacman\layout\_partial\header.ejs

第18行

<a href="<%- config.root %>"><img src="<%- config.root %><%= theme.imglogo.src %>" alt="<%= config.title %>" title="<%= config.title %>"/></a>

N:\blog\themes\jacman\source\css\_partial\footer.ejs

第34行

background no-repeat url("../"+author-img) left top 

总结

更换完之后加载速度由原来的好的时候六七八秒，不好的时候十秒到二十秒，并且图标加载缓慢到现在可以1-2秒就能加载完，虽然图标依然会比文字晚出现，但速度已经可以接受了

吐槽七牛，妈的，早知道老子不充钱，不还那个欠款了，辜负我的期望。32块钱啊。从此你我两不相欠

夸一夸SAE，刚刚看那个价格，发现SCS储存有免费的额度，1GB的储存空间，300MB的下载流量（哇，又看了一眼，每天300MB流量）。那我这些小文件根本就用不完免费额度嘛，况且我的博客根本没人看，只有我自己整天看来看去，自己嫌弃他加载速度慢。舒服了，可以白嫖了。如果可以重来，我会把那32块钱充到SAE上。以后可以考虑在SAE上部署一些程序啥的。便宜还好用。

对SAE有一点不满意就是他的储存空间不支持cdn。我看腾讯的那个好像支持。但是，腾讯又需要有备案的域名。那算了，还是SAE更胜一筹