console.timelog

<think>我们正在讨论的是console.timeLog，根据引用[1]和引用[3]的内容，我们可以知道： - console.timeLog() 用于在控制台输出一个已经通过console.time()启动的计时器的当前值，而不会停止该计时器。 - 它通常用于在代码执行过程中记录中间时间点，以便分析代码执行的时间分布。 功能说明： 1. 记录中间时间点：在console.time()和console.timeEnd()之间，可以使用console.timeLog()多次输出当前计时器的值。 2. 不中断计时：使用console.timeLog()后，计时器会继续运行，直到调用console.timeEnd()才会停止并输出总时间。 3. 可添加标签：如果同时有多个计时器在运行，可以通过标签来指定要输出哪个计时器的值。 用法： ```javascript console.time('myTimer'); // 启动名为'myTimer'的计时器 // 执行一些操作 for (let i = 0; i < 100000; i++) { // 模拟耗时操作 } console.timeLog('myTimer', '第一次耗时记录'); // 输出当前计时器的时间 // 执行另一些操作 anotherFunction(); console.timeLog('myTimer', '第二次耗时记录'); // 再次输出当前计时器的时间 console.timeEnd('myTimer'); // 停止计时器并输出总时间 ``` 输出示例（在控制台中）： ``` 第一次耗时记录: 15.123ms 第二次耗时记录: 32.456ms myTimer: 45.678ms ``` 注意事项： - 标签参数是必需的，用于指定要操作的计时器。 - 可以在输出中添加额外的描述信息（如上面的'第一次耗时记录'），这些描述信息会显示在输出中。 - 如果指定的标签不存在，则会输出一个警告，但不会报错。 引用[1]中提到，console.timeLog是Firefox Nightly中的新功能（当时），但现在已被主流浏览器（包括Chrome、Firefox、Edge等）和Node.js支持。 与console.time()和console.timeEnd()的对比： - console.time(label): 启动一个计时器。 - console.timeLog(label [, ...data]): 输出计时器的当前值，可附加数据。 - console.timeEnd(label): 停止计时器并输出总时间。 通过使用console.timeLog，我们可以在不中断计时器的情况下，在代码的关键位置记录时间点，这对于性能分析和优化非常有帮助。 参考引用[1][3][4]的内容，我们可以总结console.timeLog的用途和用法。 §§相关问题§§ 1. console.timeLog() 与 console.time() 和 console.timeEnd() 如何配合使用？ 2. 使用 console.timeLog() 时需要注意哪些问题？ 3. console.timeLog() 在性能分析中的实际应用案例有哪些？ 4. 如何利用 console.timeLog() 调试异步操作的执行时间？</think>### `console.timeLog()` 的功能与用法详解 `console.timeLog()` 是 JavaScript 控制台 API 中用于**性能分析**的关键方法，它与 `console.time()` 和 `console.timeEnd()` 配合使用，专门用于**记录计时器的中间执行时间**而不终止计时[^1][^3]。 #### 核心功能 1. **中间时间点记录** 在 `console.time()` 和 `console.timeEnd()` 之间多次调用，记录代码执行到特定位置的时间 2. **非中断式计时** 记录时间后计时器继续运行（与 `timeEnd()` 不同） 3. **多计时器支持** 通过标签(label)区分不同任务的计时器 4. **性能瓶颈定位** 精确显示代码块中各阶段的耗时分布 #### 基本语法 ```javascript console.timeLog(label [, ...data]) ``` - `label`：计时器名称（必须与 `time()` 的标签一致） - `...data`：可选附加数据（字符串/对象等） #### 使用示例 ```javascript console.time('数据加载'); // 启动计时器 fetchData(); // 第一阶段操作 console.timeLog('数据加载', '完成数据获取'); // 记录中间时间 processData(); // 第二阶段操作 console.timeLog('数据加载', '完成数据处理'); // 再次记录 renderUI(); // 第三阶段操作 console.timeEnd('数据加载'); // 结束计时并输出总耗时 ``` #### 控制台输出示例 ``` 数据加载: 完成数据获取 120ms 数据加载: 完成数据处理 350ms 数据加载: 520ms ``` #### 典型应用场景 1. **分阶段性能分析** ```javascript console.time('图像处理'); loadImage(); console.timeLog('图像处理', '加载完成'); applyFilters(); console.timeLog('图像处理', '滤镜处理完成'); console.timeEnd('图像处理'); ``` 2. **循环内部耗时监控** ```javascript console.time('大数据计算'); for(let i = 0; i < 10000; i++) { heavyCalculation(); if(i % 1000 === 0) { console.timeLog('大数据计算', `进度: ${i}/10000`); } } console.timeEnd('大数据计算'); ``` 3. **异步操作流程追踪** ```javascript console.time('API调用链'); await fetchUser(); console.timeLog('API调用链', '用户数据获取'); await fetchPosts(); console.timeLog('API调用链', '帖子数据获取'); console.timeEnd('API调用链'); ``` #### 注意事项 1. **标签必须匹配** 未启动的计时器调用 `timeLog()` 会报错：`Timer 'xxx' does not exist` 2. **浏览器兼容性** 所有现代浏览器均支持（Chrome 70+、Firefox 62+、Safari 12.1+、Edge 79+）[^1] 3. **Node.js 支持** Node.js v10.0+ 原生支持该方法 4. **生产环境移除** 建议通过构建工具自动移除调试代码 > 对比传统方案：相比手动使用 `Date.now()` 计算时间差，`timeLog()` 提供更简洁的 API 和结构化输出，特别适合多阶段任务的性能分析[^4]。