编辑“︁JavaScript性能指标”︁

{{DISPLAYTITLE:JavaScript性能指标}}

== 介绍 ==  
'''JavaScript性能指标'''是衡量网页或应用程序运行效率的关键数据点，用于评估代码执行速度、资源消耗及用户体验。对于开发者而言，理解这些指标有助于优化代码、减少延迟并提升交互流畅性。本文将介绍常见的性能指标、测量方法及优化策略。

== 核心性能指标 ==  
以下是JavaScript中最重要的性能指标分类：

=== 1. 加载时间指标 ===  
* '''首次内容绘制 (First Contentful Paint, FCP)'''：页面首次呈现任何内容的时间。  
* '''最大内容绘制 (Largest Contentful Paint, LCP)'''：视口中最大元素完成渲染的时间（理想值应小于2.5秒）。  

=== 2. 交互响应指标 ===  
* '''首次输入延迟 (First Input Delay, FID)'''：用户首次交互（如点击按钮）到浏览器实际响应的延迟（应小于100毫秒）。  
* '''总阻塞时间 (Total Blocking Time, TBT)'''：主线程被长任务阻塞的总时间。  

=== 3. 运行时性能指标 ===  
* '''脚本执行时间'''：JavaScript代码解析和执行的总耗时。  
* '''内存使用量'''：通过<code>performance.memory</code>（仅限Chrome）或开发者工具监测堆内存。  

== 测量方法 ==  
=== 使用Performance API ===  
JavaScript内置的[Performance API]可直接测量代码段的执行时间：  

<syntaxhighlight lang="javascript">  
// 记录代码执行时间  
performance.mark('start');  
// 模拟耗时操作  
for (let i = 0; i < 1e6; i++) Math.random();  
performance.mark('end');  

// 计算时间差  
performance.measure('loopTime', 'start', 'end');  
const duration = performance.getEntriesByName('loopTime')[0].duration;  
console.log(`循环耗时：${duration.toFixed(2)}毫秒`);  
</syntaxhighlight>  

'''输出示例'''：  
<pre>  
循环耗时：12.34毫秒  
</pre>  

=== 使用开发者工具 ===  
浏览器开发者工具的'''Performance'''面板可录制并分析页面运行时行为，包括：  
* 火焰图显示函数调用堆栈  
* 内存占用趋势图  

== 优化案例 ==  
=== 案例1：减少重绘与回流 ===  
频繁操作DOM会导致布局重排（Reflow），可通过批量更新优化：  

<syntaxhighlight lang="javascript">  
// 不推荐：多次触发回流  
const list = document.getElementById('list');  
for (let i = 0; i < 100; i++) {  
  list.style.width = `${i}px`; // 每次循环都触发回流  
}  

// 推荐：使用requestAnimationFrame批量更新  
requestAnimationFrame(() => {  
  list.style.width = '100px'; // 仅一次回流  
});  
</syntaxhighlight>  

=== 案例2：防抖与节流 ===  
限制高频事件（如滚动、输入）的触发频率：  

<syntaxhighlight lang="javascript">  
// 防抖函数：延迟执行直到停止触发  
function debounce(func, delay) {  
  let timeout;  
  return function() {  
    clearTimeout(timeout);  
    timeout = setTimeout(() => func.apply(this, arguments), delay);  
  };  
}  

window.addEventListener('resize', debounce(() => {  
  console.log('窗口大小调整完成');  
}, 200));  
</syntaxhighlight>  

== 可视化分析 ==  
使用Mermaid展示性能指标关系：  

<mermaid>  
flowchart LR  
    A[加载阶段] --> B(FCP)  
    A --> C(LCP)  
    D[交互阶段] --> E(FID)  
    D --> F(TBT)  
    G[运行时] --> H(内存使用)  
    G --> I(执行时间)  
</mermaid>  

== 数学建模 ==  
总阻塞时间（TBT）可表示为长任务阻塞时间的总和：  

<math>  
TBT = \sum_{i=1}^{n} (task\_duration\_i - 50\text{ms})  
</math>  

其中<math>task\_duration\_i > 50\text{ms}</math>。  

== 总结 ==  
JavaScript性能指标是优化的指南针。通过工具测量、代码优化及数学建模，开发者可系统性提升应用性能。建议定期使用Lighthouse等工具进行自动化检测。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript性能优化]]