关于提高网站性能的几点建议

2019独角兽企业重金招聘Python工程师标准>>>

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

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

1 文件合并&＃xff08;减少HTTP请求数量&＃xff09;

CSS Sprites

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

合并js和css

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

2 使用内容发布网络&＃xff08;减少HTTP请求时间&＃xff09;

HTTP请求时间另一个影响因素是你与网站web服务器所处的距离&＃xff0c;显然距离越远&＃xff0c;请求所需的时间也越久&＃xff0c;通过CDN可以大大改善这一点。

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

3 设置浏览器缓存&＃xff08;避免重复HTTP请求&＃xff09;

使用Expire/Cache-control

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

Expires: Thu, 01 Dec 2016 16:00:00 GMT &＃xff08;GMT格式&＃xff09;

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

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

Cache-Control: max-age&＃61;31536000

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

配置或移除ETag

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

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

ETag&＃xff08;Entity Tags&＃xff09;是在HTTP 1.1引入的&＃xff0c;与Last-Modified同时存在时要有更高的优先级。服务端通过对比客户端发来的ETag&＃xff08;If-None-Match&＃xff09;和当前ETag&＃xff0c;若相同返回304 Not Modifed&＃xff0c;否则返回整个文件以及200 OK。

ETag存在一个问题&＃xff1a;当浏览器向一个服务器发送GET请求原始组件&＃xff0c;之后又向另一台服务器请求该组件时&＃xff0c;ETag是不匹配的&＃xff0c;当然&＃xff0c;如果你的网站寄宿在一台服务器上不存在这个问题&＃xff0c;而现在很多网站使用多台服务器&＃xff0c;ETag的存在就大大降低验证有效性的成功率。

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

4 压缩组件&＃xff08;减小HTTP请求大小&＃xff09;

通过对HTTP传输的文件进行压缩减小HTTP请求的大小&＃xff0c;提高请求速度&＃xff0c;GZIP是目前最常用也是最有效的压缩方式。

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

如何对网站开启GZIP&＃xff0c;需要在所使用的web服务器&＃xff08;IIS、Nginx、Apache等&＃xff09;中进行设置。

5 CSS文件放在首部

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

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

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