提升页面性能

• 资源压缩合并，减少HTTP请求
  
  • JS代码打包，css合并
  • 雪碧图（将icon打包成一张图片）
  • 将图片转换成字体
  • 服务器端配置gzip压缩
• 非核心代码异步加载
  
  • 异步加载的方式
    
    • 动态脚本加载
    • defer
    • async
  • 异步加载的区别（还是优先运行同步队列函数，然后才会运行defer中引用的js中的函数）
    
    • defer实在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行
    • async是在加载完成之后立即执行，如果是多个，无法保证执行顺序，即执行顺序和加载顺序无关

• 利用浏览器缓存

  • 缓存的分类
    缓存可以理解为将资源文件存储在电脑磁盘作为资源可以直接读取

    • 强缓存：不去检测更新，在过期之前，直接使用

      字段	例子	说明
      Expires	Expires:Thu, 21 Jan 2018 22:22:22	value表示绝对时间（服务器）
      Cache-Control	Cache-Control:max-age=3600	maxage是相对时间，相对于下载文件后，3600内有效超过时间则过期，优先级高于Expires

    • 协商缓存：去服务器端检测是否过期

      字段	例子	说明
      Last-Modified If-Modified_since	Last-Modified:Thu, 21 Jan 2018 22:22:22	上次修改时间，如果发现文件修改，则更新文件（内容没变化也会更新）
      Etag	If-None-Match：哈希值	解决时间更新，内容没有更新的问题

  • 缓存的原理

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

• 预解析DNS
  <meta http-equiv="x-dns-prefetch-control" content="one">
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
  备注：对于a标签，很多浏览器会默认进行预解析，如果是https域名，会默认关闭预解析，所以需要meta标签强制打开预解析