强缓存策略

对于一些 永远不会变 的图片可以使用强缓存的方式缓存在用户的浏览器上。

JavaScript 脚本类
1．尽量使用 id 选择器
选择器选择页面 DOM 元素时尽量使用 id 选择器，因为 id 选择器速度最快。

2．合理缓存 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');

　　

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 代替连接符＋，推荐使用 ECMAScript6 的字符串模板
这些都是一些基础的安全脚本编写问题，尽可能使用较高效率的特性来完成这些操作，避免不规范或不安全的写法。

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

参考链接：https://blog.csdn.net/y_programmer_ape/article/details/107307676