据调查（?），当网页打开需要超过6秒时，绝大多数的访客都会退出，一般最好的体验是在1~2秒左右，当网页打开速度越慢时，访客对该网页就会越不信任。
Web的性能优化，其实就是想尽一切办法，将网页的加载速度提升到最快。
从哪些方面可以做到Web性能优化？
由于需要将网页的加载速度提升到最快，可以模拟以下场景：从访客在地址栏中输入想要访问的地址，敲下回车，到网页加载完毕。在这其中发生在浏览器背后的流程，将其列出来，应该是这样的：
- 查找缓存
- DNS查询
- 建立TCP连接
- 发送HTTP请求
- 后台处理请求
- 接收后台响应
- 接收响应完成 -> HTML
- 查看Doctype html/html5/xml
- 逐行解析（阅读代码）
- 看到标签
- 在页面中渲染该标签（Firefox浏览器会这么做）
- 所有的CSS下载完成后，再渲染该标签（Chrome浏览器会这么做）
- 看到CSS -> 下载CSS -> 同时下载下一个CSS -> 可以同时下载4个（或8个，取决于浏览器）CSS，即下载并行，解析串行
- 看到JS -> 下载JS -> 同时下载下一个JS -> 可以同时下载4个（或8个，取决于浏览器）JS，即下载并行，解析串行，并且JS会阻塞HTML的加载
以上就是从敲下回车，到网页加载完毕的全过程。
Web性能优化的方法
减少DNS查询
假设网页里的5个CSS文件，来自5个不同的网站，那么浏览器就会进行至少5次的DNS查询。如果将所有的文件都放在同一个网站，就会大大减少DNS查询损耗的时间。
TCP连接的连接复用
在HTTP请求头里，写上keep-alive，在建立起TCP连接后，浏览器与服务器的连接就不会断开，下次浏览器发起请求时，就不需要再次与服务器建立TCP连接了。
HTTP2.0里的多路复用。
减少Cookie
减少HTTP请求里的Cookie数量，附带的数据越少，HTTP请求当然就越快。
Cache-Control
用本地的缓存文件响应HTTP请求，就不需要耗费无谓的HTTP请求时间。
例：'Cache-Control', 'max-age=30'，缓存保留30秒，在30秒内请求同一个URL时，就直接读取本地的缓存文件，而不再等待响应的内容。
同时发送多个请求
如果页面上有4个CSS，浏览器就会同时发送4个HTTP请求，一个域名只能同时发4个或8个HTTP请求，如果想同时发送很多个HTTP请求（10个），就需要增加域名数量。当文件很少的时候，一个域名就足够，以适当减少DNS查询；当文件很多的时候，可以适当增加多个域名，让浏览器可以同时发起多个请求，以减少请求时间。
大专栏 Web性能优化的一些方法Tag" class="headerlink" title="使用ETag">使用ETag
ETag的主要作用，是在文件后面添加一个唯一的参数（例如MD5，摘要算法），ETag会随着文件（MD5）的改变而改变，当浏览器端重新请求时，发现有ETag没有发生变化的文件时，就不会再重新下载文件，借此加快了HTTP响应的时间。
在响应头里添加一个'ETag',fileMD5时，接收响应时，就会看到这个Etag响应头，在下次发送请求时，浏览器会同时发送一个If-Node-Match的请求头，这个请求头会对比在服务器端的文件与之前接收响应头的ETag进行对比，如果发现两个MD5是一样的，说明文件没有发生变化，这次的响应就不需要再带上响应头，只需返回一个304状态码，从而减少了HTTP响应的时间。
GZip 压缩文件
通过GZip压缩文件，使得响应体的体积变小，等浏览器接收到响应内容了，再在本地解压缩，缩短响应时间。
Doctype
Doctype 不能不写，不能写错。
如果不写Doctype，浏览器会在几种文档类型中预读或猜测其中一种，在此过程中会浪费时间。
JS、CSS与CDN
CDN
CDN（Content Delivery Network）内容分发网络，指一组分布在各个地区的服务器。服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最近，来满足数据的请求。 CDNs 提供快速服务，较少受高流量影响。
- 通过CDN向用户分发传输相关库的静态资源文件，可以降低自身服务器的请求压力。
- 大多数CDN在全球都有服务器，所以CDNs上的服务器在地理位置上可能比你自己的服务器更接近你的用户。地理距离会按比例影响延迟。
- CDNs已经配置了恰当的缓存设置。使用CDN节省了在服务器中对静态资源文件的配置。
JS与CSS
CSS放head标签里，JS放body的最后面。
因为html标签会在CSS加载完之后才渲染（Chrome浏览器），所以于其阅读两次标签，不如先下载CSS标签。
因为JS会阻塞html标签渲染，所以应该在页面渲染完html标签后，才下载并加载JS文件，所以放在body标签的最后面是最好的选择。
使用外部的JS与CSS：不要把JS和CSS放在html里面，因为文件可以缓存。
懒加载
用户暂时看不到的页面内容，等用户想看到的时候再给用户看，这样可以减少不必要的请求。（例：淘宝）
预加载
用户暂时看不到，但很有可能看的内容，可以先加载第一屏，再加载后面的内容，如此一来，用户的体验就会有一个提升。（例：UC浏览器的小说）
优化图片
图片体积很大，最好能够做到压缩图片体积大小的同时，保证图片的可阅读性。
Audits
Chrome浏览器控制台里，有一个叫 Audits 的tab，可以告诉你当前页面存在的可以优化的地方有哪些。