脚本类
尽量使用id选择器
选择页面DOM元素时尽量使用id选择器,因为id选择器速度最快。
合理缓存DOM对象
对于需要重复使用的DOM对象,要优先设置缓存变量,避免每次使用时都要从整个DOM树中重新查找。
// 不推荐
$('#mod .active').remove('active');
$('#mod .not-active').addClass('active');
// 推荐
let $mod = $('#mod');
$mod.find('.active').remove('active');
$mod.find('.not-active').addClass('active');
页面元素尽量使用事件代理,避免直接事件绑定
使用事件代理可以避免对每个元素都进行绑定,并且可以避免出现内存泄露及需要动态添加元素的事件绑定问题,所以尽量不要直接使用事件绑定。
/ 不推荐
$('.btn').on('click', function(e){
console.log(this);
});
// 推荐
$('body').on('click', '.btn', function(e){
console.log(this);
});
使用touchstart代替click
由于移动端屏幕的设计,touchstart事件和click事件触发时间之间存在300毫秒的延时,所以在页面中没有实现touchmove滚动处理的情况下,可以使用touchstart事件来代替元素的click事件,加快页面点击的响应速度,提高用户体验。但同时我们也要注意页面重叠元素touch动作的点击穿透问题。
$('body').on('click', '.btn', function(e){
console.log(this);
});
// 推荐
$('body').on('touchstart', '.btn', function(e){
console.log(this);
});
避免touchmove、scroll连续事件处理
需要对touchmove、scroll这类可能连续触发回调的事件设置事件节流,例如设置每隔16ms(60帧的帧间隔为16.7ms,因此可以合理地设置为16ms)才进行一次事件处理,避免频繁的事件调用导致移动端页面卡顿。
// 不推荐
$('.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的字符串模板
这些都是一些基础的安全脚本编写问题,尽可能使用较高效率的特性来完成这些操作,避免不规范或不安全的写法。
尽量使用ECMAScript 6+的特性来编程
ECMAScript 6+一定程度上更加安全高效,而且部分特性执行速度更快,也是未来规范的需要,所以推荐使用ECMAScript 6+的新特性来完成后面的开发。