前端优化大全

骨架屏

这是大部分系统都会使用的技术,骨架屏是在图片及内容还未加载出来时先使用CSS生成的一个基础样式模板,当然大家不用重复的造轮子,可以直接搜索骨架屏会有相应的库可以直接使用

减少本地图片

大家都知道前端部署在服务器上时,加载前端文件以及本地图片时候那响应就会比较慢了,可以把本地图片尽量丢到静态服务器上或者直接用网上一些免费的列如七牛云啥啥啥的PS:没有打广告的嫌疑

减少接口的请求数量

这个东西最好是要和后台沟通好,沟通不好可能会打起来。在后台接口处理数据不强耦合的情况下可以要求他们尽量把数据在一个接口下通不过不同的对象包含返回,这样可以大大减少接口请求的数量

CDN

现在前端都是基于框架下开发还有相应的依赖,但是这样会造成打包出来的前端文件包过大,这时候就可以用到CDN,尽量将框架,依赖通过CDN的方式引入,目前CDN有非常多,可以直接搜索使用

本地缓存技术

很多使用我们在不同的页面可能会使用到相同的参数或者数据,这时候就不需要调用接口,尽量将数据存储在本地中,列如sesstionStorage、localStorage

接口的防抖和节流

其实防抖节流差不多一个意思,只是实现的方式不同。在我们点击一个按钮时候会去请求接口,这个时候如果接口响应比较久,或者用户网络比较差的情况,数据没有及时加载,用户会不停的点击按钮请求接口,如果手速快点的人,一秒点个十七八下也不是不可能,这样就会造成非常多的接口请求出去,会造成服务端不必要的压力,这时候就要用到防抖节流了

首页的打开速率

这是大部分前端比较关心的问题,因为使用框架的情况,一般入口文件都会出现过大的情况,可以沿用上面CDN的方式,还有就是进行webpack配置,通过拆分入口文件,进行懒加载

清除不必要的定时器和全局事件

有时候我们会做一个全局的键盘事件,或者一个计时任务,但是因为目前框架都是单页面形式,所以在页面跳转,或者组件销毁之前需要清除一下,不然你的控制台就会给你闪红告诉你栈溢出了

路由懒加载

这是大家最熟知的也没少好写的,反正就是别把路由一起怼进去就完了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值