- 1.JS中尽量减少闭包的使用(原因 闭包会产生不释放的栈内存)
---循环给元素事件绑定的时候，尽可能把后期所需要的信息存储到元素的自定义属性中
--- 可以在最外层形成一个闭包，把一些后续需要的公共信息进行存储，而不是每一个方法都创建闭包
--- 尽可能的手动释放不被占用的内存。
- 2.尽量合并CSS和JS文件
--- (把需要引入的css合并为一个，js也是合并为一个)，原理是减少http请求次数，尽可能的把合并后的代码进行压缩，减少http请求资源大小。
--- webpack这种自动化构建工具可以帮我们实现代码的合并和压缩(工程化开发)
--- 移动端开发(追求高性能pc开发)如果css或者js不是需要很多，我们可以把js和css直接写成内嵌式
- 3.尽量使用字体图标或者svg图标来代替传统的png图片
(因为字体图标是矢量图，基于代码便携出来的，放大不会变形，渲染速度快)
- 4.减少对DOM的操作(主要是减少DOM的重绘和回流(重排))
--- 关于重排的分离读写:设置的代码写在一起
--- 使用文档碎片或者字符串拼接做数据绑定(DOM动态创建)
- 在JS中避免嵌套循环
(额外增加很多循环次数)和死循环(遇到死循环浏览器会卡死)
-
- 采用图片的懒加载(延迟加载)
--- 为了减少页面第一次加载过程中，http的请求次数，让页面打开速度变快
--- 步骤：开始加载页面的时候，所有的真实图片都不去发送http请求加载，而是给一张占位图，当页面加载完，并且图片在可视区域内，我们再去做图片加载。 - 利用浏览器和服务器端的缓存技术(304缓存)
把一些不经常更新的静态资源文件做缓存处理，例如 JS/CSS/静态图片都可以做缓存，原理也是为了减少http的请求次数和请求大小，让获取速度更快
- 尽可能使用事件委托(事件代理)来处理事件绑定操作，减少DOM的频繁操作，其中包括给每一个DOM元素做事件绑定
- 尽量减少CSS表达式的使用
#mydiv {
position:absolute;
width:100px;
height:100px;
left:expression(document.body.offsetWidth - 110 + "px");
top:expression(document.body.offsetHeight - 110 + "px");
}
- CSS选择器解析规则是从右向左解析
.container .link a{
先找到所有的A，再删选是在.link样式类中的，再次筛选是在.container样式类中的。。。先找到的是所有的A，操作起来是消耗性能的，我们在使用css选择器的时候尽可能减少对标签选择器的使用
}
11.做CDN加速(重量级优化)
-
- CSS雪碧图技术(css sprite/css 图片精灵)
把所有相对资源较小的图片汇总到一张大张大图上，后期我们只需要把大图加载下来，用背景定位的方式展现对应的小图即可
- 减少对于cookie的使用(最主要是减少本地cookie存储内容的大小)，因为客户端操作cooike的时候，这些信息总是在客户端和服务器端传来传去
-
- 页面中的数据获取采用异步编程和延迟分批加载
使用异步获取数据，是为了降低http通道阻塞，不会因为数据没有请求回来耽误下面信息的渲染，提高页面的打开速度(我们可以这样处理：需要动态绑定数据的区域先隐藏，等数据返回并且绑定完成后让其显示)
延迟分批加载是类似于懒加载，是为了减少http的请求次数 15.页面中出现音视频标签,我们不让页面加载的时候就去加载音视频资源
(不然页面加载速度慢)，(方案:设置 preload="none"即可)，等待页面加载完成 音视频播放的时候我们去加载音视频资源。
- 在客户端和服务器端进行信息交互的时候，对于多项数据，我们尽可能基于JSON格式来进行传送。 (JSON格式的数据，处理方便，资源偏小)相对于XML格式的传输才会有这个优势
17.尽可能实现JS封装(低耦合高内聚)，减少页面中的冗余代码，减少http请求资源的大小
- JS中尽量减少对EVAL的使用，因为JS在合并压缩的时候，可能会出现由于出现由于符号不完善，导致代码执行优先级错乱问题。EVAl处理起来消耗性能也是偏大一点的。
- CSS中设置定位后，最好使用Z-INDEX改变盒子层级， 让所有的盒子不在相同的平面上，这样后续处理的时候，性能有那么一丢丢的提高。
- 在基于AJAX的GET请求进行数据交互的时候，根据需求可以让其产生缓存(这个缓存不是304缓存)，这样下一次从相同地址获取的数据是上一次缓存的数据(但是很少用，项目中一般刻意清除这个缓存的时候偏多)
21.尽量减少对于filter滤镜属性的使用(这个属性消耗性能较大一些)
22.在CSS倒入的时候尽量减少使用@import导入式，因为@import是同步操作，只有把这个对应的CSS导入，才会向下加载，而link是异步操作
额外技巧
我们一般都把CSS放在body上，把JS放在body下面(让其先加载css，再加载JS，先加载CSS是为了保证页面渲染的过程中元素是带着样式渲染的，而JS一般都是用来操作DOM元素的，需要等待元素加载完再操作)
能用css搞定的，绝对不用JS，能用原生JS搞定的，绝对不用插件，绝对不使用flash (低版本浏览器的音视频除外)
---CSS处理动画等功能的性能优于JS，而且CSS中的transform变形还开启了硬件加速
使用keep-alive实现客户端和服务器长连接
尽量使用设计模式管理我们的代码(单例，构造，promise，发布订阅)，方便后期的升级和维护
开启服务器端的gzip压缩(这个压缩可以有效减少请求资源文件的大小)，其实客户端图片资源也是可以进行压缩的(但是对应24位的位图，压缩后可能会变模糊)
