摘要： 性能是最重要的用户体验之一。

• 作者：浪里行舟

Fundebug经授权转载，版权归原作者所有。

引子

互联网有一项著名的8秒原则。用户在访问Web网页时，如果时间超过8秒就会感到不耐烦，如果加载需要太长时间，他们就会放弃访问。大部分用户希望网页能在2秒之内就完成加载。事实上，加载时间每多1秒，你就会流失7%的用户。8秒并不是准确的8秒钟，只是向网站开发者表明了加载时间的重要性。那我们如何优化页面性能，提高页面加载速度呢？这是本文主要要探讨的问题，然而性能优化是个综合性问题，没有标准答案，想要面面俱到罗列出来，并非易事。本文只关注一些核心要点，以下是我总结性能优化常见的办法：

一、资源压缩与合并

主要包括这些方面：html压缩、css 压缩、js的压缩和混乱和文件合并。
资源压缩可以从文件中去掉多余的字符，比如回车、空格。你在编辑器中写代码的时候，会使用缩进和注释，这些方法无疑会让你的代码简洁而且易读，但它们也会在文档中添加多余的字节。

1. html压缩

html代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。

如何进行html压缩：

1. 使用在线网站进行压缩(开发过程中一般不用)
2. nodejs 提供了html-minifier工具
3. 后端模板引擎渲染压缩

2. css代码压缩：

css代码压缩简单来说就是无效代码删除和css语义合并

如何进行css压缩：

1. 使用在线网站进行压缩(开发过程中一般不用)
2. 使用html-minifier工具
3. 使用clean-css对css压缩

3. js的压缩和混乱

js的压缩和混乱主要包括以下这几部分：

1. 无效字符的删除
2. 剔除注释
3. 代码语义的缩减和优化
4. 代码保护(代码逻辑变得混乱，降低代码的可读性，这点很重要)

如何进行js的压缩和混乱

1. 使用在线网站进行压缩(开发过程中一般不用)
2. 使用html-minifier工具
3. 使用uglifyjs2对js进行压缩

其实css压缩与js的压缩和混乱比html压缩收益要大得多，同时css代码和js代码比html代码多得多，通过css压缩和js压缩带来流量的减少，会非常明显。所以对大公司来说，html压缩可有可无，但css压缩与js的压缩和混乱必须要有！

4. 文件合并

从上图可以看出不合并请求有以下缺点：

• 文件与文件之间有插入的上行请求，增加了N-1个网络延迟
• 受丢包问题影响更严重
• keep-alive方式可能会出现状况，经过代理服务器时可能会被断开，也就是说不能一直保持keep-alive的状态

压缩合并css和js可以减少网站http请求的次数，但合并文件可能会带来问题:首屏渲染和缓存失效问题。那该如何处理这问题呢？----公共库合并和不同页面的合并。

如何进行文件合并

1. 使用在线网站进行文件合并
2. 使用nodejs实现文件合并(gulp、fis3)

二、非核心代码异步加载异步加载的方式

1、异步加载的方式

异步加载的三种方式——async和defer、动态脚本创建

① async方式

• async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持
• async属性规定一旦脚本可用，则会异步执行
• async属性仅适用于外部脚本
• 如果是多个脚本，该方法不能保证脚本按顺序执行

<script type="text/java script" src="xxx.js" async="async"></script>

② defer方式

• 兼容所有浏览器
• defer属性规定是否对脚本执行进行延迟，直到页面加载为止
• 如果是多个脚本，该方法可以确保所有设置了defer属性的脚本按顺序执行
• 如果脚本不会改变文档的内容，可将defer属性加入到script标签中，以便加快处理文档的速度

③动态创建script标签

在还没定义defer和async前，异步加载的方式是动态创建script，通过window.onload方法确保页面加载完毕再将script标签插入到DOM中,具体代码如下：

function addScriptTag(src){  
    var script = document.createElement('script');  
    script.setAttribute("type","text/java script");  
    script.src = src;  
    document.body.appendChild(script);  
}  
window.onload = function(){  
    addScriptTag("js/index.js");  
}  

2、异步加载的区别

1)defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行

2)async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

其中蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。

给大家推荐一个好用的BUG监控工具Fundebug，欢迎免费试用！

三、利用浏览器缓存

对于web应用来说，缓存是提升页面性能同时减少服务器压力的利器。

浏览器缓存类型

1.强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码，并且size显示from disk cache或from memory cache；

相关的header:

Expires ：response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。它的值为一个绝对时间的GMT格式的时间字符串， 比如Expires:Thu,21 Jan 2018 23:39:02 GMT

Cache-Control ：这是一个相对时间，在配置缓存的时候，以秒为单位，用数值表示。当值设为max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。比如Cache-Control:max-age=300，

简单概括：其实这两者差别不大，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，两者同时存在的话，Cache-Control优先级高于Expires；在某些不支持HTTP1.1的环境下，Expires就会发挥用处。所以Expires其实是过时的产物，现阶段它的存在只是一种兼容性的写法。强缓存判断是否缓存的依据来自于是否超出某个时间或者某个时间段，而不关心服务器端文件是否已经更新，这可能会导致加载文件不是服务器端最新的内容，那我们如何获知服务器端内容较客户端是否已经发生了更新呢？此时我们需要协商缓存策略。

2.协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；另外协商缓存需要与cache-c