移动端性能优化(4)

脚本类

尽量使用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+的新特性来完成后面的开发。