从前端性能优化的角度提高自己的博客的访问速度

很多博客都做了个性化的定义，我自己的也是。这个功能是博客园吸引我的优点之一，不过当初做个性化的时候，方法简单粗暴，再加上又用到了一些多余的东西，导致博客的体验还不够好，这段时间状态比较清闲，我想是时候以一个前端开发人员的态度来整理下自己的博客设置了，除了UI上的一些调整，考虑最多的就是怎么优化我的这些个性化内容，让博客的访问速度的更快。

1. 去掉多余的东西

早在2013年大学毕业的时候就已经在博客园开博，但是直到去年10月份才开始好好写东西，因为13年，14年的工作一直让我怀疑编程这条道路的价值和意义，大部分时间都在踌躇，哪有兴趣跟热情折腾这些东西，幸好去年换了新工作，换了新岗位，遇到了一批很聊得来的朋友（因为不止于同事关系，所以我没有用同事这个词），我才找到了自己真正感兴趣的工作方向，所以我想好好干，把每一次的收货都用博客记录下来，一方面能够帮到别人，更多的还是成就自己。当时首先做的事就是把博客弄得漂亮一点，把别人的博客用到的模板和自定义的内容都拿了过来，直接套在自己的博客身上，当时的感觉还是挺不错的，毕竟第一个版本的效果已经到位了。后来写过两篇总结性的文章，发布之后得到了不少推荐，虚荣心开始膨胀，关心起博客的访问数据起来，于是就做了一些影响博客访问速度的事情：

1）加cnzz给博客做页面访问统计，可以查看各个页面每天的访问情况；
2）加了访客总数统计，在公告那显示访问量累计有多少；
3）加了git hub 的ribbon，链接到自己的git hub（好像这样很流行？）。

这三件事情给博客带来的问题是：

1）增加了请求数量；
2）由于访客总数统计以及git hub的ribbon都请求的是国外的服务器，不少网络环境经常加载不出来，严重影响了访问体验。

我解决这几个问题的措施是：

1）去掉了cnzz和访客统计的功能，我一直认为自己是个追求实在的人，这种东西显然对自己的博客来说就是不实在的东西，应该去除；
2）git hub的ribbon我还想留着，毕竟git hub跟博客对于现在的个人发展而言，能起到的作用还是关键的，所以很有必要把它们关联起来，git hub那边也有一个设置主页的地方，我把那个选项设置成了自己的博客地址，这样不管是访问博客还是git，都能看到另外一方的链接。考虑到ribbon的那个图片加载不出来，我把图片就先下载到本地了，然后插入到了一篇不会发表的博客中，这样我就能用博客园提供的图片地址来加载那个ribbon了。

经过这两步，打开博客时，选项卡左边转圈的时间明显减少了好多。

2. 自定义代码优化

博客园的设置里面，有四处设置可以添加自定义的代码：

1）页面定制css代码
2）博客侧边栏公告
3）页首Html代码
4）页脚Html代码

这几个地方可优化的措施有：

1）去掉多余的代码，比如注释或者没有用的代码，因为我原先是从别人的博客里面扒出来的设置，所以有很多没用的代码，当时为了快速弄出效果，就把没用的东西注释了一番，但是没有去掉。这次我认真看了侧边栏公告，页首和页脚的html，把没用的和注释都去掉了，尽量减少请求的数据量；
2）合并css：原先把自定义的css，存成了cnblog.css这样一个外部文件，然后上传到博客的文件列表里，通过页首html里面加一个link标签来引入的。后来发现根本不需要这个link标签来引入cnblog.css，只要把该文件内的所有css全部放在页面定制css代码里即可，博客园会把页面定制的css都单独存成一个css文件，然后通过以下标签来访问：

<link type="text/css" rel="stylesheet" href="/blog/customcss/131484.css?v=XvxsKe6Pwfa%2f7uCSJUiEJkSTnTI%3d"/>

你可以查看下自己的博客源代码，就能看到类似的标签。通过这一步，相比原先的博客减少了一个css的请求。
3）压缩混淆代码，这个就不多说了，网上有在线工具（http://tool.lu/）可以用。

3. 图片优化

目前博客总共用到了6自定义需要的图片（collect那个不是）：

分别是ribbon，body的背景，疯狂动物城的海报，头像，假等高布局需要的背景图以及返回顶部的背景图。

针对这些图片可优化的手段是：图片压缩和图片合并。要是会点简单的ps，这个工作做起来就很容易了，还好网上也有工具：http://alloyteam.github.io/gopng/

不过最后没有选择图片合并，因为body的背景，疯狂动物城的海报和假等高布局需要的背景图这三张图不适合做合并，而且其它3张图片合并之后的数据量大小比原来的大，所以综合下来还是舍弃了做合并减少请求的想法。最后所有图片都做了一下优化，减少了一些请求的数据量。

4. 总结

博客园的response都有加cache-control和e-tag，另外还开启了gzip，这两个东西对于web性能提升是有非常巨大作用的，这方面的内容在《浏览器缓存知识小结及应用》有详细的介绍，所以即使不做上面那些工作，你的博客访问起来也不会太慢。以上内容纯属自己作为一个前端开发工程师，把自己的博客当成自己的产品，做些应该做的事情而已。

谢谢阅读：）

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有