
一、基础性能检测
1. 打开控制台:按F12或右键选择“检查”→切换到Console面板。
2. 输入测试代码:在Console输入`console.time('test'); for(let i=0;i<1000000;i++){};console.timeEnd('test')`→查看循环执行时间。
3. 使用性能工具:切换到Performance面板→点击录制按钮后执行代码→停止录制分析耗时。
二、代码优化验证
1. 变量声明对比:分别用`var`和`let`声明变量→测试循环赋值的执行速度差异。
2. 函数调用测试:创建箭头函数和普通函数→各执行10000次比较耗时。
3. 字符串拼接:使用模板字符串与`+`号连接→测试1000次拼接操作的时间。
三、内存占用分析
1. 查看内存快照:在Memory面板拍摄堆快照→观察代码执行后的内存变化。
2. 检测闭包泄漏:创建带闭包的函数→重复执行并查看内存增长情况。
3. 强制垃圾回收:在Console输入`window.gc()`→手动触发内存回收机制。
四、异步处理测试
1. Promise性能:创建1000个未resolve的Promise→测量页面响应时间。
2. Async/Await对比:用传统回调与async函数完成相同任务→比较执行效率。
3. Web Workers测试:编写多线程计算脚本→对比主线程阻塞与Worker执行耗时。
五、渲染影响评估
1. DOM操作耗时:批量添加1000个元素→测量页面重排与重绘时间。
2. 动画帧测试:使用`requestAnimationFrame`执行复杂绘图→统计帧率稳定性。
3. 样式计算对比:动态修改元素样式100次→观察CSSOM树构建时间。
六、网络请求关联
1. Fetch API测试:发起10个并行请求→测量数据返回与处理总耗时。
2. JSON解析对比:用`JSON.parse()`处理1MB数据→对比不同浏览器的解析速度。
3. 缓存策略验证:开启强缓存后重复请求资源→确认是否直接从内存读取。
七、异常场景模拟
1. 递归爆栈测试:编写无限递归函数→观察V8引擎的错误处理机制。
2. 大数计算压力:进行1000位大数运算→测试精度与性能平衡点。
3. 类型转换负载:批量转换对象为JSON字符串→检测序列化处理能力。