逻辑与运算
if()else()
可以简化为 flag==1?true:false
includes 处理多重条件
if(code==='202' || code === '203' || code === '204')
可以简化为if(['202','203','204'].includes(code))
map的使用
var arr=['1','2','3'];
假如我们有一个需要把这些数据都转为Number类型呢？是不是第一时间想到了for循环
其实还有更简单的方法。
arr=arr.map((v)=>Number(v));
var str=[['1','2'],['2','3']];
str=str.map((v)=>v.map((item)=>Number(item)));
也适用于多维数组哦
every："一假则假"
注意哦 every不会对空数组进行检测
arr.every((currentValue,index,array)=>{ //适合用于全选
// currentValue = 当前执行元素
// index = 当前索引值
// array = 执行的数组
})
some： "一真则真"
arr.some((currentValue,index,array)=>{
// currentValue = 当前执行元素
// index = 当前索引值
// array = 执行的数组
})
filter 返回新的数组，返回符合条件的数组
arr.filter((currentValue,index,array)=>{
// currentValue = 当前执行元素
// index = 当前索引值
// array = 执行的数组
})
JS中尽量减少闭包的使用
1.闭包会形成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能 2.还会容易导致内存的泄漏
闭包也有自己的优势：保存和保护，我们只能尽量减少，但是无可避免
使用定时器注意的问题
如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval，因为setTimeout每一次都会初始化一个定时器，
setInterval只会在开始的时候初始化一个定时器。
采用CSS雪碧图（CSS Sprit / CSS 图片精灵）技术，把一些小图合并在一张大图上，使用的时候通过背景图片定位，
比如我们的icon图标可以汇总为一张图片
.main{
background:url('../img/sprit.png') no-repeat;
background-size:x y; /*和原图的大小保持一致*/
}
.box{
background-position:x y; /*通过背景定位，定位到具体的位置，展示不同的图片即可*/
}
避免使用CSS表达式
/*CSS表达式*/
.box{
background-color:expression((new Date()).getHours()%2?'red':'blue')
}
尽量减少cookie的大小，正确设置cookie的生效时间，无用的cookie让其尽早失效
避免图片有空的 src 属性
在有些浏览器下，图片空的 src 属性也是会向服务端发送请求的，这些无意义的请求是会增加服务器的压力的。
使用预加载
预加载和延迟加载看似相反，其实它们有两个不同的目的，延迟加载是为了更快的完成页面的加载，而预加载是指提前将页面需要的组件下载下来并缓存，减少页面的响应时间。
尽可能使用CSS动画
网站设计对美观特性和可配置元素动画的大量需求使用CSS动画比起JavaScript驱动
的动画效率更高。CSS动画同时需要更少的代码。很多的CSS动画是用GPU处理的
，因此动画本身很流畅，当然你可以使用下面这个简单的CSS强制使你的硬件加速：
避免css的重绘重排
1.重绘(Repaint)
重绘是一个元素外观的改变所触发的浏览器行为，例如改变outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，所以并不一定伴随重排。
2.重排(Reflow)
渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排。
网站中一些兼容优化
1. 获取滚动条的兼容
var scrollTop = document.documentElement.scrollTop || document.scrollTop
2. 阻止浏览器默认行为兼容
preventDefault : function(event) {
if(event.preventDefault) {
event.preventDefault()
}else {
event.returnValue = false
}
}
3. 阻止事件冒泡的兼容
stopPropagation : function(event) {
if(event.stopPropagation) {
event.stopPropagation()
}else {
event.canceBubble = true
}
}
5. document.ondragstart = function(){
return false;
}
