个人网站优化

好吧，个人博客从一开始写一直到本周腾讯面试前一直都在进行，可能就是所谓的那种不安心准备面试的骚年了吧

好吧，其实一直到现在开始写这篇blog为止，这段时间本来是应该留下来复习晚上的阿里的笔试的时间，还有写资助管理网的时间，然而最终为什么能开小差一般的安心写blog的话，应该是因为，找到了retreat的道路了吧～～～具体之后再说好了讷～～

回归正题，个人网站的优化

首先，个人网站是一个搭建在日本机房的低配VPS，虽然是SSD存储，不过我觉得整个网站的访问速度应该不是被硬盘读取速度限制的

然后，个人网站采用的是静态页面，只是在部署的时候是在个人笔记本上动态渲染生成的，然后同步到github，服务器定时pull，所以说www.hellflame.net的内容会比hellflame.github.io更新稍慢一点点。采用静态网站，当然主要的原因还是因为整个网站没有什么动态的需求，还有关键的是，HEXO的主题是在nodejs的环境中运行的诶～～这也决定了个人网站的优化策略和一般动态网站的优化是不一样的

最后，为了方便管理，还有不想出钱给七牛开通https流量，自己在同一台VPS上搭建了一个静态文件服务，由于同样是日本流量，所以如果直接使用这里的资源的话，加载速度会变得奇慢。

一开始，本来准备使用国内的CDN进行加速，然而由于大陆的所有跟域名相关的东西都要备案，我的域名并没有这种东西，只能选择国外的CDN了，中途用过cloudflare和kloudsec，好吧，我是指，成功使用过，还有一些尝试失败的CDN加速商，然而发现，加速效果并不好，原因自然是因为即便是他们也不能在国内加速一个未经过备案的网站，然后，这条路就被否定了

然后，网站速度和网站安全性比起来终于显得更重要了，不得不放弃chrome地址栏左边的绿色小锁标志了，，将图片资源等放到七牛云，据说他的节点遍布全球，然而网站加载的速度直线下降，对，七牛云的静态文件加速并不稳定，至少是根据自己的经验判断，有时候甚至会找不到网站，全都卡在了七牛云的图片下载过程中（网站的每个页面都至少有一张封面图，好吧，些许大了的封面图），好吧，很显然，这是一条费力不讨好的做法，被否定也是情理之中

后来，开始把目光投向了减小服务器的传输压力上，恩，就是进行所有内容的压缩，html，css，js

当然，还有服务器端nginx的gzip压缩，压缩level是最高级别的9了。。。。。。虽然这样的确的一种稳定的提高传输的方法，不过诚然，提高并不是很大。。。当然这种压缩现在依然存在，毕竟还是能提高一些的说捏～～

最后，终于找到了整个网站加载速度的瓶颈，也就是每个页面必有的图片加载，我会觉得整个页面加载速度会慢的原因是一直看不到有什么反应，不出现一个文字，然而图片又不能不加载，最终想到的办法就是，让整个页面的图片在最后加载

让图片在最后加载，好吧，不得不承认，这种说法很微妙，对于网站所有内容同步加载来说，图片在什么时候加载都会拖慢整个页面的呈现速度，所以，这里的最后加载，是异步加载，跟整个DOM加载无关的加载(好吧，还是会有一些关系的)

好吧，我在测试上面两个页面的加载时间的时候已经清理过缓存了，保证每个资源的加载都会是200，而不是从缓存读取。好吧，感觉这样加载的话，浏览器还是会默认从缓存读取一些相同url的资源诶

好吧，清除缓存，从喵星人专辑直接访问的话，DOM Content的加载速度依然是不到4s（人类的忍耐极限是5s，在喵星人看来，3.8s这个速度应该是可以接受了）

当然还可以看到的是……虽然截图的时候还在加载中，但是呈现的文字内容等已经显示完全了，直到整个页面加载完全，也就是所有响应finish的话，，时间接近1分钟！！！

如果图片和整个content同步加载的话，一定会显示找不到网站的诶，就算没有GFW

就这样，个人觉得就网站速度而言，我的图片异步加载的优化算是稳定而成功的了，当然最后的一个小问题就是，底部的评论插件，多说。多说引用的用户头像是http资源，导致的结果就是我的小绿锁又不见了，，，，当然我知道的解决方案就是用iframe来加载多说，即使是我的静态页面，我也想好了该怎么操作，不过，鉴于以上速度优化才过去几天，暂时休息一下疲惫的身心好了诶～～～毕竟在静态网站中调用自己的iframe也是第一次做讷～～

如何异步加载

好吧，关于如何异步加载图片的话，答案其实很简单，不要那么急着给img的src属性。也许这在曾经并不是一个值得关注的话题，那就是img实际加载图片的时间

一直以来都是在校园网内做动态网站的开发，没有带宽的制约，只要老师们说好就好了，记得一次一个骚年在首页上传了一张6M大小的图片，虽然首页加载速度瞬间下来了，不过应该还是在3s之内，虽然后来让他换了一张。之前也因为自己没有对页面的图片加载做优化（学长是指图片压缩等）被学长批过，不过还是懒得做优化了23333，毕竟老师们并没有觉得不满，自己也不经常访问这些网站，所以也就不会觉得什么（果然还是更关心自己的东西诶23333）

好吧，其实动态网站的图片加载优化有很多方法，除了图片压缩这种服务器端的措施外，剩下的就是异步加载，当然异步加载的方法也有很多，可以通过异步js也可以直接渲染到模板（类似angular的异步调用）。

以上是淘宝网首页，他采用的方式就是直接把数据渲染到DOM中的一个textarea（当然，这不仅仅是为了图片加载的优化，这只是一个渲染数据的策略，只是顺便异步加载了图片，还可以看到的是，首页的部分已经经过压缩了），虽然知乎也使用了这种渲染数据的手段，然而速度依然很慢，，，

好吧，说了这么多之后，最关键的还是img加载图片的时间，就是在获取到src属性的时候，然而我的静态网站并没有可能动态的渲染模板，所以只能采用其他的方式了

恩，最终作为一个静态网站，又不能有src属性，只能在hexo生成静态网站的时候将img的src属性，替换为其他的属性，当然我直接替换成了data-src，这样在DOM加载的时候img就不会主动加载了

当然img不会主动加载并没有什么用，因为img存在的意义就是要加载出图片诶，加载不出图片的img有什么价值么……

所以，最后一道工序就是js的处理了

这里其他的处理就是对lightbox的支持，可能不太被注意到的地方就是，这个js也是异步加载的

以上，就是最近一周，顶着各种网站以及面试压力做的东西了，说到底还是因为是自己的网站才会付出这么多