上一节:
下一节:

  JavaScript 性能

  • JavaScript性能

    如何加快JavaScript代码的速度。使得客户端运行得更加的流畅，使得用户有更好的体验。下面就来介绍几种提升性能的常用方法。

  • 减少循环中的操作

    循环通常用于编程。循环中的每个语句（包括for语句）都会在循环的每次迭代中执行。可以放在循环外的语句或赋值将使循环运行得更快。

    坏的示范：

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

    好的示范：

    var i;
var l = arr.length;
for (i = 0; i < l; i++) {
    每次循环迭代时，错误的代码都会访问数组的length属性。更好的代码访问循环外的length属性，使循环运行得更快。

  • 减少DOM访问

    与其他JavaScript语句相比，访问HTML DOM非常慢。如果您希望多次访问DOM元素，请访问它一次，并将其用作局部变量： 
    var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";
    尝试一下

  • 减少DOM大小

    保持HTML DOM中的元素数量很少。这将始终改善页面加载，并加快渲染（页面显示），尤其是在较小的设备上。每次搜索DOM的尝试（如getElementsByTagName）都将受益于较小的DOM。

  • 避免不必要的变量

    如果您不打算保存值，请不要创建新变量。通常你可以替换这样的代码： 
    var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
    用这个替换上面的： 
    document.getElementById("demo").innerHTML = firstName + " " + lastName

  • 延迟JavaScript加载

    将脚本放在页面底部，可让浏览器首先加载页面。在下载脚本时，浏览器不会启动任何其他下载。此外，可能会阻止所有解析和呈现动作。
    HTTP规范定义浏览器不应并行下载两个以上的组件。
    另一种方法是defer="true"在脚本标记中使用。defer属性指定在页面完成解析后应该执行脚本，但它仅适用于外部脚本。如果可能，您可以在页面加载后按代码将脚本添加到页面中： 
    <script>
window.onload = function() {
  var element = document.createElement("script");
  element.src = "myScript.js";
  document.body.appendChild(element);
};
</script>

  • 避免使用

    避免使用with关键字。它对速度有负面影响。它也使JavaScript范围变得混乱。严格模式下不允许使用with关键字。
上一节:
下一节: