性能优化日常总结

代码级别优化

• 语义化的标签和代码规范
• 事件委托

1. 减少事件注册，节省内存。
2. 简化了dom节点更新时，相应事件的更新。
3. 适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

• 按需加载
• 动画尽量用css3写
• 懒加载
• css sprits
• iconfont
• 节流和防抖
• vue中路由懒加载和异步组件

项目级别优化

• 资源压缩合并，减少HTTP请求
• 非核心代码异步加载（defer和async）
• 利用浏览器缓存
• 使用CDN
• 预解析DNS

如何预解析DNS

使用场景：

1. 新用户访问，后端可以通过 Cookie 判断是否为首次进入站点，对于这类用户，DNS Prefetch 可以比较明显地提升访问速度。
2. 登录页，提前在页面上进行下一跳页用到资源的 DNS Prefetch。
3. chrome使用了8个异步线程来处理DNS预解析，所以过多的prefetch并不一定能提高网页加载效率。

使用方式：

1. 手动添加设置，在页面head里添加

<link rel="dns-prefetch" href="http://www.google.com">

2.一般会自动预解析a标签的href属性，但为了确保安全，HTTPS页面不会自动预解析。希望在HTTPS页面开启自动解析功能时，添加

<meta http-equiv="x-dns-prefetch-control" content="on">
// off 则是关闭