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

1.资源压缩合并，减少http请求
2.非核心代码异步加载------->异步加载的方式-------->异步加载的区别
3.利用浏览器缓存-------->缓存的分类------->缓存的原理
4.CDN（网络优化）让网络快速到服务器下载资源
5.预解析DNS

非核心代码异步加载

异步加载的方式:
1.动态脚本加载（用JS动态创建script节点）
2.defer ------- <script defer src=""></script>
3.async ------- <script async src=""></script>

异步加载的区别
1.defer是在html解析完成后才执行，如果是多个，按照加载顺序依次执行
2.async是在加载完成之后立即执行，如果是多个，执行顺序和加载顺序无关

利用浏览器缓存

缓存的分类
1.强缓存（直接拿过来用）
Expires(过期时间) -----绝对时间（服务器的时间可能和客户端不一致）
Cache-Control-----------相对时间（Cache-Control:max-age=3600s秒）
2.协商缓存（浏览器发现本地有缓存，向服务器问一下能不能用）
Last-Modified（上次修改的时间）--------If-Modified-Since
Etag （hash值）------------If-None-Match

CDN（网络优化）让网络快速到服务器下载资源

当页面第一次打开的时候，浏览器缓存是起不了作用的，使用CDN效果是非常明显的；

预解析DNS

<meta http-equiv="x-dns-prefetch-control" content="on">打开DNS预解析
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

页面中所有的a标签在一些高级浏览器中是默认打开DNS预解析的，若页面时https，DNS解析则大多默认关闭，加上第一句是打开DNS预解析

移动端性能陷阱

减少对DOM元素操作

1.减少或者避免repaint,reflow
重绘repaint：颜色，字体发生变化
2.reflow：位置发生变化，变化成本要比 repaint大

缓存

PC时代：
http缓存，response header
html5时代提供很多缓存机制：
localStorage
sessionStorage
indexDB可以给字段做索引

css3transform代替dom做些动画
性能会更好

不成文的注意点：

不要给非static定位元素增加css3动画
适当的使用硬件加速
- canvas触发硬件加速

页面性能