前端性能优化

性能优化：

+ 1. 减少请求数量

 a. 把前端的公共库合并
 b. 不同页面单独合并
 c. 对于图片，使用雪碧图，base64编码图片，使用字体图标
 d. 减少重定向
 e. 使用缓存
 f. 避免使用空的 href 和 src

+ 2. 减小资源大小

a. 对前端资源进行压缩
b. 使用wep格式图片
c. 开启gzip

+ 3. 优化网络连接

a. 使用CDN网络
b. 并行连接 持久连接 管道化连接

+ 4. 优化资源加载

a. 资源加载位置，css引用在head中，先外链后本页，js引用在body底部，先外链后本页
 b. 资源加载时机，异步加载，设置script的defer和async属性，模块化的话使用按需加载
c. 使用资源预加载和资源懒加载

+ 5. 减少重绘和回流

a. 缓存DOM
b. 减少DOM深度和数量
c. 批量操作dom和css样式
d. 使用事件代理
e. 使用防抖和节流

+ 6. 使用性能更好的API

   a. 用对css选择器
   b. 使用requestAnimationFrame代替setTimeout和setInterval
   c. 使用IntersectionObserver实现图片懒加载
   d. 使用web worker

+ 7. webpack优化

a. 打包公共代码
b. 动态导入和按需加载
c. 剔除无用代码