JavaScript关于提高网站性能的几点建议(一)

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

性能黄金法则（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状态码。