代码优化

优化代码的目的：提高运行速度；

js代码优化：

• 代码重用
• 避免全局变量(全局变量，封闭空间，模块化，mvc..)
• 拆分函数避免函数过于臃肿
• 注释
• 减少HTTP请求
• 减少DOM操作
• 使用json对数据进行操作
• 使用语义化标签
• 使用CDN加速
• 压缩代码
• 使用垃圾回收、脏机制查询
• 异步加载第三方资源；动态创建script、defer;
• 设置本地缓存；
• 避免iframe\img等src属性为空
• 点击事件优化；没用就清除；
• 注意scroll、resize事件绑定的时机；

HTML

• 使用压缩后的第三方库，带min的文件；
• js代码在页面最后加载；
• 图片使用JPG优于png;png8优于png24；
• 使用懒加载；

CSS

• 使用合并属性：margin/background等；
• 移除空的CSS规则；
• 去掉0的单位；
• 不要声明过多的font-size;

渲染优化

• 动画优化：使用CSS3动画，使用requestAnimationFrame替代setInterval;
• 高频事件优化：touch事件、scroll事件；
• 图片优化：优化图片、webp优于jpg\png8优于gif、对图片使用lazyload；
• 使用transition触发、transform触发、opacity；
• js主动释放内存；

meta标签优化

向数组中插入元素

var arr=[1,2,3,4,5];
arr.push(6);
换成
arr[arr.length]=6;

arr.unshift(0);
改为
[0].concat(arr);

优化嵌套的条件语句

    if (color) {
        if (color === 'black') {
            getBlack();
        } else if (color === 'red') {
            getRed();
        } else if (color === 'blue') {
            getBlue();
        } else if (color === 'green') {
            getGreen();
        } else {
            printYellowBackground();
        }
    }

优化：

    var colorObj = {
        'black': getBlack,
        'red': getRed,
        'blue': getBlue,
        'green': getGreen,
        'yellow': getYellow
    };
    if (color in colorObj) {
        colorObj[color]();
    }

undefined==null;//true;
undefined===null;//fallse;

undefined与null的区别

• undefined表示一个变量没有被声明，或者被声明了但没有被赋值；
• null是一个表示“没有值”的值,但是他是一个值；
• Javascript将未赋值的变量默认值设为undefined；
• undefined不是一个有效的JSON，而null是；
• undefined的类型(typeof)是undefined；
• null的类型(typeof)是object；
• 他们是基本类型；

检查某对象是否有某属性：

 var obj={
    name:'hello'
 }
 if(obj.name){
    console.log('obj has name');
 }

转换

 var obj={
    name:'world'
 }
obj.hasOwnProperty("name")//true
"name" in obj//true

obj.hasOwnProperty('valueOf')//false;继承自原型链(__proto__属性)
"valueOf" in obj//true

区分与检查属性的深度不同，换言之hasOwnProperty只在本身有此属性时返回true,而in操作符不区分属性来自于本身或继承自原型链。

快速测量js代码性能，使用console的timeEnd方法

    console.time("Array initialize");
   var arr = new Array(100),
       len = arr.length,
       i;
   
   for (i = 0; i < len; i++) {
       arr[i] = new Object();
   };
   console.timeEnd("Array initialize");