前端性能优化的方法

前端性能优化分为两类

1.文件加载更快
2.文件渲染更快

1.加载更快的方法:

1.让传输的数据包更小(压缩文件/图片):图片压缩和文件压缩 
2.减少网络请求的次数:雪碧图/精灵图、节流防抖 
3.减少渲染的次数:缓存(HTTP缓存、本地缓存、Vue的keep-alive缓存等)

2.渲染更快的方法:

 1.提前渲染:ssr服务器端渲染 
 2.避免渲染阻塞:CSS放在HTML的head中 JS放在HTML的body底部 
 3.避免无用渲染:懒加载 
 4.减少渲染次数:对dom查询进行缓存、将dom操作合并、使用减少重排的标签  

注意点

1.雪碧图的应用场景一般是项目中不常更换的一些固定图标组合在一起,比如logo、搜索图标、切换图标等。 
2.电商项目中最常用到的懒加载,一般在查看商品展示的时候通常下拉加载更多,因为商品数据太多,一次性
  请求过来数据太大且渲染的时间太长。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值