转： web 页面加载速度优化实战-100% 的飞跃提高

前言

一个网站的加载速度有多重要？ 反正我相信以前来 博主网站 的人至少有 50% 在加载完成前关闭了本站。 为啥捏？ 看图

首页完整加载时间 8.18s，看来能进来看博主网站的人都是真爱呀，哈哈。 正常来说一个网页 4s 加载不完就会流失很大一部分用户，而博主的网站加载时间居然达到了 8s 仍是在电脑端，若是在移动端，加载时间会更久，体验会更差。 这样的话网站作得再难看批判者进不来不是白搭嘛，因而针对 web 页面加载速度的优化迫在眉睫。

基于博主之前优化过其余网站，因而博主准备把此次的优化过程记录下来分享给你们借鉴。

1. 页面分析

先来看优化前的页面：

加载时间 8.18s ，一共 33 个 请求，加载 1.38MB 。 能够看到对于网速较慢的浏览者光加载资源就须要 5s 以上，再加上 33 个请求切换开销，简直不能愉快的玩耍。 因此接下来的优化手段就要从加载流量和请求数量入手：

2. 优化图片

图片在网络流量中占有很大的比重，所以优化图片对于减小流量有着相当重要的做用。

合并小图片:

不少页面有不少小图标，一个一个加载就至关于一个一个请求，将这些小图片合并成一个大图片，用css 控制显示范围，这样就只须要一个请求便可加载完全部小图片，瞬间就会减小不少网络请求。

优化图片格式：

不少图片没有通过优化直接上传到网页中会占用不少额外的流量，好比一张屏幕大小的截图，用截图工具直接截图后的大小大概有 1MB ，此时直接上传到网页中就直接占用了 1MB 流量，但其实咱们彻底能够只牺牲它 40% 的质量换取缩小 10 倍的大小，网上有不少转化 web 图片的网站，固然若是你有 photoshop 的话彻底能够本身导出：

将图片在 ps 中打开，而后点击菜单栏 “文件” 菜单，选择 “储存为 web 所用格式”，出现以下对话框：

通常状况下 jpg 图片选择品质中便可，png 格式图片选择 png8 便可，但注意有透明背景的 png 图片要选择 png24 ，不然透明背景中会出现白边，gif 图片选择 gif64 无仿色便可。

通常通过优化的图片大小至少会有 3倍 之差，图片原大小越大优化的结果会越好。

博主的网站最显眼的图片就是页眉上那个幽鬼的图片啦，因此就先拿它开刀，通过以上步骤优化：

瞬间减少 4 倍， 实际效果 能够看看，表明着博主门面的图片通过优化后和优化前显示效果并无明显区别，而文件大小却相差了 4 倍。

3. 使用免费 cdn 加载第三方资源

全部网站都会用到第三方资源，对于第三方资源，若是选择让本身的服务器提供，那么对于小型站点，本就不大的带宽至关一部分还要被公共资源占用，无形之中压缩了服务器带宽，若是把这部分资源让第三方 cdn 提供，那么对于网站加载速度会有不小的提高。

博主选用的是 bootstrap 中文站提供的 cdn 静态库 ，博主看过很多国内 cdn 静态库，能够说 bootstrap 家的仍是很良心的，更新及时，资源如今也很丰富，基本博主用的三方资源都能在上面找到，因而接下来就是搜索静态资源 ＋ 替换静态资源：

<script src="/s/js/jquery.min.js"></script>
改成
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

这里不要写协议头，让网页自动判断使用 http 仍是 https （ 关于 https 网站的部署能够看博主以前的文章： 给你的网站穿上外衣－ HTTPS 免费部署指南）

4. 使用 cdn 储存静态资源

通常网站 90% 的流量都用于静态资源的加载，除了用免费 cdn 加载第三方资源，还能够本身申请云空间储存本身的静态资源，进一步减少服务器的开销，让服务器只专一于提供数据或者网页渲染服务。 好比博主使用的是 X牛 ，将本身的图片什么都存在 x牛上，每月都有免费流量，对于我的网站来讲应该够用。

5. 合并压缩 js css

除去引用公共库，网页中还有许多本身写的 js 与 css，若是咱们直接把开发环境的文件拿来用无疑很浪费流量，所以在编写好网页测试完毕后，咱们应该将 css 和 js 压缩合并成一个或者几个文件，这样既减小了请求次数又减小了流量消耗，一举两得。 固然还有 html 压缩，不过 ms 现阶段还有一些坑，就先不用了。 说到合并压缩，第一时间播追就想到了 webpack ，前端工程化神器，简单配置一下就能够彻底搞定任务：

博主网站本身的 js 工程文件放在 /webroot/static/src/js/ 中，假如咱们要将压缩合并后的文件放在 /webroot/static/dist/js/ 中：

在 /webroot/ 下新建文件夹 webpack , 进入文件夹，新建文件 package.json:

{
  "name": "RaPo3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "rapospectre",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.24.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  }
}

保存后执行：

npm install
//或
cnpm install
//若是你有的话

而后新建 webpack 配置文件 webpack.config.js:

var webpack = require('webpack');
module.exports = {
    entry: {
        base: ['../static/js/src/http.js', '../static/js/stickUp.min.js', '../static/js/src/base.js'],
        index: ['../static/js/src/index.js'],
        detail: ['../static/js/editormd.js', '../static/js/src/article.js'],
        know: ['../static/js/editormd.js', '../static/js/src/know.js'],
        list: ['../static/js/src/list.js']

    },
    output: {
        path: '../static/js/dist/',
        filename: '[name].js'
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false
            },
            compress: {
                warnings: true
            }
        }),
    ]
}

这里要注意的是若是你的 js 文件间的引用是传统的 html 引入后引用那么在这里合并时记得把你被引用的方法对象等等设置为全局，好比 b.js 要引用 a.js 中的函数 c，合并前要在 a.js 中加上（ 固然若是你一直用 es6/node 写 js 就不用看这里了 ）：

window.c = c;
或
this.c = c;

否则 c 就会被看成局部函数封装起来。

改完后运行 webpack 提示成功后看到 dist 目录里已经输出了合并压缩好的文件，以前 12kb 的文件通过压缩合并后只有 6kb 大小，而后咱们将其替换到网页中便可。

6. 代码优化

页面代码的优化对于页面加载速度也有不小的影响，最广为人知的：

HTML头部的JavaScript和写在HTML标签中的Style会阻塞页面的渲染，所以CSS放在页面头部并使用Link方式引入，JavaScript的引入放在页面尾

其次还有：

1. 按需加载，把统计、分享等 js 在页面 onload 后再进行加载，能够提升访问速度；

2. 优化 cookie ，减小 cookie 体积；

3. 避免 <img> 的 src 为空；

4. 尽可能避免设置图片大小，屡次重设图片大小会引起图片的屡次重绘，影响性能；

5. 合理使用display属性：

a.display:inline后不该该再使用width、height、margin、padding以及float
b.display:inline-block后不该该再使用float
c.display:block后不该该再使用vertical-align
d.display:table-*后不该该再使用margin或者float

1. 不滥用Float 和 web 字体；

2. 尽可能使用CSS3动画；

3. 使用 ajax 异步加载部分请求；

7. HTTP2 与 gzip

HTTP2 是以 SPDY 为基础开发的。 SPDY 系列协议由谷歌开发，于 2009 年公开。它的设计目标就是下降 50% 的页面加载时间，因此 HTTP2 在很大程度也是为了优化页面加载时间，同时 HTTP2 支持多路复用，简单说就是全部的请求都经过一个 TCP 链接并发完成。 而 gzip 你们都不陌生，就是一种压缩网页的技术，固然压缩网页进行传输的代价就是给服务器增长一些压缩的负担，固然这种牺牲是值得的。

如何开启 HTTP2 与 gzip？ 博主的网站基于 nginx + uWSGI 进行服务，所以只要在 nginx 开启 HTTP2 与 gzip 就好：

开启 HTTP2

nginx 1.9.5 以后才支持 HTTP2 ，并且须要配置编译参数。

开启 gzip

直接打开 nginx 配置文件, 好比博主的在 /etc/nginx/nginx.conf ， 而后加上：

server{
        gzip  on;
        gzip_comp_level 6;
        gzip_proxied any;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript application/x-font-woff;
        }

而后重启 nginx 便可

最后，让咱们清除缓存，再次打开网站：

总加载流量 527kb ，页面完成加载时间 1.84s，对比以前加载时间 8.18s ，1.38MB 流量，总体时间提高了 4 倍多！用手机端访问测试，简直快的飞起，不信你也来[访问] 1 试试呀～

原文章：http://blog.csdn.net/hj7jay/article/details/52770285