引言 {#引言}

博客搭建这么久了发现并没有进行过优化，首页虽然打开速度勉强能够接受，但是 github 和 coding 提供的空间有限，是时候优化一下了。基本思路是采用 gulp 进行代码的压缩等。

分析 {#分析}

在浏览器输入url到页面打开，都做了些什么？

浏览器里输入网址 https://zsyyblog.com
浏览器查找域名对应的IP地址
这一步包括DNS具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存...
浏览器向web服务器发送一个HTTP请求
服务器的永久重定向响应（从https://zsyyblog.com 到 https://www.zsyyblog.com）/)
关于为什么要重定向。其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像 https://zsyyblog.com 和 https://www.zsyyblog.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-clean-css 、 gulp-uglify 、gulp-htmlmin 、gulp-htmlclean。安装它们并将其加入到 package.json 的依赖中：

|-----------|-----------------------------------------------------------------------------| | 1 | npm i --save gulp-clean-css gulp-uglify gulp-htmlmin gulp-htmlclean |

当然，你的电脑上需要安装有 gulp，这里进行了全局安装：

|-----------|-----------------------| | 1 | npm i -g gulp |

然后在项目的根目录下新建 gulpfile.js 文件，里面一通配置，还是比较简单的，稍微熟悉点 gulp 的都没多大问题：

|------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | var gulp = require('gulp'); var cleancss = require('gulp-clean-css'); var uglify = require('gulp-uglify'); var htmlmin = require('gulp-htmlmin'); var htmlclean = require('gulp-htmlclean'); /*压缩CSS*/ gulp.task('minify-css', function() { return gulp.src('./public/**/*.css') .pipe(cleancss()) .pipe(gulp.dest('./public')); }); /*压缩html文件*/ gulp.task('minify-html', function() { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, minifyJS: true, minifyCSS: true, minifyURLs: true })) .pipe(gulp.dest('./public')); }); /*压缩JS文件*/ gulp.task('minify-js', function() { return gulp.src('./public/**/*.js') .pipe(uglify()) .pipe(gulp.dest('./public')); }); gulp.task('default', ['minify-html', 'minify-css', 'minify-js']); |