JavaScript _ JS 效率

JS 效率

提高JavaScript代码的效率。

你需要去优化代码以提高JavaScript效率吗？待会再回答这个问题。

优化循环

获取数组的长度是一件轻松的事情，但是若每次都去获取数组长度，不如只获取一次，然后把数组长度存在一个变量内，这样速度会更快。

源代码：

var i;
for (i = 0; i < arrayObj.length; i++) {
    ...
}

优化后的代码：

var i;
var l = arrayObj.length;
for (i = 0; i < l; i++) {
    ...
}

避免重复使用DOM选择器

DOM选择器是非常耗费资源的一件事情，如果要不止一次操作某DOM元素，优化的方式就是只使用一次DOM选择器，然后把结果存在变量中，之后直接调用变量即可。

var obj;
obj = document.getElementById("demo");  // 存在变量中，避免重复DOM选择
obj.innerHTML = " Hello";
obj.style.color = "#46acb6";
obj.style.fontWeight = 600;
obj.style.fontSize = "36px";

运行一下

异步加载JS

异步加载JS也是一种提高效率的方式。具体实现方式，就是在window对象已经完全加载后，再添加一个引入外部js的<script>元素到文档中。

但是，异步加载JS一般主要用在JS用户统计、JS广告投放等场景。

<script>
window.onload = function() {
  var script1 = document.createElement( "script" );
  script1.src = "XXX.js";
  document.body.appendChild( script1 );
};
</script>

没有必要如此精细地去优化JS代码

松本行弘，ruby的编程哲学。其实python也是如此。不应只从机器的角度考虑速度，更应该关注开发者本身的开发效率。

你需要去优化代码以提高JavaScript效率吗？答案是没有必要。JavaScript作为运行在客户端的脚本语言，已经很快了；对细枝末节的这些地方咬文嚼字，没有太大意义；尤其是上文中对循环的优化，没有必要太在意，快一点、慢一点；没有一个地球人类能感觉出来。因此，没有必要在这些细枝末节的地方花太大精力。

但是，避免重复使用DOM选择器是一个好的习惯；应该注意与保持。至于异步加载JS，这对于特定的场景是非常有意义的。

JS 效率

推广