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

最後再去測試一下網站的訪問速度，能夠看出比以前已經快了很多了，截圖以下：