前端项目优化

一、网络交互层面的优化

1.DNS预获取

在我们网站里面可能会存在很多域名,但是每次发送TCP请求的时候都会DNS解析(虽然每请求一次浏览器会缓存本地,下次再请求会跳过DNS解析这部分,但是只缓存一分钟)===》所以这里我们可以做优化(预获取,在head中先获取,让后面资源加载能顺畅一点)
在这里插入图片描述

2、减少HTTP请求次数和请求资源大小

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
CDN资源
GZIP压缩(服务器端开启)
图片懒加载、前端骨架屏:开启只用默认的占位块 占位(保证结构美观)=>开始只加载第一屏数据(图片都是延迟加载),滚动到哪一屏幕,再去加载这一屏幕的数据和图片
服务器骨架屏:首屏内容都是服务器直接渲染好的(在服务器压力能抗住的情况下,比客户端一步步渲染会快一些)例如:SSR

3、缓存

在这里插入图片描述

资源缓存-强缓存|协商缓存

在这里插入图片描述

强缓存

在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述

  • 我们来看一下是否使用了缓存
  • 在这里插入图片描述在这里插入图片描述在这里插入图片描述
  • 协商缓存

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

数据缓存(localStorage )
离线缓存 manifest(一般很少用)
二、代码上的优化

在这里插入图片描述

三、安全上优化
四、webpack优化
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值