腳本類
盡量使用id選擇器
選擇頁(yè)面DOM元素時(shí)盡量使用id選擇器实牡，因?yàn)閕d選擇器速度最快。
合理緩存DOM對(duì)象
對(duì)于需要重復(fù)使用的DOM對(duì)象轴合，要優(yōu)先設(shè)置緩存變量创坞，避免每次使用時(shí)都要從整個(gè)DOM樹(shù)中重新查找。
// 不推薦
$('#mod .active').remove('active');
$('#mod .not-active').addClass('active');
// 推薦
let $mod = $('#mod');
$mod.find('.active').remove('active');
$mod.find('.not-active').addClass('active');
頁(yè)面元素盡量使用事件代理受葛，避免直接事件綁定
使用事件代理可以避免對(duì)每個(gè)元素都進(jìn)行綁定题涨，并且可以避免出現(xiàn)內(nèi)存泄露及需要?jiǎng)討B(tài)添加元素的事件綁定問(wèn)題，所以盡量不要直接使用事件綁定总滩。
/ 不推薦
$('.btn').on('click', function(e){
console.log(this);
});
// 推薦
$('body').on('click', '.btn', function(e){
console.log(this);
});
使用touchstart代替click
由于移動(dòng)端屏幕的設(shè)計(jì)纲堵，touchstart事件和click事件觸發(fā)時(shí)間之間存在300毫秒的延時(shí)，所以在頁(yè)面中沒(méi)有實(shí)現(xiàn)touchmove滾動(dòng)處理的情況下闰渔，可以使用touchstart事件來(lái)代替元素的click事件席函，加快頁(yè)面點(diǎn)擊的響應(yīng)速度，提高用戶體驗(yàn)澜建。但同時(shí)我們也要注意頁(yè)面重疊元素touch動(dòng)作的點(diǎn)擊穿透問(wèn)題向挖。
$('body').on('click', '.btn', function(e){
console.log(this);
});
// 推薦
$('body').on('touchstart', '.btn', function(e){
console.log(this);
});
避免touchmove、scroll連續(xù)事件處理
需要對(duì)touchmove炕舵、scroll這類可能連續(xù)觸發(fā)回調(diào)的事件設(shè)置事件節(jié)流，例如設(shè)置每隔16ms（60幀的幀間隔為16.7ms跟畅，因此可以合理地設(shè)置為16ms）才進(jìn)行一次事件處理咽筋，避免頻繁的事件調(diào)用導(dǎo)致移動(dòng)端頁(yè)面卡頓。
// 不推薦
$('.scroller').on('touchmove', '.btn', function(e){
console.log(this);
});
// 推薦
$('.scroller').on('touchmove', '.btn', function(e){
let self = this;
setTimeout(function(){
console.log(self);
}, 16);
});
避免使用eval徊件、with奸攻，使用join代替連接符+蒜危，推薦使用ECMAScript 6的字符串模板
這些都是一些基礎(chǔ)的安全腳本編寫(xiě)問(wèn)題，盡可能使用較高效率的特性來(lái)完成這些操作睹耐，避免不規(guī)范或不安全的寫(xiě)法辐赞。
盡量使用ECMAScript 6+的特性來(lái)編程
ECMAScript 6+一定程度上更加安全高效，而且部分特性執(zhí)行速度更快硝训，也是未來(lái)規(guī)范的需要响委，所以推薦使用ECMAScript 6+的新特性來(lái)完成后面的開(kāi)發(fā)。
