提升页面性能的方法有哪些？

1. 资源的压缩合并，减少HTTP请求
2. 异步加载
3. 使用更快的网络：CDN
4. 使用浏览器的缓存
5. 预解析 DNS

<meta http-equiv="x-dns-prefetch-control" content="off">
<link rel="dns-prefetch" href="//www.zhix.net">

异步加载 —异步加载的方式 —异步加载的区别

异步加载有三种方式

1. async

async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持

async属性规定一旦脚本可用，则会异步执行

async属性仅适用于外部脚本

页面加载完成后立即执行，如果多个的话，不会按照顺序执行

 <script type="text/javascript" src="xxx.js" async="async"></script>

2. defer

defer兼容全部浏览器
在HTML解析完成后执行
多个js会按照加载顺序执行
如果脚本不会改变文档的内容，可将defer属性加入到script标签中，以便加快处理文档的速度

<script type="text/javascript" src="xxx.js" defer></script>

3. 动态脚本加载

function addScript(src){
	let script = document.createElement('script');
	script.setAttribute("type","text/javascript")
	script.src = src
	script.appendChild(script)
}
window.onload = function(){
	addScript('xxx.js')
}

浏览器缓存 — 缓存分类 — 缓存原理

强缓存
不会向服务器发送请求，而是直接从浏览器中读取缓存资源
强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

Expires 是绝对时间，按客户端为准
Cache-Control 相对时间，即在这个时间之内不会再去服务端请求数据

协商缓存

协商缓存生效，返回304和Not Modified

协商缓存失效，返回200和请求结果

协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag 。