电脑占内存小的浏览器 前端性能优化 —— 移动端浏览器优化策略(4)

// 推荐

let $mod = $('#mod');

$mod.find('.active').remove('active');

$mod.find('.not-active').addClass('active');

3．页面元素尽量使用事件代理，避免直接事件绑定

使用事件代理可以避免对每个元素都进行绑定，并且可以避免出现内存泄露及需要动态添加元素的事件绑定问题，所以尽量不要直接使用事件绑定。

// 不推荐

$('.btn').on('click', function(e){

console.log(this);

});

// 推荐

$('body').on('click', '.btn', function(e){

console.log(this);

});

4．使用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);

});

5．避免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);

});

6．避免使用eval、with，使用join代替连接符+，推荐使用ECMAScript 6的字符串模板

这些都是一些基础的安全脚本编写问题，尽可能使用较高效率的特性来完成这些操作，避免不规范或不安全的写法。

7．尽量使用ECMAScript 6+的特性来编程

ECMAScript 6+一定程度上更加安全高效，而且部分特性执行速度更快，也是未来规范的需要，所以推荐使用ECMAScript 6+的新特性来完成后面的开发。

五、渲染类

1．使用Viewport固定屏幕渲染，可以加速页面渲染内容

一般认为，在移动端设置Viewport可以加速页面的渲染，同时可以避免缩放导致页面重排重绘。在移动端固定Viewport设置的方法如下。

<!-- 设置viewport不缩放 -->

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2．避免各种形式重排重绘

页面的重排重绘很耗性能，所以一定要尽可能减少页面的重排重绘，例如页面图片大小变化、元素位置变化等这些情况都会导致重排重绘。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/ruanjian/article-59534-4.html