一、提升页面性能的方法有哪些？
1. 资源压缩合并，减少HTTP请求
- 图片、视频、js、css等资源压缩合并，开启HTTP压缩，把资源文件变小
2. 非核心代码异步加载 →异步加载的方式 → 异步加载的区别
- 异步加载的方式
① 动态脚本加载
使用document.createElement(‘script’)，创建script标签，最后把这个标签加载页面上
②defer
defer作用是文档加载完毕了再执行脚本，这样回避免找不到对象的问题
<script defer>
function document.body.onload() { alert(document.body.offsetHeight);
}
</script>
③async
2. 异步加载的区别
① defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="./defer1.js" defer></script><title>Document</title>
</head>
<body>
<script>console.log('write')
</script>
<script type="text/javascript">for(var i =0; i <20000; i++) {if (i % 2000 === 0) {console.log(i)}}
</script>
</body>
</html>
②async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关
3. 利用浏览器缓存 →缓存的分类 → 缓存的原理
- 缓存的原理
是指资源文件再浏览器中备份，比如请求服务端一个图片，然后把图片缓存到了本地，浏览器下次请求时，直接在电脑磁盘中读取，无需再次请求 - 缓存的分类
1-1 强缓存: 不会向服务器发送请求,直接从缓存中读取资源
Expires 过期时间（服务器的绝对时间）
// 拿客户端的本地时间与服务器的时间进行比较，如果小于服务器时间，直接取缓存；缺点本地时间可以与服务器时间不一致，原因是本地时间可以修改
Expires: Thu,21 Jan 2017 23:39:02 GMT
Cache-Control 过期时间（相对时间）
// 客户端的相对时间，3600秒之内，我不会请求服务器，直接在浏览器取缓存Cache-Control:max-age = 3600
PS：当这两个时间都下发了， 以Cache-Control 相对时间为准
1-2 协商缓存：向服务器发送请求,服务器会告诉你是否使用缓存
Last-Modified 上次修改的时间
If-Modified-Since 上次修改的时间
Last-Modified 是由服务器发送给客户端的HTTP请求头标签
If-Modified-Since 则是由客户端发送给服务器的HTTP请求头标签
Etag 哈希值
If-None-Match
详细解析文章
4. 使用CDN ☆
CDN: 内容分发网络，把主体网站的资源（静态资源：js、css、图片、视频等）分发到各个CDN服务商，根据用户所在区域从最近的CDN服务商获取资源。
例子： 某个广州的用户打开了淘宝页面，杭州服务器就根据区域，重定向到广州CDN服务商获取页面资源，节约了用户打开页面的时间，提升了用户体验，尤其是页面第一次打开的时候，使用CDN效果明显
作用：减少路由次数，提升下载速度，缩短传输时间，提升用户使用体验
5. DNS预解析
DNS：域名系统，每一个域名都对应一个唯一的IP地址，DNS 就是管理域名和IP地址映射关系的分布式数据库
通过域名查找到对应的IP地址的过程叫作域名解析
DNS预解析：是浏览器试图在用户访问链接之前解析域名，减少用户点击当链接的相应时间
例子：当我们打开淘宝网时，把所有的a标签跳转的链接抓取出来，提前做这些链接的域名解析，当用户点击这些链接时，响应就很快。
参考文章
// http开头的页面，默认打开A标签的预解析；
// 如果页面是https开头的，默认关闭A标签的预解析， "x-dns-prefetch-control" 强制打开A标签的预解析
<meta http-equive="x-dns-prefetch-control" content="on">
// dns-prefetch 指定特定域名进行预读取
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
