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

 

　　一、资源压缩与合并

 

　　主要包括这些方面：html压缩、css压缩、js的压缩和混乱和文件合并。

 

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

 

　　1.html压缩

 

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

 

　　如何进行html压缩：

 

　　使用在线网站进行压缩(开发过程中一般不用)

 

　　nodejs提供了html-minifier工具

 

　　后端模板引擎渲染压缩

 

　　2.css代码压缩：

 

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

 

　　如何进行css压缩：

 

　　使用在线网站进行压缩(开发过程中一般不用)

 

　　使用html-minifier工具

 

　　使用clean-css对css压缩

 

　　163807b8c46632c2.png

 

　　3.js的压缩和混乱

 

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

 

　　无效字符的删除

 

　　剔除注释

 

　　代码语义的缩减和优化

 

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

 

　　如何进行js的压缩和混乱

 

　　使用在线网站进行压缩(开发过程中一般不用)

 

　　使用html-minifier工具

 

　　使用uglifyjs2对js进行压缩

 

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

 

　　4.文件合并

 

　　163b1b2e78785581.png

 

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

 

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

 

　　受丢包问题影响更严重

 

　　keep-alive方式可能会出现状况，经过代理服务器时可能会被断开，也就是说不能一直保持keep-alive的状态

 

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

 

　　如何进行文件合并

 

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

 

　　使用nodejs实现文件合并(gulp、fis3)

 

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

 

　　1、异步加载的方式

 

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

 

　　①async方式

 

　　async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持

 

　　async属性规定一旦脚本可用，则会异步执行

 

　　async属性仅适用于外部脚本

 

　　如果是多个脚本，该方法不能保证脚本按顺序执行

 

　　<scripttype="text/javascript"src="xxx.js"async="async"></script>

 

　　②defer方式

 

　　兼容所有浏览器

 

　　defer属性规定是否对脚本执行进行延迟，直到页面加载为止

 

　　如果是多个脚本，该方法可以确保所有设置了defer属性的脚本按顺序执行

 

　　如果脚本不会改变文档的内容，可将defer属性加入到script标签中，以便加快处理文档的速度

 

　　③动态创建script标签

 

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

 

　　functionaddScriptTag(src){

 

　　varscript=document.createElement('script');

 

　　script.setAttribute("type","text/javascript");

 

　　script.src=src;

 

　　document.body.appendChild(script);

 

　　}

 

　　window.onload=function(){

 

　　addScriptTag("js/index.js");

 

　　}

 

　　2、异步加载的区别

 

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

 

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

 

　　163807cc417cc0d0.jpg

 

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

 

　　三、利用浏览器缓存

 

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

 

　　浏览器缓存类型

 

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

 

　　相关的header:

 

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

 

　　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.协商缓存：向服务器发送请求，服务器会根据这个请求的requestheader的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的responseheader通知浏览器从缓存中读取资源；另外协商缓存需要与cache-control共同使用。

 

　　相关的header:

 

　　①Last-Modified和If-Modified-Since：当第一次请求资源时，服务器将资源传递给客户端时，会将资源最后更改的时间以“Last-Modified:GMT”的形式加在实体首部上一起返回给客户端。

 

　　Last-Modified:Fri,22Jul201601:47:00GMT

 

　　客户端会为资源标记上该信息，下次再次请求时，会把该信息附带在请求报文中一并带给服务器去做检查，若传递的时间值与服务器上该资源最终修改时间是一致的，则说明该资源没有被修改过，直接返回304状态码，内容为空，这样就节省了传输数据量。如果两个时间不一致，则服务器会发回该资源并返回200状态码，和第一次请求时类似。这样保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。一个304响应比一个静态资源通常小得多，这样就节省了网络带宽。

 

　　1637d0bbda996de9.png

 

　　但last-modified存在一些缺点：

 

　　Ⅰ.某些服务端不能获取精确的修改时间

 

　　Ⅱ.文件修改时间改了，但文件内容却没有变

 

　　既然根据文件修改时间来决定是否缓存尚有不足，能否可以直接根据文件内容是否修改来决定缓存策略？----ETag和If-None-Match

 

　　②ETag和If-None-Match：Etag是上一次加载资源时，服务器返回的responseheader，是对该资源的一种唯一标识，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到requestheader里的If-None-Match里，服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了。如果服务器发现ETag匹配不上，那么直接以常规GET200回包形式将新的资源（当然也包括了新的ETag）发给客户端；如果ETag是一致的，则直接返回304知会客户端直接使用本地缓存即可。







本文转载自中文网