网站开发需要的技能线上网站建设需求
文章目录
- 一、HTTP/HTTPS
- 二、TCP协议
- 三、HTTP进阶
- 四、缓存策略
- 五、安全协议
- 六、WebSocket
- 七、性能优化
- 八、协议细节
- 九、新兴技术
- 十、综合场景
- 十一、协议分析
一、HTTP/HTTPS
-
HTTP请求从输入URL到页面加载的全过程
解析：DNS解析 → TCP握手 → HTTP请求 → 服务器响应 → 渲染引擎解析 → 加载资源（CSS/JS/图片）→ 页面渲染。前端优化点：DNS预取、CDN加速、资源压缩。 -
HTTP/1.1 的队头阻塞问题如何解决？
解析：同一TCP连接只能处理一个请求。优化方案：- 域名分片（多个子域名）
- HTTP/2多路复用（二进制帧并行传输）
-
HTTPS加密过程（TLS握手步骤）
解析：- 客户端发送随机数+加密套件
- 服务端返回随机数+证书+公钥
- 客户端验证证书，生成预主密钥（用公钥加密）
- 双方用3个随机数生成会话密钥
前端关联：减少握手次数（Session复用）
二、TCP协议
-
TCP三次握手和四次挥手流程
解析：- 握手：SYN → SYN-ACK → ACK（建立双向连接）
- 挥手：FIN → ACK → FIN → ACK（双方独立关闭）
优化：tcp_tw_reuse减少TIME_WAIT状态
-
TCP如何保证可靠传输？
解析：- 数据分块编号（Seq序列号）
- 确认应答（ACK）
- 超时重传
- 流量控制（滑动窗口）
- 拥塞控制（慢启动/快恢复）
-
为什么UDP比TCP快？前端哪些场景用UDP？
解析：无连接、无重传、无流量控制。前端场景：QUIC协议（HTTP/3）、WebRTC视频通话、DNS查询。
三、HTTP进阶
-
HTTP/2 的核心改进
解析：- 多路复用（一个TCP连接并行传输）
- 头部压缩（HPACK算法）
- 服务器推送（Server Push）
- 二进制帧传输
前端收益：减少TCP连接数，提升加载速度。
-
HTTP/3 为什么改用UDP？
解析：解决TCP队头阻塞。QUIC协议在UDP上实现可靠传输+快速握手（0-RTT）。 -
常见HTTP状态码及含义
解析：- 200 OK（成功）
- 301 Moved Permanently（永久重定向）
- 304 Not Modified（缓存有效）
- 400 Bad Request（客户端错误）
- 502 Bad Gateway（上游服务器故障）
四、缓存策略
-
强缓存 vs 协商缓存
解析：- 强缓存：
Cache-Control（max-age）、Expires（直接本地读） - 协商缓存：
Last-Modified/If-Modified-Since、ETag/If-None-Match（请求服务器验证）
最佳实践：静态资源强缓存，HTML文件协商缓存。
- 强缓存：
-
Cache-Control 的 no-cache 和 no-store 区别
解析：no-cache：可缓存但每次需验证no-store：禁止任何缓存
五、安全协议
-
XSS攻击原理及防御
解析：恶意脚本注入页面。防御：- 输入过滤（特殊字符转义）
- CSP内容安全策略（
Content-Security-Policy: script-src 'self'） - HttpOnly Cookie（防JS读取）
-
CSRF攻击原理及防御
解析：诱导用户发起恶意请求。防御：- SameSite Cookie（
SameSite=Lax） - 验证请求来源（Referer检查）
- CSRF Token（服务端校验）
- SameSite Cookie（
-
CORS跨域的实现机制
解析：- 简单请求：直接发送（GET/POST+标准头）
- 预检请求（OPTIONS）：检查
Access-Control-Allow-Origin
前端注意：带凭证请求需设置credentials: 'include'
六、WebSocket
-
WebSocket 如何建立连接？
解析：HTTP Upgrade机制：GET /chat HTTP/1.1 Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: xxxx服务端返回
101 Switching Protocols -
相比HTTP轮询的优势
解析：- 双向实时通信（服务器可主动推送）
- 减少冗余头部（长连接）
- 更低延迟（无重复TCP握手）
七、性能优化
-
CDN 加速原理
解析：用户就近访问边缘节点缓存资源。前端配合：静态资源带哈希名（app.3a2b.js），配置长期缓存。 -
资源预加载的4种方式
解析：<link rel="preload">（强制加载）<link rel="prefetch">（空闲加载）<link rel="dns-prefetch">（DNS预解析）- HTTP/2 Server Push（服务器推送）
-
如何减少TCP握手时间？
解析：- 开启Keep-Alive（复用连接）
- 升级HTTP/2（多路复用）
- 迁移HTTP/3（QUIC 0-RTT握手）
八、协议细节
-
Cookie 的 SameSite 属性
解析：Strict：完全禁止第三方CookieLax：允许GET请求携带（默认）None：允许所有（需配合Secure）
-
GET 和 POST 的本质区别
解析：- 语义：GET获取数据，POST提交数据
- 实际：GET参数在URL，POST在Body（但HTTP协议未强制）
- 安全：敏感数据用POST避免URL暴露
-
HTTP 的 Keep-Alive 作用
解析：复用TCP连接，避免频繁握手。前端自动生效（HTTP/1.1默认开启）。
九、新兴技术
-
WebTransport 解决了什么问题？
解析：基于HTTP/3的多路传输协议，支持可靠数据流（如TCP）和不可靠数据报（如UDP），用于实时游戏/视频。 -
WebRTC 的 NAT 穿透原理
解析：通过STUN服务器获取公网IP，若失败则用TURN服务器中转。前端API：RTCPeerConnection。
十、综合场景
-
首屏加载慢如何从网络层优化？
解析：- 资源压缩（Brotli/Gzip）
- HTTP/2 + 域名分片
- 关键资源预加载
- CDN分发静态资源
- 减少重定向（301→CDN配置）
-
如何实现文件断点续传？
解析：- 前端切片文件（Blob.slice）
- 记录已上传分片索引
- 服务端合并分片
协议支持：HTTP Range头（Content-Range: bytes 0-999/2000）
-
大文件上传如何保证稳定性？
解析：- 分片上传 + 并行传输
- 失败分片重试
- WebSocket实时进度反馈
- 服务端校验MD5
十一、协议分析
-
Wireshark 抓包如何过滤HTTP请求？
解析：过滤器输入http.request.method == "GET" -
Chrome DevTools 的瀑布流图分析要点
解析：- 排队（Queuing）：TCP连接不足
- TTFB（Time to First Byte）：服务器响应慢
- 内容下载（Content Download）：资源体积过大
-
设计微信小程序网络层架构（开放题）
解析：- 协议层：HTTP/2 + QUIC（弱网优化）
- 安全：双向证书 + 请求签名
- 缓存：本地SQLite存储策略
- 监控：SDK上报请求成功率/延迟
- 容灾：域名动态切换
面试技巧：
- 基础题：必考HTTP状态码、缓存策略、TCP握手
- 进阶题：深入HTTP/2/3特性、WebSocket原理
- 安全题：XSS/CSRF/CORS防御方案（结合前端实践）
- 性能题：从协议角度解释优化手段（如Keep-Alive、CDN）
- 开放题：展示架构思维（协议选型+容错设计）
附：高频协议与前端关联表
| 协议 | 前端应用场景 | 优化方向 |
|---|---|---|
| HTTP/2 | 静态资源加载 | 多路复用+头部压缩 |
| QUIC | 弱网环境（移动端） | 0-RTT握手+无队头阻塞 |
| WebSocket | 实时消息/在线协作 | 替代长轮询 |
| CORS | 跨域API调用 | 预检请求优化 |
| CSP | XSS防御 | 限制脚本来源 |
重点理解 “协议如何影响前端性能” 和 “前端如何利用协议特性优化” 的双向思维！