近年来，Core Web Vitals（核心网页指标）已成为搜索引擎排名与用户体验的核心衡量标准。然而，许多开发者在性能优化过程中频繁遭遇一个棘手组合：高首次内容绘制（FCP）与最大内容绘制（LCP），主线程工作中出现大量不明“Other”时间，以及堆积如山的未使用第三方JavaScript（Vendor JS）。这一“三重打击”正严重拖慢页面加载速度，导致用户流失与转化率下降。

问题解剖：FCP/LCP为何居高不下？

FCP（First Contentful Paint）衡量浏览器首次渲染任何文本、图像或非空白Canvas的时间；LCP（Largest Contentful Paint）则记录视口中最大可见元素（通常是图片或大段文本）的呈现时间。理想情况下，FCP应小于1.8秒，LCP应小于2.5秒。但现实是，许多站点FCP超过3秒，LCP甚至突破4秒。

根本原因之一在于主线程（Main Thread）的过度繁忙。浏览器的主线程负责解析HTML、执行JavaScript、计算样式、布局与绘制。当主线程被大量任务阻塞时，渲染关键内容就会延迟。Chrome开发者工具Performance面板中，标记为“Other”的时间段尤为令人困惑——它不属于已知的“Scripting”“Rendering”“Painting”等类别，而是由垃圾回收、事件处理、微任务队列、RequestAnimationFrame回调等杂项任务构成。这些“Other”任务往往被忽视，却可能占据主线程总工作量的30%以上。

“Other”时间的隐身杀手

根据前端性能工程师的调试案例，主线程中的“Other”时间主要由以下因素引发：

  1. 过度的对象分配与垃圾回收：现代前端框架（如React、Vue）频繁创建临时对象，触发浏览器进行标记-清除式垃圾回收（GC），而GC过程属于“Other”类别，会间歇性阻塞渲染。
  2. 未优化的微任务与宏任务：Promise.then、MutationObserver等微任务，以及setTimeout、事件回调等宏任务，若产生无限循环或高频率调度，会累积成大量“Other”开销。
  3. 第三方脚本的隐藏副作用：许多Vendor JS（如分析工具、聊天插件、广告脚本）在初始化时不仅执行自身代码，还会注入大量定时器、事件监听器或DOM变化观察器，这些后台任务同样被归类为“Other”。

未使用的Vendor JS：被遗忘的性能黑洞

与“Other”时间密切相关的是未使用（unused）的第三方JavaScript。研究表明，典型商业网站加载的JavaScript中，平均30%至50%的代码从未被执行。但浏览器仍需要完成下载、解析、编译这些代码，消耗带宽与CPU资源，并间接增加主线程负担。

例如，一个电商网站引入了用于轮播图的jQuery插件，但实际仅有首页使用；而该插件的代码被包含在所有页面中，其中90%的函数从未被调用。这些未使用的Vendor JS不仅延长了FCP/LCP，还通过增加脚本解析时间和JavaScript执行时间，加剧了主线程的“Other”滞后。

实战修复策略

面对“高FCP/LCP + 庞大Other时间 + 未用Vendor JS”的组合症候，前端团队可采取以下措施：

  1. 代码分割与懒加载：利用动态import()将Vendor JS拆分为按需加载的chunk，确保仅执行当前路由必要的代码。对于大型第三方库（如Moment.js、Lodash），优先替换为原生API或更轻量的替代方案（如date-fns）。
  2. 主线程任务梳理：使用Chrome性能分析器捕获加载轨迹，放大“Other”时间线段，结合“Summary”面板中的“Self Time”精确定位微任务或GC来源。可通过performance.mark()与performance.measure()人工标注关键操作。
  3. 控制第三方脚本注入：对分析工具、A/B测试脚本等非必要第三方代码，采用异步加载（async/defer），并设置loading="lazy"以减少初始渲染阻塞。同时利用Resource Hints（如<link rel="preconnect">）提前建立连接，但避免预加载未使用的脚本。
  4. 优化垃圾回收：避免在热路径上创建大量临时对象，如在循环中重用变量、使用对象池模式；对于频繁调用的函数，考虑使用静态工厂或缓存来减少内存分配。
  5. 监控与持续评估：引入Lighthouse、WebPageTest或自建RUM（真实用户监控）系统，定期检查FCP/LCP与主线程繁忙度。设置性能预算，将未使用Vendor JS总量控制在100KB以内。

结语

“高FCP/LCP”、“主线程Other时间”与“未使用Vendor JS”三者互为因果，形成性能衰退的恶性循环。在用户耐心有限的移动互联网时代，每一毫秒的延迟都意味着收入损失。前端开发者必须跳出“能跑就行”的思维定式，深入浏览器底层机制，用数据驱动的方式砍掉冗余代码、驯服主线程杂务。唯有如此，才能让页面真正“快”起来——不仅通过搜索引擎的考核，更赢得用户的每一次点击。