第 2 卷

第 2 / 7 卷日期：2025-12-31

大文件下载分发：安装包、压缩包、大型视频（直播回放、影视资源）等
跨地域网站加速：面向全国/全球用户的网站，解决不同地域网络延迟差异问题
抗 DDoS 攻击：部分高端 CDN 服务提供抗 DDoS 能力，可抵御常见的流量型攻击，保护源站安全

开发中的 CDN 使用实践

在实际开发中，CDN 的使用非常普遍，常见场景有：

第三方库引入：直接通过 CDN 引入 Vue、React、jQuery 等第三方库，无需本地打包，减少打包

体积

Code block

1 2<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js">

</script>

静态资源部署：将项目打包后的 JS、CSS、图片等静态资源，上传到 CDN 平台（如阿里云

OSS+CDN、腾讯云 COS+CDN），通过 CDN 域名访问资源

Code block

1 2<link rel="stylesheet" href="https://cdn.xxx.com/css/app.min.css">

3<script src="https://cdn.xxx.com/js/app.min.js"></script>

图片/视频加速：将产品图片、宣传视频等上传到 CDN，提升用户浏览和播放体验

6. 浏览器缓存 & HTTP 缓存策略

浏览器缓存是指浏览器将已请求过的资源存储在本地，当再次请求该资源时，优先从本地读取，无需重新向服务器请求，从而提升资源加载速度。HTTP 缓存策略是浏览器缓存的核心实现，分为「强缓

存」和「协商缓存」两个层级，优先级：强缓存 > 协商缓存。

1. 强缓存

• 核心：浏览器直接从本地缓存读取资源，无需和服务器建立连接，响应状态码为 200 OK

(from memory cache) 或 200 OK (from disk cache)

• 控制字段（HTTP 1.0/1.1）：

◦ Expires：HTTP 1.0 字段，是一个绝对时间戳（如 Wed, 31 Dec 2025 23:59:59

◦ Cache-Control：HTTP 1.1 字段，优先级高于 Expires，支持相对时间配置（如

▪ public：所有节点（浏览器、CDN 等）均可缓存

▪ private：仅浏览器可缓存（默认值）

▪ no-cache：不使用强缓存，直接进入协商缓存

▪ no-store：不缓存任何资源

▪ max-age：缓存有效时间（秒）

2. 协商缓存

• 核心：浏览器先向服务器发送请求，携带本地缓存的资源标识，服务器根据标识判断资源是否更

新，再决定返回「新资源」或「304 Not Modified」（告知浏览器使用本地缓存）

• 资源标识（两组核心字段）：

◦ Last-Modified & If-Modified-Since：基于资源修改时间的标识

▪ 服务器返回资源时，通过 Last-Modified 告知浏览器资源最后修改时间

▪ 浏览器再次请求时，通过 If-Modified-Since 携带该时间戳，服务器对比后，若未修

改则返回 304，否则返回新资源和新的 Last-Modified

▪ 缺陷：无法识别资源内容微调（如修改后又还原）、无法识别秒内多次修改

◦ ETag & If-None-Match：基于资源内容的唯一标识（哈希值），优先级高于 Last-

Modified

▪ 服务器返回资源时，通过 ETag 生成资源内容的哈希值并返回

▪ 浏览器再次请求时，通过 If-None-Match 携带该哈希值，服务器对比后，若哈希值不

变则返回 304，否则返回新资源和新的 ETag

▪ 优势：能精准识别资源内容是否变化，不受修改时间影响

缓存流程总结

浏览器再次请求资源时，先判断是否命中强缓存（通过 Cache-Control / Expires）
命中强缓存：直接使用本地缓存，无需请求服务器
未命中强缓存：发送请求到服务器，携带协商缓存标识（ If-Modified-Since / If-None-

Match）

服务器判断资源是否更新：未更新返回 304，浏览器使用本地缓存；已更新返回 200 和新资源，同

时更新本地缓存

7. 如何避免重绘(Repaint)和回流(Reflow)

• 回流（重排，Reflow）：当 DOM 元素的布局属性（宽高、位置、尺寸、节点增减等）发生变化

时，浏览器需要重新计算元素布局并渲染页面，这个过程消耗性能极大

• 重绘（Repaint）：当 DOM 元素的样式属性（颜色、背景、字体颜色等，不影响布局）发生变化

时，浏览器无需重新计算布局，仅重新绘制元素外观，性能消耗低于回流，但频繁触发仍会影响性能

• 核心关系：回流一定会触发重绘，重绘不一定触发回流

避免/减少重绘和回流的核心方案

减少直接 DOM 操作，批量处理 DOM 变更

◦ 方案1：使用 DocumentFragment 作为容器，批量添加/修改节点，最后一次性插入 DOM

Code block

1	const fragment = document.createDocumentFragment();
2	for (let i = 0; i < 100; i++) {
3	const div = document.createElement('div');
4	div.textContent = `item ${i}`;
5	fragment.appendChild(div);
6	}
7	document.body.appendChild(fragment);//仅触发1次回流

◦ 方案2：先将元素脱离文档流（隐藏 display: none / 移出 DOM），修改完成后再恢复，

仅触发2次回流

避免频繁读取布局属性，缓存结果

频繁读取 offsetTop、 clientWidth、 scrollHeight 等属性，会强制浏览器刷新布局（因为浏览器需要保证数据最新），导致回流频繁触发。

Code block

1	//不良实践：循环中频繁读取布局属性，触发多次回流
2	for (let i = 0; i < 100; i++) {
3	div.style.top = div.offsetTop + 10 + 'px';
4	}

6	//优化实践：先缓存属性值，批量修改，仅触发1次回流
7	const top = div.offsetTop;
8	for (let i = 0; i < 100; i++) {

全站分卷索引 · 7 卷