JavaScript实现ZLOGO: 性能改进

简介: 基于JavaScript和Antlr4实现简单的中文LOGO语法, 性能改进. Implement simple LOGO language using JavaScript and Antlr4. Improve performance.

主攻前文吴烜:JavaScript实现ZLOGO: 界面改进与速度可调的几个性能问题

在线演示: 圈3

源码仍在: program-in-chinese/quan3
2019_01_23_logo_

之前是在绘制过程中计算每帧需要绘制的线段, 在尝试改进的过程中很快发现问题太多且不易测试. 接着在某早晨"醒悟"到应该而且可以在绘制前计算好每一帧的步进路径表. 不仅可以避免绘制卡顿问题, 还便于测试(因为是纯JS实现, 不需夹杂DOM操作). 于是通过如下递归代码实现了截取指定位置的路径表:

// 返回{截取部分: 路径表, 剩余部分: 路径表}
// 如果 开始位置 >= 终止位置, 返回{[], 所有}
function 截取路径表(路径表, 开始位置, 终止位置) {
  if (开始位置 >= 终止位置) {
    return {截取部分: [], 剩余部分: 路径表};
  }
  if (路径表.length == 0) {
    return {截取部分: [], 剩余部分: []};
  } else if (路径表.length == 1) {
    return 截取路径(路径表[0], 开始位置, 终止位置);
  } else {
    var 段 = 路径表[0];
    var 长度 = 段.长度;
    if (开始位置 >= 长度) {
      路径表.shift();
      return 截取路径表(路径表, 开始位置 - 长度, 终止位置 - 长度);
    } else if (开始位置 < 长度 && 终止位置 < 长度) {
      var 前段 = 截取路径(路径表[0], 开始位置, 终止位置);
      路径表.shift();
      return {截取部分: 前段.截取部分, 剩余部分: 前段.剩余部分.concat(路径表)};
    } else {
      var 前段 = 截取路径(路径表[0], 开始位置, 长度);
      路径表.shift();
      var 后段 = 截取路径表(路径表, 0, 终止位置 - 长度);
      return {截取部分: 前段.截取部分.concat(后段.截取部分), 剩余部分: 后段.剩余部分};
    }
  }
}

原本为去掉路径表第一项, 使用了slice(), 测试时发现耗时接近O(n^3). 导致点击"运行"后的运算耗时在复杂时(比如>10000线段的图形)太长(停顿超过1秒)难以接受. 改为shift()后, 粗测不超过O(n^2), 暂未深入研究.

这里是获取每一帧的路径表(每帧前进的长度等于"速度"):

function 按步进拆分路径表(路径表, 速度) {
  var 所有段 = [];
  while (路径表.length > 0) {
    var 拆分路径 = 截取路径表(路径表, 0, 速度);
    所有段.push(拆分路径.截取部分);
    路径表 = 拆分路径.剩余部分;
  }
  return 所有段;
}

感觉已经达到可以让用户玩玩的程度. 接下来视反馈决定改进方向.

2019-01-23

相关文章
|
4月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
292 69
|
10月前
|
算法 JavaScript 前端开发
垃圾回收机制对 JavaScript 性能的影响有哪些?
【10月更文挑战第29天】垃圾回收机制对JavaScript性能有着重要的影响。开发者需要了解不同垃圾回收算法的特点和性能开销,通过合理的代码优化和内存管理策略,来降低垃圾回收对性能的负面影响,提高JavaScript程序的整体性能。
|
7月前
|
前端开发 JavaScript Java
JavaScript闭包深入剖析:性能剖析与优化技巧
JavaScript 闭包是强大而灵活的特性,广泛应用于数据封装、函数柯里化和事件处理等场景。闭包通过保存外部作用域的变量,实现了私有变量和方法的创建,提升了代码的安全性和可维护性。然而,闭包也可能带来性能问题,如内存泄漏和执行效率下降。为优化闭包性能,建议采取以下策略:及时解除对不再使用的闭包变量的引用,减少闭包的创建次数,使用 WeakMap 管理弱引用,以及优化闭包结构以减少作用域链查找的开销。在实际开发中,无论是 Web 前端还是 Node.js 后端,这些优化措施都能显著提升程序的性能和稳定性。
199 70
|
6月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
10月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
372 77
|
6月前
|
前端开发 JavaScript 大数据
关于JavaScript性能问题的误解
JavaScript 是单线程语言,代码逐行执行,遇到大数据量计算可能影响性能。前端同事担心遍历大量数据会导致性能问题,但实际上,即使遍历1000、10000条数据,耗时也较少。测试代码执行时间有三种方法:Date.now、console.time 和 performance.now,其中 performance.now 精度最高。开发中不必过度担忧遍历带来的性能损耗,保持代码清晰更重要。
|
10月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
509 62
|
10月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
234 63