提升页面性能的方法

• 非核心代码异步加载
• 利用浏览器缓存
• 使用CDN
• 资源压缩合并，减少http请求
• 预解析DNS

异步加载

• 动态脚本加载

var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="package.js";
document.body.appendChild(oScript);

• defer
  在html解析完之后执行，按顺序加载
  <script type="text/javascript" defer></script>
• async
  加载完成立即执行
  <script type="text/javascript" async></script>

浏览器缓存

深入了解：https://segmentfault.com/a/1190000011212929

• 强缓存：
  --在没有到过期时间之前，不会和服务器通信，直接请求资源
  --Expires-->绝对过期时间
  --Cache-Control-->相对过期时间

  
  强缓存

• 协商缓存
  --Last-Modified-->最后修改时间
  --lf-Modified-Since-->请求时携带的时间
  --Etag-->服务器下发的标识
  --If-None-Match

  
  协商缓存1
  协商缓存2

DNS预解析

• DNS:Domain Name System，域名系统，通过域名，最终得到该域名对应的IP地址的过程叫做域名解析

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

• https协议的网站默认关闭DNS预解析，强制打开DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" />
• 在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
  注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。

CDN

• CDN:称Content Delivery Network，即内容分发网络。
• 基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
• 通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络
• CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
• 其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。