互联网有一个的8秒原则。用户访问网页时，时间超过8秒就会感到不耐烦，加载时间过长就会放弃访问。大多数用户期望网页在2秒钟内被加载。事实上，每增加一秒钟的加载时间，你就会失去7%的用户。八秒并不是一个的八秒，它只是向网站开发者展示了加载时间的重要性。如何才能优化页面性能，提高页面加载速度？这是本文要讨论的主要问题。但是性能优化是一个综合性的问题，没有标准答案。列出所有的东西并不容易。本文只关注一些核心点，以下是我对性能优化常用方法的总结：

首先，资源压缩和整合

主要包括这几个方面：html压缩，css压缩，js压缩和混淆，文件合并。

资源压缩可以删除文件中的冗余字符，如回车和空格。当您在编辑器中编写代码时，您将使用缩进和注释。这些方法无疑会使您的代码简洁易读，但也会在文档中增加额外的字节。

1.html压缩

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

如何压缩html:

使用在线网站进行压缩(开发期间一般不使用)

Nodejs提供了html-minifier工具

后端模板引擎渲染压缩

2.css代码压缩：

Css代码压缩就是简单的无效代码删除和css语义组合

如何压缩css:

使用在线网站进行压缩(开发期间一般不使用)

使用html迷你工具

使用clean-css压缩css

163807b8c46632c2.png

3.js压缩和混淆

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

删除无效字符

删除评论

代码语义的简化和优化

代码保护(重要的是代码逻辑变得混乱，代码的可读性降低)

如何压缩和混淆js

使用在线网站进行压缩(开发期间一般不使用)

使用html迷你工具

用uglifyjs2压缩js

事实上，css压缩和js压缩以及混淆比html压缩更有利可图。同时，css代码和js代码比html代码多得多。通过css压缩和js压缩来减少流量是显而易见的。所以对于大公司来说，html压缩是可选的，但是css压缩和js压缩以及混乱是必须存在的！

4.合并文档

163b1b2e78785581.png

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

文件之间存在插入的上行请求，这增加了N-1个网络延迟

它受数据包丢失的影响更严重

在保活模式下可能会有这样一种情况，在经过代理服务器时可能会断开连接，也就是说不能一直保持保活状态

压缩合并css和js可以减少网站的http请求数量，但是合并文件可能会出现渲染：屏、缓存失效等问题。那么如何处理这个问题呢？-公共图书馆的合并和不同页面的合并。

如何合并文件

使用在线网站进行文件合并

用nodejs实现文件合并(大口，fis3)

第二，非核心代码的异步加载

1.异步加载模式

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

异步模式

异步属性是HTML5的新属性，需要Chrome、FireFox和IE9浏览器的支持

异步属性指定一旦脚本可用，它将异步执行

异步属性仅适用于外部脚本

如果有多个脚本，这种方法不能保证脚本按顺序执行

script type=' text/JavaScript ' src=' XXX . js ' async=' async '/script

延迟模式

兼容所有浏览器

延迟属性指定是否延迟脚本执行，直到加载页面

如果有多个脚本，此方法可以确保所有具有延迟属性的脚本都按顺序执行

如果脚本没有更改文档的内容，您可以将“延迟”属性添加到脚本标签中，以加快文档的处理速度

动态创建脚本标签

在定义defer和async之前，异步加载模式是动态创建脚本，然后通过window.onload方法加载页面后，将脚本标签插入DOM。具体代码如下：

functionaddScriptTag(src){

var script=document . CreateElement(' script ')；

script.setAttribute('type '，' text/JavaScript ')；

script.src=src

document.body.appendChild(脚本)；

}

window.onload=function(){

addScriptTag(' js/index . js ')；

}

2.异步加载的区别

HTML解析完成后会执行defer。如果有多个，它将按加载顺序执行。

2)async在加载后立即执行。如果有多个异步，执行顺序与加载顺序无关。

163807cc417cc0d0.jpg

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

第三，使用浏览器缓存

对于web应用程序，缓存是提高页面性能和降低服务器压力的强大工具。

浏览器缓存类型

1.强缓存：不会向服务器发送请求，直接从缓存中读取资源。在chrome控制台的network选项中，可以看到请求返回状态码200，大小显示从diskcache或者从frommemorycache；

相关标题：

Expires:响应头中的到期时间。当浏览器再次加载资源时，如果它在此到期时间内，它将到达强缓存。它的值是一个时间的格林尼治标准时间格式的时间字符串，如2018年1月21日：到期23:39336002格林尼治标准时间

缓存控制：这是一个相对时间，在配置缓存时用秒和数值表示。当该值被设置为max-age=300时，这意味着资源将在该请求的正确返回时间(将由浏览器记录)的5分钟内被再次加载，并且强缓存将被命中。更大年龄=300的缓存控制：

简单总结：其实两者差别不大。区别在于Expires是http1.0的产品，Cache-Control是http1.1的产品，如果两者同时存在，Cache-Control的优先级比Expires高；过期在某些不支持HTTP1.1的环境中会很有用。因此，过期实际上是一种过时的产品。目前它的存在只是一种兼容的写法。判断缓存是否被强缓存缓存缓存的依据来自于是否超过某个时间或者某个时间段，而不关心服务器端的文件是否已经更新，这可能导致加载的文件不是服务器端的最新内容。怎么才能知道服务器端的内容相对于客户端有没有更新？此时，我们需要协商缓存策略。

2.协商缓存：向服务器发送请求，服务器会根据该请求的requestheader的一些参数判断是否命中协商缓存。如果命中，将返回304状态码，并带来新的responseheader通知浏览器从缓存中读取资源；此外，协商缓存需要与缓存控制一起使用。

相关标题：

最后修改和如果修改自：当服务器次请求资源时，它会以“最后修改：GMT”的形式将资源的最后更改时间添加到实体头并返回给客户端。

最近修改日期：2016年7月22日星期五： GMT :47336000

客户端将为资源标记该信息，下次再次请求时，它会将该信息附加到请求消息中，并将其提交给服务器进行检查。如果传输的时间值与服务器上资源的最终修改时间一致，则意味着资源没有被修改，直接返回状态码304，内容为空，节省了传输的数据量。如果这两个时间不一致，服务器将发回资源并返回状态代码200，类似于个请求。这确保了资源不会被重复地发送到客户端，并且当服务器改变时，客户端可以获得最新的资源。304响应通常比静态资源小得多，因此节省了网络带宽。

1637d0bbda996de9.png

但是最后修改有一些缺点：

一、部分服务器无法获得准确的修改时间

.文件修改时间已更改，但文件内容未更改

既然是根据文件修改时间来确定缓存是否不足，那么是否可以直接根据文件内容是否被修改来确定缓存策略？- ETag和如果-不匹配

ETag和if-none-match: Etag是上次加载资源时服务器返回的responseheader，是资源的标识符。每当资源改变时，etag将被重新生成。当浏览器下次加载资源向服务器发送请求时，它会将上次返回的Etag值放入requestheader中的If-None-Match。服务器只需要比较客户端发送的If-non-Match与自己服务器上的资源的ETag是否一致，就可以很好的判断该资源是否相对于客户端进行了修改。如果服务器发现ETag不匹配，会直接将新资源(包括新的ETag)以常规GET200包的形式发送给客户端；如果ETag一致，直接返回304通知客户端直接使用本地缓存。

本文转载自中文网站