一、提升页面性能的方法有哪些？
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
加速资源，比如网页上使用了多个css或多个图片，如何让客户最快的把这个资源请求过来，使用CDN，让网络快速到达服务端下载下来，尤其是页面第一次打开的时候，使用CDN效果明显
5. 预解析DNS
// http开头的页面，默认打开A标签的预解析；
// 如果页面是https开头的，默认关闭A标签的预解析， "x-dns-prefetch-control" 强制打开A标签的预解析
<meta http-equive="x-dns-prefetch-control" content="on">
// dns-prefetch DNS预解析
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
