HTML页面加载速度优化

减少请求数量，合并请求
减少请求文件的体积
使用内容分发网络(cdn)
合理使用缓存
了解html页面展示的原理，合理放置资源文件引入的位置
减少dns查找，避免重定向

减少请求数量，合并请求

1-1 js、css等资源文件合并、压缩，仅有一个小css或js可写到html文件中

可使用gulp-concat合并文件，gulp-uglify压缩js文件，gulp-clean-css压缩css文件；
若压缩需要指定文件顺序，则需要引入gulp-order，

var gulp= require('gulp');
var order = require('gulp-order');
gulp.task('concat-js-inorder', function() {
    gulp.src('js/*.js')
        .pipe(order([
            'js/index.js',
            'js/detail1.js',
            'js/*.js'
        ], {base: '.'}))
        .pipe(concat('index-concat.js'))
        .pipe(uglify())
        .pipe(gulp.dest('../src/public/'))
});

若压缩需要指定任务顺序，则需要引入run-sequence，return runSequence( 'task1-name','task2-name','task3-name');

1-2 图片资源可合并为雪碧图，背景平铺类图片可base64写到html文件中

合并为雪碧图

图片地图

我个人认为图片地图是用来在一整张图片上做效果的，比如做个科普图，都是树和花草，点某朵花就告诉你它的简介。当然如果用它来合并图片减少请求也可以做到。我之前二次开发的一个小网站，有个需求就是将页面上某张图中带有的几个logo，做到点击进入相应官网，就是用的map和area，我们正常开发网站，固定的导航也可以这样做。

背景平铺类图片作为内联图片

base64编码写到html img中
<img src="data:image/png;base64,xxxxxxxxxxxxxxx">
写到css中
.body-bgd {
background:url("data:image/png;base64,xxxxxxxxxxxxx")
}

1-3 字体图标

直接引入字体包，不用引入图片，与文字一样可以用css控制其大小颜色方向，没有放大或缩小图片失真的问题。我用的字体图标库是阿里的iconfont，需要。还有见到有人推荐Font Awesome。

减少请求文件的体积

2-1 发布版本时js、css等资源文件进行压缩、弱混淆

(gulp-uglify压缩js, gulp-clean-css压缩css，gulp-htmlmin压缩html)

2-2 对图片进行无损压缩

(gulp-imagemin，gulp-tinypng-nokey)也可以在线在tinypng官网上在线上传，压缩。个人测试 tinypng的压缩率会大一些，但图片边缘会出现灰色线条？下图左侧是imagemin压缩的右侧是tinypng压缩的，所以项目中我还是会继续使用imagemin。

左图imagemin压缩后放大，右图tinypng压缩后放大

2-3 服务器端进行压缩，开启gzip

request header:通知server,client端支持的文件压缩格式
Accept-Encoding:gzip,deflate,br
response header: 告诉client返回的文件压缩格式是什么
content-encoding:gzip
(apache的mod_deflate可以配置对哪些文件进行压缩或不压缩，DeflateCompressionLevel参数可以配置压缩比1到9，数字越大表示压缩比越大文件越小但占用cpu资源越多，可考虑使用大家都使用的6)
tips: 若中间使用了代理，代理缓存了内容，若存在不支持gzip的浏览器和支持gzip的浏览器都需要访问服务器的资源，则会发生代理返回给支持gzip的浏览器未压缩的内容（不支持gzip的浏览器先访问了资源，未压缩的内容被缓存了），或代理返回给不支持gzip的浏览器压缩过的内容(支持gzip的浏览器先访问了资源，压缩过的内容被缓存了)。解决此问题需要response中增加header,Vary:Accept-Encoding ，告诉代理服务器根据一个或多个请求头来改变缓存的响应

使用内容分发网络(cdn)

自己的服务器有带宽和节点数量限制，使用云服务商提供的cdn服务，能缩短文件所在服务器与用户的距离，加快文件传输速度。
阿里云的cdn可根据目录或文件后缀名设置缓存策略(过期时间)

合理使用缓存

4-1. Cache-Control

4-2. 设置Expires

Expires: Mon, 19 Nov 2018 06:40:49 GMT
Expires优先级低于Cache-Control

4-3. 设置ETag、Last-Modified

合理放置资源文件引入的位置

css文件放在文件头， js文件放在文末
css文件若放在末尾易导致无样式内容闪烁？
FOUC flash of unstyles content 产生原因是没有吧样式表放在head顶部，或者使用了@import导入（即便放在前面了，样式表还是会最后下载）
js不放在文末易导致白屏
脚本放在顶部会阻塞后面内容的呈现和组件的下载。进而产生白屏现象。
放在底部将会产生最小影响和最佳效应。
(关于js单线程，html页面从无到有的流程)

减少dns查找，避免重定向

附录

gulp实现自动化生成雪碧图和css样式语句,并压缩

var gulp= require('gulp');
var runSequence = require('run-sequence');
var spritesmith = require('gulp.spritesmith');
var pngquant = require('imagemin-pngquant');
var cache = require('gulp-cache');
gulp.task('spriteImageTask', function() {
    return gulp.src('img/test/*.png')
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.css',
            padding:4,
            algorithm: 'top-down',
            cssTemplate:function (data) {
                var arr=[];
                data.sprites.forEach(function (sprite) {
                    arr.push(".sprite-"+sprite.name+
                    "{" +
                    "background-image: url('"+sprite.escaped_image+"');"+
                    "background-size:"+sprite.total_width+'px '+sprite.total_height+"px;"+
                    "background-position: "+sprite.offset_x/2+"px "+sprite.offset_y/2+"px;"+
                    "width:"+sprite.width/2+"px;"+
                    "height:"+sprite.height/2+"px;"+
                    "}\n");
                });
                return arr.join("");
            }
            // cssTemplate: 'img/test/spriteHandler.css'
        }))
        .pipe(gulp.dest('img/test/sprite/'));
});
gulp.task('imageminTask', function() {
    return gulp.src('img/test/sprite/sprite.png')
        .pipe(cache( // 缓存，只有图片修改了才会再次执行图片压缩
            imagemin({
            // 测试中是否加以下选项对png图片无影响？？？
            // optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            // progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            // interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            // multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
            // use: [pngquant()], //使用pngquant深度压缩png图片的imagemin插件
            }))
        .pipe(gulp.dest('../src/public/images/test/'));
});
gulp.task('spriteImg', function() {
    return runSequence('spriteImageTask', 'imageminTask');
});

HTML页面加载速度优化

1-1 js、css等资源文件 合并、压缩，仅有一个小css或js可写到html文件中

1-2 图片资源可合并为雪碧图，背景平铺类图片可base64写到html文件中

合并为雪碧图

图片地图

背景平铺类图片作为内联图片