优化代码的目的：提高运行速度；
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");
