zoukankan      html  css  js  c++  java
  • javascript性能优化

    1、尊重对象所有权

     不要为实例或原型添加属性;
     不要为实例或原型添加方法;
     不要重定义已存在的方法。

     最佳的方法便是永远不修改不是由你所有的对象。所谓拥有对象,就是说这个对象是你创建的,比如你自己创建的自定义类型或对象字面量。而 Array 、 document 这些显然不是你的,它们在你的代码执行前就存在了。

    2、避免全局变量

    最多创建一个全局变量,让其他对象和函数存在其中。请看以下例子:

    //两个全局量——避免!!
    var name = "Nicholas";
    function sayName(){
    alert(name);
    }

    这段代码包含了两个全局量:变量 name 和函数 sayName() 。其实可以创建一个包含两者的对象,如下例所示:

    //一个全局量——推荐
    var MyApplication = {
    name: "Nicholas",
    sayName: function(){
    alert(this.name);
    }
    };

    3、避免与 null 进行比较

     如果值应为一个引用类型,使用 instanceof 操作符检查其构造函数;
     如果值应为一个基本类型,使用 typeof 检查其类型;
     如果是希望对象包含某个特定的方法名,则使用 typeof 操作符确保指定名字的方法存在于对象上。

    4、使用常量

    尽管 JavaScript 没有常量的正式概念,但它还是很有用的。这种将数据从应用逻辑分离出来的思想,可以在不冒引入错误的风险的同时,就改变数据。请看以下例子:

    var Constants = {
    INVALID_VALUE_MSG: "Invalid value!",
    INVALID_VALUE_URL: "/errors/invalid.php"
    };
    function validate(value){
    if (!value){
    alert(Constants.INVALID_VALUE_MSG);
    location.href = Constants.INVALID_VALUE_URL;
    }
    }

    5、避免全局查找

    可能优化脚本性能最重要的就是注意全局查找。使用全局变量和函数肯定要比局部的开销更大,因为要涉及作用域链上的查找。请看以下函数:

    function updateUI(){
    var imgs = document.getElementsByTagName("img");
    for (var i=0, len=imgs.length; i < len; i++){
    imgs[i].title = document.title + " image " + i;
    }
    var msg = document.getElementById("msg");
    msg.innerHTML = "Update complete.";
    }

    该函数可能看上去完全正常,但是它包含了三个对于全局 document 对象的引用。如果在页面上有多个图片,那么 for 循环中的 document 引用就会被执行多次甚至上百次,每次都会要进行作用域链查找。通过创建一个指向 document 对象的局部变量,就可以通过限制一次全局查找来改进这个函数的性能:

    function updateUI(){
    var doc = document;
    var imgs = doc.getElementsByTagName("img");
    for (var i=0, len=imgs.length; i < len; i++){
    imgs[i].title = doc.title + " image " + i;
    }
    var msg = doc.getElementById("msg");
    msg.innerHTML = "Update complete.";
    }

    这里,首先将 document 对象存在本地的 doc 变量中;然后在余下的代码中替换原来的 document 。与原来的的版本相比,现在的函数只有一次全局查找,肯定更快。

    6、性能的其他注意事项

    原生方法较快——只要有可能,使用原生方法而不是自己用 JavaScript 重写一个。原生方法是用诸如 C/C++之类的编译型语言写出来的,所以要比 JavaScript 的快很多很多。JavaScript 中最容易被忘记的就是可以在 Math 对象中找到的复杂的数学运算;这些方法要比任何用 JavaScript 写的同样方法如正弦、余弦快的多。
    Switch 语句较快 —— 如果有一系列复杂的 if-else 语句,可以转换成单个 switch 语句则可以得到更快的代码。还可以通过将 case 语句按照最可能的到最不可能的顺序进行组织,来进一步优化 switch 语句。
    位运算符较快 —— 当进行数学运算的时候,位运算操作要比任何布尔运算或者算数运算快。选择性地用位运算替换算数运算可以极大提升复杂计算的性能。诸如取模,逻辑与和逻辑或都可以考虑用位运算来替换。

  • 相关阅读:
    PHP对象
    MySQL多表更新
    使用not in的子查询
    MySQL比较运算符的子查询
    控制器调用函数
    MVC目录规范
    MVC流程
    mxnet安装
    离线安装Python包hickle,easydict
    深度学习基础
  • 原文地址:https://www.cnblogs.com/mengfangui/p/7966540.html
Copyright © 2011-2022 走看看