提升页面性能的方法大致可归纳为以下几种：1.资源压缩合并，减少HTTP请求   2.浏览器缓存  3.非核心代码异步加载  4.CDN加速  5.DNS预解析

一、浏览器缓存：

缓存分类：1）强缓存 2）协商缓存 

强缓存：在缓存时间未失效前，不会询问服务器，直接加载本地缓存资源，相关的HTTP头：

Expires --后面会跟一个绝对时间，在此之前，缓存都是有效的。

Cache-Control ，它有如下几个值

  • no-cache：在释放缓存副本之前，强制高速缓存将请求提交给原始服务器进行验证
  • no-store：直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
  • public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
  • private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。
  • max-age：从当前请求开始，允许获取的响应被重用的最长时间（秒）。

max-age后面跟的是相对时间

协商缓存：请求发送到服务器后，由服务器判定是否使用缓存，相关的HTTP头：

Last-Modified 资源的最新修改时间 If-Modified-Since 上一次服务器的修改时间

Etag HTTP响应头是资源的特定版本的标识符。这可以让缓存更高效，并节省带宽，因为如果内容没有改变，Web服务器不需要发送完整的响应。

而如果内容发生了变化，使用ETag有助于防止资源的同时更新相互覆盖。

浏览器缓存参考： 浏览器缓存--前端随笔     HTTP缓存策略--前端开发博客 

二、异步加载脚本

异步加载有以下几种方式：1）动态脚本加载  2）defer  3）async

//动态加载脚本
var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.src="package.js";
      document.body.appendChild(myScript);

  defer：只适用于外部脚本，整个页面解析完毕后才会执行，如果是多个，会按照加载顺序依次执行

  async :也只适用于外部脚本，加载完后立即执行，如果是多个，执行顺序并不保证与加载顺序一致

三、预解析DNS

<meta http-equiv="x-dns-prefetch-control" content="on">

<link rel="dns-prefetch" href="//www.zhix.net">