JavaScript Academy · 课时

性能分析入门（Node/DevTools）——小型计时习惯

分小步进行性能分析：使用 console.time/timeEnd 和简单计时器进行测量，找出热点代码，改动一处后重新测量

性能分析入门（Node/DevTools）——小型计时习惯 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 3 节课。

为什么需要性能分析

目标：测量 → 修改 → 再次测量。

使用 console.time/timeEnd 快速计时
使用微型 now() 辅助函数进行手动计时
只关注热点代码
一次只做一项修改

console.time 示例

console.time 会打印带标签代码块的执行耗时。这是很好的第一步。

// Measure a small loop with console.time/timeEnd
console.time("sum");
let s = 0;
for (let i = 0; i < 100000; i = i + 1) {
  s = s + i;
}
console.timeEnd("sum");
console.log("sum value:", s);

手动计时辅助函数

手动计时可以帮助您包装任意函数，并使用相同的输入比较多次运行的结果。

// A tiny now() helper that works in many runtimes
const now = (typeof performance !== "undefined" && performance.now)
  ? function () { return performance.now(); }
  : function () { return Date.now(); };

// Time a function manually
function timeFn(label, fn) {
  const t1 = now();
  const out = fn();
  const t2 = now();
  console.log(label + " ms:", (t2 - t1));
  return out;
}

timeFn("small work", function () {
  let x = 0;
  for (let i = 0; i < 50000; i = i + 1) { x = x + i; }
  return x;
});

查找热点代码

跟踪调用次数和耗时，了解应用在哪些地方花费了工作量；先优化最热门的函数。

// Count calls and total time to find hot spots
const metrics = { calls: 0, totalMs: 0 };

function hotWork(n) {
  const t1 = now();
  let sum = 0;
  for (let i = 0; i < n; i = i + 1) {
    sum = sum + (i % 3);
  }
  const t2 = now();
  metrics.calls = metrics.calls + 1;
  metrics.totalMs = metrics.totalMs + (t2 - t1);
  return sum;
}

// Simulate usage
for (let k = 0; k < 5; k = k + 1) {
  hotWork(80000);
}
console.log("calls:", metrics.calls, "avg ms:", metrics.totalMs / metrics.calls);

修改前后的计时

在修改前后分别进行测量。保持输入相同，只比较数字。

// Compare two approaches with the same input
const hay = [];
for (let i = 0; i < 2000; i = i + 1) { hay.push(String(i)); }

const needles = [];
for (let i = 0; i < 1000; i = i + 1) { needles.push(String(i * 2)); }

function slowIncludes() {
  let count = 0;
  for (const n of needles) {
    if (hay.includes(n)) { count = count + 1; }
  }
  return count;
}

function fastSet() {
  const set = new Set(hay);
  let count = 0;
  for (const n of needles) {
    if (set.has(n)) { count = count + 1; }
  }
  return count;
}

const c1 = timeFn("includes run", slowIncludes);
const c2 = timeFn("set.has run", fastSet);
console.log("counts:", c1, c2);

良好的计时习惯

提示：

每次运行都使用相同的输入。
先预热一次，然后再测量。
计时时减少日志记录。
只修改一项内容，然后重新测量。
DevTools/Node 提供记录工具；请先从简单的 console.time 开始。

console.time 基础测验

快速检查：快速计时工具。

回顾

回顾：从 console.time 和微型 now() 辅助函数开始。找到热点代码，进行简单修改，然后使用相同的输入重新测量。

常见问题解答

「性能分析入门（Node/DevTools）——小型计时习惯」课时是免费的吗？

是的 — 「性能分析入门（Node/DevTools）——小型计时习惯」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 3 节课。

「性能分析入门（Node/DevTools）——小型计时习惯」这节课中我会学到什么？

分小步进行性能分析：使用 console.time/timeEnd 和简单计时器进行测量，找出热点代码，改动一处后重新测量你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 3 节。

「性能分析入门（Node/DevTools）——小型计时习惯」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy