• 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:log hemesjacmansourcecss\_basefont.styl

    第3行

    return '../font/' + filename

    JS文件

    N:log hemesjacmanlayout\_partialafter_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:log hemesjacmanlayout\_partial otop.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:log hemesjacmanlayout\_partialheader.ejs

    第18行

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

    N:log hemesjacmansourcecss\_partialfooter.ejs

    第34行

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

    总结

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

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

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

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

  • 相关阅读:
    javaScript对象
    javaScript基础
    使用javaScript和JQuery制作经典面试题:光棒效果
    Animate自定义动画
    使用jQuery快速高效制作网页交互特效
    jQuery中绑定事件bind() on() live() one()的异同
    小笔记1(Get请求)

    this关键字
    Eclipse断点调试(下)
  • 原文地址:https://www.cnblogs.com/roadwide/p/10782160.html
Copyright © 2020-2023  润新知