在实际项目中，开发者经常会遇到以下痛点：

• 页面加载慢导致使用者流失、跳出率飙升。
• 首屏渲染卡顿，引发交互迟滞，影响转化率。
• 大型 JS 包造成主线程阻塞，出现长任务卡顿。
• 图片未压缩或未按需加载，耗费带宽并拖慢页面渲染。
• 频繁的重排/重绘导致 CPU 使用率居高不下。
• 内存泄漏或未清理的事件监听导致页面崩溃。
• SEO 因页面性能低下被搜索引擎降权。

一、加载与网络调整

1. 减少 HTTP 请求数量

痛点：请求过多会显著增加首屏等待时间。话说回来，

• 资源合并这方面。将 CSS、JS 合并为单文件，小图标使用雪碧图。
• 说到内联关键资源，关键 CSS 内联。关键小图转为 base64。
• 至于懒加载，图片、组件、路由按需加载。
• 从浏览器缓存来看，合理配置 Cache-Control/Etag避免重复请求。
• CDN 加速：静态资源走最近的边缘节点。
• 使用 HTTP/2 或 HTTP/3：多路复用降低连接开销。

2. 浏览器缓存策略

痛点：缓存失效导致重复下载，同步阻塞渲染。

• 强缓存: Cache-Control: max-age=31536000,immutable
• 协商缓存: Etag/Last-Modified

# 静态资源长期缓存
Cache-Control: max-age=31536000。immutable
# HTML 不做强缓存
Cache-Control: no-cache
# API 短期缓存
Cache-Control: max-age=60

3. 预解析与预连接资源提示

Pain point: DNS 查询和 TLS 握手延迟明显拖慢资源获取。说起来，

dns-prefetch

preconnect

preload— 当前页面必备资源

PREFETCH— 未来可能用到的资源

4. script 的 async 与 defer

• : 异步下载。在 DOM 完成解析后按顺序执行，适合依赖 DOM 的脚本。
• : 下载完成即执行。无顺序保证，适合独立第三方脚本。

二、CSS 调整

a. 基础 CSS 调整技巧

Pain point: 复杂选择器和阻塞样式导致首次渲染延迟。

• Selectors: 避免深层嵌套和通配符；优先使用类选择器，按理说，
• Cascade & Compression:`cssnano` 等工具移除空格、注释及重复规则。
• @import:尽量改为 ``，防止额外请求阻塞渲染。
• PurgeCSS / Unused CSS:剔除未使用的样式文件。
• SPLIT CSS:把首屏关键 CSS 内联。其余异步加载，以降低阻塞时间。
• Avoid Layout Thrashing:尽量在同一帧内完成读写操作，避免强制同步布局计算。

b. CSS 动画性能

• - 使用 #transform# + opacity# 对动画属性进行硬件加速；
• - 避免 width / height / margin 等会触发重排的属性；
• - 必要时适度使用 will-change;不过，
• - 尽量采用纯 CSS 动画而非 JavaScript 高频操作；
• - 控制硬件加速层数防止显存占满。

 .card {
will-change: transform,opacity;transition: transform .30s ease,opacity .30s ease;}
.card这方面，hover {
transform: translateY;}

三、JavaScript 调整

a. 常用调整策略

• Code Splitting : 按路由 / 功能拆包，使首页体积最小化。其实，/ li>
• Dynamic Import : `import` 按需加载模块。/ li>
• Tree Shaking : 移除未引用的 ES6 导出。/ li>
• 压缩混淆 : Terser / esbuild 降低体积。话说回来，/ li>
• Async / Defer : 脚本异步下载避免阻塞渲染。/ li>
• Web Workers : 将计算密集任务卸载至子线程。/ li>
• Algorithm & Data Structure ：调整循环、选择 O 查找结构。/ li>
• 防抖 & 节流 ：降低滚动、输入等高频事件触发频率。/ li>
• Memory Management : 清理无用监听器、定时器、闭包防止泄漏。不过，/ Li>

Pain Point : 大型 JS 包在移动端导致长任务卡顿。影响交互体验，老实说，

const loadHeavy = async => {
const mod = await import;mod.init，};

b. Tree Shaking 配置示例

module.exports = {
从mode来看。'production',optimization: {
usedExports: true,sideEffects: false,},};

{
"sideEffects":
}

C. Code Splitting 实现

const LazyComp = React.lazy => import);function App {
return (
Loading...}>


);}

四、图片与媒体资源调整

a. 图片压缩与格式转换

• 优先使用 WebP 、 IF 等现代格式，可节省约 30%~50% 的体积。/ Li>
• 根据展示尺寸生成对应分辨率图片，避免浏览器放大压缩产生额外开销。/ Li>
• 使用 `srcset` + `sizes` 实现响应式图片选择。/ Li>

Pain Point : 未压缩的大图往往占用数 MB 带宽，使移动端首屏 LCP 超过 5 秒。不过，

b. 懒加载实现方式

const imgs = document.querySelectorAll;const observer = new IntersectionObserver => {
entries.forEach(entry => {
if {
const img = entry.target;不过，img.src = img.dataset.src;obs.unobserve;}
})，},{ rootMargin:'0px 0px 200px' });imgs.forEach);

C. 首屏关键图片预加载

五、运行时与长列表调整

---