前端技术总结六--其他
其它
1、 性能优化
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
2、 跨域
什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略限制以下几种行为：
1) Cookie、LocalStorage 和 IndexDB 无法读取
2) DOM 和 Js对象无法获得
3) AJAX 请求不能发送
跨域解决方案
1、 通过jsonp跨域
ü 原生实现：传参一个回调函数名给后端，后端返回时执行这个回调函数
ü jquery ajax：dataType: 'jsonp'
ü vue.js：_this.$http.jsonp()
2、 跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。主流解决方案。
3、 WebSocket协议跨域
4、 nginx代理跨域
3、 Nginx
Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器；同时也是一个IMAP、POP3、SMTP代理服务器；Nginx可以作为一个HTTP服务器进行网站的发布处理，另外Nginx可以作为反向代理进行负载均衡的实现。
代理：
正向代理
代理的是客户端，代客户端发出请求。
特点是客户端非常明确要访问的服务器地址；服务器只清楚请求来自哪个代理服务器，而不清楚来自哪个具体的客户端；正向代理模式屏蔽或者隐藏了真实客户端信息。
反向代理：
它代理的是服务端，代服务端接收请求
服务器集群分布式部署的情况下，反向代理隐藏了服务器的信息。客户端是无感知代理的存在的，反向代理对外都是透明的，访问者并不知道自己访问的是一个代理。因为客户端不需要任何配置就可以访问。
负载均衡
Nginx反向代理服务器接收到的请求数量，就是我们说的负载量。
请求数量按照一定的规则进行分发到不同的服务器处理的规则，就是一种均衡规则。
将服务器接收到的请求量按照规则分发的过程，称为负载均衡。
4、 CDN
Content Delivery Network即内容分发网络。
CDN是一组分布在多个不同的地理位置的WEB服务器，用于更加有效的向用户发布内容，在优化性能时，会根据距离的远近来选择 。
CDN加速意思就是在用户和我们的服务器之间加一个缓存机制，通过这个缓存机制动态获取IP地址根据地理位置，让用户到最近的服务器访问，解决网络拥堵，提高访问速度，解决由于网络带宽小，用户访问量大，网点分布不均等原因导致的访问速度慢的问题。
CDN能够缓存JavaScript脚本，css样式表，图片，图标，Flash等静态资源文件（不包括html页面），这些静态资源文件的访问频率很高，将其缓存在CDN可以极大地提高网站的访问速度，但由于CDN是部署在网络运营商的机房，所以在一般的网站很少用CDN加速。
CDN的优势很明显：（1）CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低；（2）大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源站的负载。
5、 观察者模式
概念：
观察者模式，属于行为型模式的一种，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。
注意：有些人认为观察者模式就是发布订阅模式，但实际上观察者模式和发布订阅模式是有区别的。
区别：观察者模式只有两个，一个是观察者一个是被观察者。发布订阅模式不一样，发布订阅模式还有一个中间层，发布订阅模式的实现是，发布者通知给中间层 => 中层接受并通知订阅者 => 订阅者收到通知并发生变化
// 创建对象 var targetObj = { name:'小花' } var targetObj2 = { name:'小李' } // 定义值改变时的处理函数（观察者） function observer(oldVal, newVal) { // 其他处理逻辑... targetObj2.name = newVal console.info('targetObj2的name属性的值改变为 ' + newVal); } // 定义name属性及其set和get方法（name属性为被观察者） Object.defineProperty(targetObj, 'name', { enumerable: true, configurable: true, get: function() { return name; }, set: function(val) { //调用处理函数 observer(name, val) name = val } }); targetObj.name = '张三'; targetObj.name = '李四'; console.log(targetObj2.name)
虽然我们只是改变了targetObj的name属性，但是因为观察者模式的设计，targetObj2的name属性同样被改变，这就实现了一个简单的观察者模式。
6、 垃圾回收机制
定义：指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。而 JavaScript 在创建对象(对象、字符串等)时会为它们分配内存，不再使用对时会“自动”释放内存，这个过程称为垃圾收集。
四种常见的内存泄漏：全局变量，未清除的定时器，闭包，以及 dom 的引用
全局变量不用var 声明的变量，相当于挂载到 window 对象上。如：b=1; 解决：使用严格模式被遗忘的定时器和回调函数、闭包、没有清理的 DOM 元素引用
