IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

JavaScript 代码执行效率对比工具

小胡子哥的个人网站 2016-05-05 22:41:53 累计浏览 1,502 次
本机暂存

平时写些小页面小程序,一般不会出现性能问题,但是在大的工程,或者在写一个框架、类库的时候,代码的性能就需要提高一个优先级了。测试代码的性能有多种方案:

  • https://jsperf.com 上测试

  • 使用 console.time 来收集代码执行的时间

    console.time('Name');
    // code here...
    console.timeEnd('Name');
  • 自己写一个时间控制器

本文自然就是自己撸一个简单易用的测试工具,效果如下图:

JavaScript 代码执行效率对比工具

设计分析

可以先把代码下载下来,跑起来:

git clone https://github.com/barretlee/performance.git
cd performance/test;
open index.html;

或者直接打开测试页面:https://barretlee.github.io/performance/test/

点击代码按钮,Performance 会循环执行 button 中的代码,持续时间是设定的 1000ms,每次执行完,都会计算出相对效率,100% 是效率最高的,剩下的自然就是效率比较低的,从而可以比较清晰地看出程序之间性能差异。

相关阅读

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,345)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,400)
  3. 由浅入深探究mysql索引结构原理、性能分析与优化 (累计阅读 16,518)
  4. Linux如何统计进程的CPU利用率 (累计阅读 16,303)
  5. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,930)
  6. 如何查找消耗资源较大的SQL (累计阅读 15,206)
  7. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,844)
  8. 天朝第二代身份证号码的验证机制 (累计阅读 14,760)
  9. HTML 5 的data-* 自定义属性 (累计阅读 14,347)
  10. 分享一个JQUERY颜色选择插件 (累计阅读 14,222)