当前位置: 首页 > news >正文

每天一个前端小知识 Day 8 - 网络通信与前端性能优化

网络通信与前端性能优化


1. 前端常用网络通信方式对比

方式场景说明特点
XMLHttpRequest老式 AJAX 通信回调繁琐,兼容性好
fetch API现代标准,逐步取代 XHRPromise 基础,更简洁
axios基于 xhr 的封装库拦截器、默认配置、适配性强
WebSocket实时通信,如聊天室、推送长连接,双向通信
SSE服务端单向推送(Server-Sent)比 WebSocket 简单,单向

2. fetch API 核心特性

fetch('/api/data').then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err));

特点:

  • 默认不带 Cookie(需设置 credentials: 'include');
  • 响应状态码错误不会触发 catch(要手动判断 res.ok);
  • 不支持请求/响应拦截(需封装);

3. 网络请求优化策略

技术说明
请求合并GraphQL、批量接口
懒加载 / 预加载图片懒加载(loading="lazy")、prefetch 标签
CDN 加速静态资源分发,地理就近请求
本地缓存localStorage / sessionStorage / indexedDB
强缓存 / 协商缓存HTTP 头部配置:Cache-ControlETag
请求去重与节流对并发相同请求进行防抖、去重

4. 性能优化核心指标(Web Vitals)

指标说明
FCP (First Contentful Paint)首次内容绘制时间
LCP (Largest Contentful Paint)最大内容绘制时间(首屏加载关键)
TTI (Time to Interactive)用户可交互的时间点
CLS (Cumulative Layout Shift)页面布局稳定性
TBT (Total Blocking Time)阻塞主线程时间

📌 Chrome DevTools / Lighthouse 可直接检测这些指标


5. 首屏加载优化策略(面试重点)

✅ 减少首屏资源体积
  • Tree Shaking / SplitChunks
  • 图片压缩(webp / AVIF)
  • CDN 加载第三方库(如 Vue/React)
✅ 减少请求数
  • 合并 CSS/JS 文件
  • 使用 SVG Sprite 代替多张图标
  • Base64 小图内联
✅ 异步加载不影响首屏资源
  • 动态 import 非首屏组件
  • 使用 async / defer 加载脚本
  • 路由懒加载 + Skeleton 骨架屏

6. 浏览器缓存机制

类型说明
强缓存状态码 200,读取本地缓存(Cache-Control: max-age
协商缓存状态码 304,请求服务器判断是否变更(ETag
Cookie小数据,自动携带,适合登录态
localStorage大容量(5MB),持久保存
sessionStorage生命周期短,刷新页面清除
indexedDB结构化数据缓存,适合离线应用

7. 面试高频问题精讲

📌 Q1:浏览器如何实现缓存优化?

答:

  • 利用 HTTP 的 Cache-Control / ETag 实现静态资源缓存;
  • 对于版本化资源,可设置长时间强缓存(max-age=31536000);
  • 使用内容哈希(如 main.abc123.js)实现更新检测;
  • 脚本/样式外链并合理使用 async / defer

📌 Q2:首屏加载太慢怎么办?
  • 优化图片和资源大小;
  • 使用 SSR 或 CSR + Skeleton 加速渲染;
  • 优化依赖树,减少初始打包;
  • 使用 link rel="preload" 预加载关键资源;
  • 开启 gzip / brotli 传输压缩。

📌 Q3:fetch 和 axios 的区别?
特性fetchaxios
基础实现原生 API封装于 XMLHttpRequest
默认行为不自动处理状态码错误自动抛出异常
拦截器支持请求与响应拦截
请求取消AbortControllerCancelToken (v1) / AbortSignal (v2)

📌 Q4:你如何理解懒加载和预加载?
  • 懒加载(Lazy Load):按需加载,延迟加载不在视口的资源;
  • 预加载(Preload / Prefetch):提前加载未来可能需要的资源;
  • 配合 IntersectionObserver 实现图片/组件懒加载更高效。

8. 实战建议总结

  • 请求层建议封装(axios + 拦截器 + 类型定义);
  • 使用 useSWR / react-query 等状态缓存方案提升体验;
  • 开发中应随时分析 network、资源 waterfall;
  • 性能优化是过程,不是一次性的「打鸡血式」修复;
  • 「按需加载 + 缓存 + CDN + 压缩」是黄金组合;

✅ 总结

网络优化与性能调优,是高阶前端不可回避的责任。不仅影响用户体验,也关乎产品核心数据指标(如转化率、留存率)。理解浏览器通信机制、缓存策略、性能评估工具,让你在面试与实战中脱颖而出。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/256325.html

相关文章:

  • Linux--迷宫探秘:从路径解析到存储哲学
  • FastGPT:开启大模型应用新时代(4/6)
  • 分享两个可以一键生成sql server数据库 html格式巡检报告的脚本
  • AI大模型提示词工程研究报告:长度与效果的辩证分析
  • Thrift作为客户端流程(多路复用)
  • 设计模式在上位机项目的实战
  • 基于SpringBoot+Uniapp的活动中心预约小程序(协同过滤算法、腾讯地图、二维码识别)
  • 微服务拆分——nacos/Feign
  • python中学物理实验模拟:凸透镜成像和凹透镜成像
  • 力扣1477. 找两个和为目标值且不重叠的子数组
  • IEEE5节点系统潮流仿真模型(simulink+matlab全功能模型)
  • MySQL误删数据急救指南:基于Binlog日志的实战恢复详解
  • Vue3 + TypeScript + xlsx 导入excel文件追踪数据流转详细记录(从原文件到目标数据)
  • 编程基础:调用访问
  • pyqt事件过滤器eventFilter
  • 计算机网络学习笔记:应用层概述、动态主机配置协议DHCP
  • ProtoBuf:proto3 语法详解
  • 软件工程期末试卷填空题版带答案(共40道)
  • 华为云 Flexus+DeepSeek 实战:华为云Dify 平台 CCE 高可用集群部署与大模型知识库构建指南
  • C++链表的虚拟头节点
  • 【unity游戏开发——热更新】YooAsset简化资源加载、打包、更新等流程
  • 【设计模式】6.原型模式
  • 获取 Git 仓库
  • 第三章 线性回归与感知机
  • 面试题-ts中的typeof
  • ACL 2025 Findings | 无监督概念发掘,提高文本解释的可理解性
  • 如何排查在docker中运行软件的故障:Docker故障排查可视化指南,三招锁定问题根源
  • 从0到1学Linux:Linux进程
  • BGP路由反射器(RR)实验详解,结尾有详细脚本
  • 【软考高级系统架构论文】论湖仓一体架构及其应用