腳本類
盡量使用id選擇器
選擇頁面DOM元素時盡量使用id選擇器斑响,因為id選擇器速度最快。
合理緩存DOM對象
對于需要重復(fù)使用的DOM對象畸颅,要優(yōu)先設(shè)置緩存變量盟猖,避免每次使用時都要從整個DOM樹中重新查找讨衣。
**// 不推薦**
$('#mod .active').remove('active');
$('#mod .not-active').addClass('active');
**// 推薦**
let $mod = $('#mod');
$mod.find('.active').remove('active');
$mod.find('.not-active').addClass('active');
頁面元素盡量使用事件代理,避免直接事件綁定
使用事件代理可以避免對每個元素都進行綁定式镐,并且可以避免出現(xiàn)內(nèi)存泄露及需要動態(tài)添加元素的事件綁定問題反镇,所以盡量不要直接使用事件綁定。
// 不推薦
$('.btn').on('click', function(e){
console.log(this);
});
// 推薦
$('body').on('click', '.btn', function(e){
console.log(this);
});
使用touchstart代替click
由于移動端屏幕的設(shè)計娘汞,touchstart事件和click事件觸發(fā)時間之間存在300毫秒的延時歹茶,所以在頁面中沒有實現(xiàn)touchmove滾動處理的情況下,可以使用touchstart事件來代替元素的click事件,加快頁面點擊的響應(yīng)速度惊豺,提高用戶體驗燎孟。但同時我們也要注意頁面重疊元素touch動作的點擊穿透問題。扮叨、
// 不推薦
$('body').on('click', '.btn', function(e){
console.log(this);
});
// 推薦
$('body').on('touchstart', '.btn', function(e){
console.log(this);
});
避免touchmove缤弦、scroll連續(xù)事件處理
需要對touchmove、scroll這類可能連續(xù)觸發(fā)回調(diào)的事件設(shè)置事件節(jié)流彻磁,例如設(shè)置每隔16ms(60幀的幀間隔為16.7ms,因此可以合理地設(shè)置為16ms)才進行一次事件處理狸捅,避免頻繁的事件調(diào)用導(dǎo)致移動端頁面卡頓衷蜓。
// 不推薦
$('.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ǔ)的安全腳本編寫問題,盡可能使用較高效率的特性來完成這些操作朽褪,避免不規(guī)范或不安全的寫法置吓。
盡量使用ECMAScript 6+的特性來編程
ECMAScript 6+一定程度上更加安全高效,而且部分特性執(zhí)行速度更快缔赠,也是未來規(guī)范的需要衍锚,所以推薦使用ECMAScript 6+的新特性來完成后面的開發(fā)。