JavaScript性能优化 - 减少数据读取次数

205 阅读1分钟

在 JS 当中经常使用的数据表现形式主要分为:字面量、局部变量、数组元素、对象属性,针对这四种形式访问字面量与局部变量速度是最快的。因为它们都可以直接存放到栈区当中,而访问数组元素和对象成员就会显得相对较慢一些。这是因为需要按照引用的关系,先要找到它们在堆内存当中的位置。例如对象属性的访问在去操作的时候,往往还要去考虑到原型链上的查找,因此和作用域链的道理其实是一样的。如果说减少查询的的时间消耗,就应该尽可能的减少对象的成员的查找次数和属性成员的嵌套层级,一个技巧就是提前将所要用到的数据缓存,方便在后面进行使用。

<html>
<body>
  <div id="skip" class="skip"></div>
  <script>
    // 优化前
    var oBox = dovument.getElementById('skip');
    function hasEle (ele, cls) {
        return els.className === cls
    }
    // 优化后
    function hasEle (ele, cls) {
        var classname = ele.className
        return classname === cls
    }
  </script>
</body>
</html>