前端面试之性能优化(超详细)

本文详述了前端性能优化的各种策略,包括首页加载速度优化、减少HTTP请求、采用HTTP2协议、使用服务端渲染以提高首屏渲染速度和SEO,以及避免重绘重排、事件委托、使用flex布局和利用transform、opacity进行高性能动画实现。这些技巧对于提升用户体验和优化网站性能至关重要。
摘要由CSDN通过智能技术生成

1.首页加载速度优化:
(1)减少DNS查找:可以将网站所需的文件下载到本地,不应调用别人支持的CDN
(2)css优先加载,js延迟加载
(3)减少http请求
(4)缩小文件体积
2.减少http请求:
(1)首页数据缓存
(2)避免发送重复请求
(3)使用精灵图
3.使用HTTP2
(1)解析速度快:服务器解析 HTTP1.1 的请求时,必须不断地读入字节,直到遇到分隔符 CRLF 为止。而解析 HTTP2 的请求就不用这么麻烦,因为 HTTP2 是基于帧的协议,每个帧都有表示帧长度的字段
(2)多路复用:HTTP1.1 如果要同时发起多个请求,就得建立多个 TCP 连接,因为一个 TCP 连接同时只能处理一个 HTTP1.1 的请求。在 HTTP2 上,多个请求可以共用一个 TCP 连接,这称为多路复用。同一个请求和响应用一个流来表示,并有唯一的流 ID 来标识。 多个请求和响应在 TCP 连接中可以乱序发送,到达目的地后再通过流 ID 重新组建。
(3)首部压缩:HTTP2 提供了首部压缩功能,HTTP/2 在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键-值对,对于相同的数据,不再通过每次请求和响应发送。
(4)服务器推送:HTTP2 新增的一个强大的新功能,就是服务器可以对一个客户端请求发送多个响应,例如当浏览器请求一个网站时,

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值