打开一个页面，风扇就转起来了

同事说打开公司官网，笔记本风扇立刻起飞，任务管理器里浏览器占了大半 CPU。

第一判断是服务器慢。可换成别的站点，同样的浏览器一点事没有，这个对比其实已经提示了方向。

先把两件事分开

分开之后，动作才不会互相干扰，也不会花了钱还没效果。

服务器负责把内容送过来，浏览器负责解析 HTML、解析 CSS、执行脚本、布局、绘制每一帧。

前者体现在耗时上，后者体现在 CPU 和内存上，两者能同时发生，也能各干各的。

CPU 满，说明工作量压在了本机，和服务器快不快不是同一个问题，先分清才谈得上解决。

测速先给一个参照

这份参照不判断对错，只回答时间花在哪，够用就行。

用宝塔拨测的网站测速跑一轮多地区多运营商节点，重点看 DNS、TCP、TLS、TTFB、下载五段耗时。

如果五段都不长，页面却依旧卡，那说明时间不是花在网络上，继续查网络只会白费力气。

如果下载段特别长、资源特别大，后面的解析和渲染压力自然也跟着上来，CPU 高只是结果之一。

结果怎么读

同样的总耗时，不同的分布，指向完全不同的动作，这也是必须分段的原因。

五段正常、状态码 200、本机依旧卡：方向在页面本身，去查脚本执行和长任务。

下载段明显偏大：先看资源体积和数量，图片、字体、脚本、第三方组件都算在内。

TTFB 很高、页面还卡：两个问题叠在一起，先解决服务端那一半，再谈渲染优化。

只有你的节点慢、别人正常：先怀疑本地网络或设备，不要急着改代码，改了也不见得有人受益。

判断是本机还是普遍

范围一缩，答案基本就出来了，剩下只是验证。

同一页面，换一台设备、换一个浏览器各试一次，这一步比看任务管理器有效。

再让不同地区的同事点一下，或者直接看多节点结果，两种视角互相印证。

只有你这台机器卡，多半是插件、显卡加速被关掉，或者浏览器内核太旧。

复测与动作

改完能验证，动作才叫有效，否则只是感觉上快了一点。

同一组节点连测三次，确认耗时结论稳定，别拿一次结果当证据。

页面侧的问题，一般从减少脚本执行、拆分长任务、压缩资源、减少第三方入手。

改完再测一次，只看同一段耗时，别把网络波动算成优化成果，那种庆祝很尴尬。

CPU 满这件事，先分清是谁在干活，再谈优化。

分清了，优化才落到点上。