優(yōu)化代碼的目的：提高運(yùn)行速度闻鉴；
js代碼優(yōu)化：
- 代碼重用
- 避免全局變量(全局變量筛武，封閉空間羡忘，模塊化，mvc..)
- 拆分函數(shù)避免函數(shù)過于臃腫
- 注釋
- 減少HTTP請(qǐng)求
- 減少DOM操作
- 使用json對(duì)數(shù)據(jù)進(jìn)行操作
- 使用語(yǔ)義化標(biāo)簽
- 使用CDN加速
- 壓縮代碼
- 使用垃圾回收徘六、臟機(jī)制查詢
- 異步加載第三方資源外遇；動(dòng)態(tài)創(chuàng)建script、defer;
- 設(shè)置本地緩存女阀；
- 避免iframe\img等src屬性為空
- 點(diǎn)擊事件優(yōu)化宅荤；沒用就清除；
- 注意scroll浸策、resize事件綁定的時(shí)機(jī)冯键；
HTML
- 使用壓縮后的第三方庫(kù)，帶min的文件庸汗；
- js代碼在頁(yè)面最后加載惫确；
- 圖片使用JPG優(yōu)于png;png8優(yōu)于png24；
- 使用懶加載夫晌；
CSS
- 使用合并屬性：margin/background等雕薪；
- 移除空的CSS規(guī)則；
- 去掉0的單位晓淀；
- 不要聲明過多的font-size;
渲染優(yōu)化
- 動(dòng)畫優(yōu)化：使用CSS3動(dòng)畫所袁，使用requestAnimationFrame替代setInterval;
- 高頻事件優(yōu)化：touch事件、scroll事件凶掰；
- 圖片優(yōu)化：優(yōu)化圖片燥爷、webp優(yōu)于jpg\png8優(yōu)于gif、對(duì)圖片使用lazyload懦窘；
- 使用transition觸發(fā)前翎、transform觸發(fā)、opacity畅涂；
- js主動(dòng)釋放內(nèi)存港华；
meta標(biāo)簽優(yōu)化
向數(shù)組中插入元素
var arr=[1,2,3,4,5];
arr.push(6);
換成
arr[arr.length]=6;
arr.unshift(0);
改為
[0].concat(arr);
優(yōu)化嵌套的條件語(yǔ)句
if (color) {
if (color === 'black') {
getBlack();
} else if (color === 'red') {
getRed();
} else if (color === 'blue') {
getBlue();
} else if (color === 'green') {
getGreen();
} else {
printYellowBackground();
}
}
優(yōu)化：
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的區(qū)別
- undefined表示一個(gè)變量沒有被聲明，或者被聲明了但沒有被賦值午衰；
- null是一個(gè)表示“沒有值”的值,但是他是一個(gè)值立宜；
- Javascript將未賦值的變量默認(rèn)值設(shè)為undefined冒萄；
- undefined不是一個(gè)有效的JSON，而null是橙数；
- undefined的類型(typeof)是undefined尊流；
- null的類型(typeof)是object；
- 他們是基本類型灯帮；
檢查某對(duì)象是否有某屬性：
var obj={
name:'hello'
}
if(obj.name){
console.log('obj has name');
}
轉(zhuǎn)換
var obj={
name:'world'
}
obj.hasOwnProperty("name")//true
"name" in obj//true
obj.hasOwnProperty('valueOf')//false;繼承自原型鏈(__proto__屬性)
"valueOf" in obj//true
區(qū)分與檢查屬性的深度不同崖技，換言之hasOwnProperty只在本身有此屬性時(shí)返回true,而in操作符不區(qū)分屬性來(lái)自于本身或繼承自原型鏈。
快速測(cè)量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");
