提升页面性能的方法大致可归纳为以下几种: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">