前言
剛開始搭建博客的時候覺得很好玩，可是玩的久了，問題慢慢就出來了，就跟談戀愛一樣＝＝。比如現在我訪問博客的時候就感覺慢的要死，不可否認，使用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
最后再去測試一下網站的訪問速度，可以看出比之前已經快了不少了，截圖如下：
