前端性能优化
去年在项目组做了个分享,专门讲了一下前端性能优化,最近发现当时的文档总结的不是太全并且理论偏多,所以再写一篇文章补充一下,这篇文章主要从实战讲起,所以直奔主题。
先附上去年那篇文档地址: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(后续详细介绍)
参考:
前端性能优化的七大手段
前端性能优化总结