页面性能

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

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

非核心代码异步加载

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

异步加载的区别
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

打开DNS预解析

页面中所有的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触发硬件加速