hexo博客－性能优化

前言

刚开始搭建博客的时候以为很好玩，但是玩的久了，问题慢慢就出来了，就跟谈恋爱同样＝＝。好比如今我访问博客的时候就感受慢的要死，不能否认，使用hexo搭建服务器方便快捷，可是因为github做为服务器，也会有速度稍慢的代价产生。既然我不能放弃github，那就只有另寻出路了，做为一名前端，有哪些地方咱们能够本身来优化呢？

注：想要拥有本身的博客，你能够看过来。hexo搭建博客系列

先来讲说咱们在面试中常常遇到的一个问题，在浏览器输入url到页面打开，都作了些什么？

• 浏览器里输入网址

• 浏览器查找域名对应的IP地址
  这一步包括DNS具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…

• 浏览器向web服务器发送一个HTTP请求

• 服务器的永久重定向响应（从http://example.com 到 http://www.example.com）
  关于为何要重定向。其中一个缘由跟搜索引擎排名有关。若是一个页面有两个地址，就像http://example.com/和http://www.example.com/，搜索引擎会认为它们是两个网站，结果形成每个的搜索连接都减小从而下降排名。因此要把带www的和不带www的地址归到同一个网站排名下。还有一个缘由是用不一样的地址会形成缓存友好性变差。

• 浏览器跟踪重定向地址，发起GET请求

• 服务器”处理”请求，向浏览器发回一个HTML响应

• 浏览器解析显示HTML

• 浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

• 浏览器发送异步请求（ajax请求等）

分析

从上面的过程能够看出，其实大部分过程咱们是控制不了的，咱们只能从浏览器端入手来找一些能够作的事情。那么，咱们能够作些什么呢？

• 少发送请求
  把要加载的js文件（css文件同理）合并成一个（尽可能少）文件，则能够向服务器少发送请求，从而减小等待时间。
• 压缩文件
  使用压缩以后的js、css、img文件，一样能够减小请求时间。
• Css Sprite
  这是css的一项技术，将图片尽量多的合并成一个图片文件，第一次使用的时候加载这张图片，而后浏览器会缓存下来，其余地方再使用的时候就不须要从新请求了。
• js/css位置
  css引用建议放在head标签里面；js脚本建议放到body内容的最后，缘由：等待js加载或者脚本有错误的时候不会影响html页面的展现。

博客优化

优化以前

优化以前，你们能够利用百度统计这个平台（界面太丑，不过功能还行＝＝）给本身的网站作一些评测，好比能够测速，并给出优化建议，下面是我测试的结果：

他还会告诉咱们致使网站访问速度慢的缘由，以便咱们对症下药，以下图：

使用gulp优化

从上图能够看出，慢的不要不要的，不优化根本不能接受，因此，我尝试着作了一些优化，主要是利用gulp和它的一些插件来压缩js、css、img等文件，下面是我添加的gulpfile.js文件:

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    cssmin = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin');
//JS压缩
gulp.task('uglify', function() {
    return gulp.src('././public/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('././public/js/'));
});
//public-fancybox-js压缩
gulp.task('fancybox:js', function() {
    return gulp.src('././public/fancybox/jquery.fancybox.js')
        .pipe(uglify())
        .pipe(gulp.dest('././public/fancybox/'));
});
//public-fancybox-css压缩
gulp.task('fancybox:css', function() {
    return gulp.src('././public/fancybox/jquery.fancybox.css')
        .pipe(cssmin())
        .pipe(gulp.dest('././public/fancybox/'));
});
//CSS压缩
gulp.task('cssmin', function() {
    return gulp.src('././public/css/style.css')
        .pipe(cssmin())
        .pipe(gulp.dest('././public/css/'));
});
//图片压缩
gulp.task('images', function() {
    gulp.src('././public/img/*.*')
        .pipe(imagemin({
            progressive: false
        }))
        .pipe(gulp.dest('././public/img/'));
});
gulp.task('build', ['uglify', 'cssmin', 'images', 'fancybox:js', 'fancybox:css']);

优化以后

优化以后，而后每次添加文章以后，编译发布之间须要多一个命令来压缩这些文件，总结了一下，详细以下：

hexo clean    //清除public文件夹
hexo g     //编译文章，生成public文件夹
gulp build    //压缩js、css、img文件
hexo d    //部署到github

最后再去测试一下网站的访问速度，能够看出比以前已经快了很多了，截图以下：