提高网站性能的方法

  前言

  性能黄金法则（Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接收所请求的用户HTML文档上，剩余80%~90%时间花在为HTML文档所引用的所有组件（图片、脚本、样式表等）进行的HTTP请求上，最终用户响应时间花费在页面组件上

  ——Steve Sounders

 

1、减少HTTP请求

　HTTP协议是无状态的应用层协议，意味着每次HTTP请求都需要经历网络层、传输层、链路层从而进行数据传输，而在服务器端，每个HTTP都需要启动独立的线程去处理，这些通信和服务的开销都很昂贵，减少HTTP请求的数目可有效提高访问性能。

　减少HTTP请求的主要手段是：合并CSS，合并JavaScript，合并图片。将浏览器一次访问需要的JavaScript,CSS合并成一个文件，这样浏览器就只需要一次请求。多张图片合并成一张，如精灵图。如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

 

2、使用浏览器缓存（避免重复的HTTP请求）

　对那些经常使用的数据和需要大量的时间来创建的数据可以存储在内存中，后来的请求直接使用，不需要再去重新生成。

　对一个网站而言，像CSS,JavaScript,Logo,图标等这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。通过设置HTTP头中Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天甚至是几个月。有时候，静态资源文件变化需要及时应用到客户端浏览器，这种情况可以通过改变文件名实现，比如一般会在JavaScript后面加上一个版本号，使浏览器刷新修改的文件。

• Expires使用：Web服务器通过expires告诉客户端在指定的时间内，都使用该文件的缓存副本，不再向服务端重复发出请求

  Expires: Thu, 01 Dec 2016 16:00:00 GMT （GMT格式）

　　这个设置意味着截止到2016年12月1日，都可以使用该缓存副本，无需再发出请求。

  Expires这种通过截止日期的方式，存在一个限制：要求客户端和服务端时钟严格同步，而HTTP 1.1引入的Cache-Control通过指定一个以秒为单位的时间指定缓存日期，则不存该限制，

• Cache-Control使用：

Cache-Control: max-age=31536000

　　这个设置意味缓存时间为一年，推荐使用Cache-Control，但是在支持HTTP 1.1的情况下，另外要注意的一点：Cache-Control和Expire同时存在时，Cache-Control具有更高的优先级。

 

 3、压缩组件（减小HTTP请求大小）

　在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效较少通信传输的数据量。文本文件的压缩效率科大80%以上 ，GZIP是目前最常用也是最有效的压缩方式。

 然而，并非所有的资源文件都需要压缩，压缩的成本包括服务端需要花费CPU周期进行压缩，而客户端也需要对压缩文件进行解压缩，必须结合自己网站进行权衡。现在绝大多数网站都对其HTML文档进行压缩，部分网站选择对js、css进行压缩，几乎没有网站对图片、PDF等文件进行GZIP压缩，原因在于这些文件是已经被压缩过的，采用HTTP压缩已经被过压缩的东西并不能使它更小。事实上，添加标头，压缩字典，并校验响应体实际上使它变得更大，而且还浪费了CPU。

 如何对网站开启GZIP，需要在所使用的web服务器（IIS、Nginx、Apache等）中进行设置。

 

4、css文件放在首部

　将CSS文件放在首部和放在尾部，并不影响HTTP请求，因此从请求时间上来讲是一致的，然而从用户体验的角度，将CSS文件放在首部，会获得更好的用户体验。

 原因在于浏览器是从上到下依次解析html文档，将CSS文件置于头部，页面会首先对CSS文件发出请求，随后加载DOM树并对其进行渲染，页面会逐步呈现在用户面前。

 而与之相反，如果将CSS文件放置在尾部，页面加载完整DOM之后请求CSS文件，然后对整个DOM树渲染并呈现给用户，从用户的角度，在css文件没有请求完成之前，整个页面是出于白屏状态的，白屏是浏览器的一种行为，David Hyatt对其的解释是这样的

在样式树没有完全加载之前，渲染dom树就是一种浪费，因为在样式树加载完成之后会再次渲染，出现FOUC(无样式内容闪烁)问题。

 另外要注意的一点，使用link而不是@import引入css样式表，使用@import引入的样式即使写在首部，也会在文档最后加载。

 

5、js文件放在尾部

　HTTP请求是并行的，不同浏览器并行下载的数目也不一样（2、4、或者8个），并行下载提高了HTTP请求的速度。而将JS文件放在首部，不仅会阻塞后面文件的下载而且会阻塞页面的渲染。

 为什么会这样呢？原因有两个：

• JS文件中可能存在document.write修改页面的内容，因此页面会在脚本执行完成之后才可使渲染。
• 不同JS文件不管大小如何，可能存在依赖关系，因此必须按照顺序进行执行，因此在加载脚本的时候并行下载是禁止的。

 所以，最好的方式是讲js文件放置在尾部，等页面所有可视化组件加载完成之后再进行请求，提高用户体验。

 

 6、CDN加速

 　CDN(Content Distribute Network,内存分发网络)的本质上仍然是一个缓存，而且将数据缓存在离用户最近的地方，是用户以最快速度获取数据，即所谓网络访问第一跳。CDN一般缓存的是静态资源，如图片，文件，CSS，Script脚本，静态网页等，但是这些文件访问频率很高，将其缓存在CDN可极大改善网页的打开速度。

 

 

 

 

---

 

注：本文内容转载自：https://www.cnblogs.com/vicfeel/p/5674819.html   、https://blog.csdn.net/liuyang755855737/article/details/78238987