关于提升网站性能的几点建议（一）

  最近在学习《高性能网站建设指南》这本书，本文算是一个学习笔记，将学到的东西进行整理一下，方便后面查看。

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

1 文件合并（减小HTTP请求数量）

• CSS Sprites

  利用css sprites将网站用到的图片合并成一张图片，经过background-position、width、height控制背景图位置来使用某一个图标，这种方式能够将多个图片请求缩减为一次，生成css sprites的工具也不少，grunt和gulp中都有相关的插件，CssGaga也不错。

• 合并js和css

  和精灵图同样，合并css和js文件也是减小HTTP请求很重要的方式，对css文件的合并目前来讲没有什么争议，可是对于当前js模块化盛行，将全部js文件合并成一个文件，仿佛是一种倒退。正确的方式是遵照编译型语言的模式，保持js的模块化，在生成过程当中只对初始请求用到的js文件生成目标文件。

2 使用内容发布网络（减小HTTP请求时间）

  HTTP请求时间另外一个影响因素是你与网站web服务器所处的距离，显然距离越远，请求所需的时间也越久，经过CDN能够大大改善这一点。

  CDN是分布在多个不一样地理位置的web服务器，用于更加有效的向用户发布内容。CDN最主要的功能是给终端用户存放静态文件，另外也提供下载、安全服务等功能。

3 设置浏览器缓存（避免重复HTTP请求）

• 使用Expire/Cache-control

  浏览器经过使用缓存能够避免每次都进行重复的请求，HTTP 1.0和HTTP1.1分别有不一样的缓存实现方式，Expires(1.0)和Cache-control(1.1)。Web服务器经过expires告诉客户端在指定的时间内，都使用该文件的缓存副本，再也不向服务端重复发出请求，例如：

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

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

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

Cache-Control: max-age=31536000

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

• 配置或移除ETag

  使用Expire/Cache-Control能够避免第二次访问时，使用本地缓存避免重复HTTP请求，提升网站速度。然而，在用户点击了浏览器刷新或者在expire已过时的状况下，仍然会向服务端发出HTTP GET请求，而此时若是该文件并无发生变化，服务端不会返回整个文件而是会返回304 Not Modified状态码。

  服务端判断该文件是否发生变化的依据有两个：Last-Modified（最新修改日期）和ETag（实体标签）;

  ETag（Entity Tags）是在HTTP 1.1引入的，与Last-Modified同时存在时要有更高的优先级。服务端经过对比客户端发来的ETag（If-None-Match）和当前ETag，若相同返回304 Not Modifed，不然返回整个文件以及200 OK。

  ETag存在一个问题：当浏览器向一个服务器发送GET请求原始组件，以后又向另外一台服务器请求该组件时，ETag是不匹配的，固然，若是你的网站寄宿在一台服务器上不存在这个问题，而如今不少网站使用多台服务器，ETag的存在就大大下降验证有效性的成功率。

  存在这个问题是时的解决办法是对ETag进行配置，移除服务器innode值只保留修改时间戳和大小做为ETag值，或者直接移除ETag，使用Last-Modified来验证文件有效性。

4 压缩组件（减少HTTP请求大小）

  经过对HTTP传输的文件进行压缩减少HTTP请求的大小，提升请求速度，GZIP是目前最经常使用也是最有效的压缩方式。

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

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

5 CSS文件放在首部

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

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

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

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

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

6 JS文件放在尾部

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

  为何会这样呢？缘由有两个：

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

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

博文做者：vicfeel 博文出处：http://www.cnblogs.com/vicfeel 本文版权归做者和博客园共有，欢迎转载，但须保留此段声明，并给出原文连接，谢谢合做！ 若是阅读了本文章，以为有帮助，您能够为个人博文点击“推荐一下”！