提升页面性能的方法？
- 资源压缩合并，减少HTTP请求（图片合并、JS脚本文件合并、CSS文件合并）
- 非核心代码异步加载——异步加载的方式——异步加载的区别
- 利用浏览器缓存——缓存的分类——缓存的原理
- 使用CDN（网络优先）——本质上是一个缓存，将数据缓存在离用户最近的地方，一般缓存的是静态资源
- 将CSS放在页面最上面，将JS放在页面最下面（页面从上到下加载）
- 把JS和CSS提取出来放在外部文件中（优点：减少了http体积，提高了js和css的复用性，提供可维护性；缺点：增加了http 请求，可通过缓存解决）
- 预解析DNS，减少DNS查询（DNS将请求的域名转换为对应的IP地址，然后将IP返回给浏览器，此过程会花费一定时间，影响页面加载）——方法：缓存DNS查找
1、异步加载的区方式：
- 动态脚本加载（createElement....，创建标签，加入文档）
- defer:是html4.0中定义的，该属性使浏览器延迟脚本的执行，等文档解析完成后会按照他们在文档出现顺序再下载解析
- Async:是html5新增的属性，作用是让脚本能异步加载，下载完毕后再执行。
2、异步加载的区别：
（1）defer是在HTML解析完之后才执行，如果是多个，按照加载的顺序依次执行
（2）Async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关
3、浏览器缓存——强缓存、协商缓存
（1）强缓存，不向服务器发请求，直接从本地硬盘或内存中获取。利用HTTP响应报文中的Expires和Cache-Control两个字段来控制，表示资源的缓存时间。
Expires:该字段是HTTP/1.0的规范，是一个绝对时间的GMT格式，这个时间代表资源的失效时间，在该时间内即：命中强缓存。缺点：当客户端与服务器时间出现较大偏差，就会出现混乱。
Cache-Control:为了解决Expires出现的问题，HTTP/1.1添加了Cache-Control。主要是利用max-age来进行判断，是一个相对时间。如：Cache-Control:max-age=600,代表着资源的有效期是600秒。
（2）协商缓存，向服务器发出验证，如果资源无更改，不重新返回资源内容，资源内容从本地获取。需要有服务器来确定客户端缓存资源是否可用。主要涉及Header中两个字段：Last-Modified/If-Modified-Since或ETag/If-None-Match,这两种字段都是成对出现的。若第一次响应头没有Last-Modified或ETag，则后续的请求头部也不会有If-Modified-Since或If-None-Match。
Last-Modified/If-Modified-Since：浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modified，它是一个时间标识该资源的最后修改时间。当浏览器再次请求该资源时，HTTP请求头部会带上If-Modified-Since，该值为上次响应报文头部的Last-Modified的值，服务器接收到If-Modified-Since，会根据资源的最后修改时间来判断是否命中协商缓存，如果命中，返回304(Not Modified)，并且不会返回Last-Modified和无响应body。否则返回200,并且返回Last-Modified和有响应的body。
ETag/If-None-Match：它们的值不是一个时间标识，而是一个校验码。ETag可以保证每一个资源都是唯一的，资源变化都会导致ETag变化，服务器根据接收到的If-None-Match来判断是否命中协商缓存。但是当服务器返回304的时候，由于ETag重新生成过，响应头部也会带上ETag，即使它跟之前的没有变化。
与缓存相关的HTTP头：Expires,Cache-Control,Last-Modified,If-Modified-Since,ETag,If-None-Match