再谈前端性能优化

先附上去年那篇文档地址：https://download.csdn.net/download/weixin_42159569/11457155

• 一、http优化
  1、减少前后端的交互次数
  场景1：进入页面时多个下拉框内的数据放在同一个接口中一次性获取
  场景2：合并css，js文件，使用雪碧图，页面加载时减少请求次数
  2、减少单位时间内的接口/资源请求数量
  场景1：懒加载（图片、单页面应用的路由）
  场景2、资源预加载（首屏会比较慢，APP开发时一般会用到，启动图消失前进行预加载）
  3、合理增加并发（由于在HTTP1.1协议下，chrome每个域名的最大并发数是6个）
  场景：图片较大时可以切割成多张小图加载，加快屏幕展示速度，提升用户体验
  4、减小静态资源的大小
  场景1：压缩html，js，css，图片，等静态资源
  场景2：使用字体图标代替图片
  5、合理利用http缓存(这篇文章详谈)
  场景1、Connection:keep-alive，保持tcp连接，避免重复握手
  场景2、cache-control和expires（强缓存）
  场景3、If-Modified-Since，Etag （协商缓存）
  6、避免不必要的cookie存储，因为每个请求都会带着cookie
  7、pwa技术了解一下（我还不是太了解，学习之后会在此处附上文章链接）
  8、Bigpipe
  9、CDN网络分发，DNS预解析（）
• 二、其他优化
  1、脚本加载优化
  场景1:css放前，js放后
  2、避免内存泄漏
  场景1：无用变量设为null，减少闭包使用和闭包内的变量声明（大部分浏览器回收机制都是使用标记清除法）
  场景2：dom清空或删除时，清除其绑定的事件
  场景3：及时清除无用的定时器，避免死循环
  3、dom优化
  场景1、减少dom操作（创建虚拟dom，而后整体插入）
  场景2、减少回流和重绘
  场景3、多用事件委托
  场景4、使用css3（GPU独占浏览器进程中的一个线程，并且不会引起回流和重绘）
  4、大量的计算任务交给webworker处理
  5、节流和防抖（关于防抖节流的一篇文章）
  场景1、input事件，scroll事件，mousemove事件，resize事件等
  6、构建工具优化
  场景1、glup/grunt
  场景2、webpack（后续详细介绍）

参考：
前端性能优化的七大手段
前端性能优化总结