推荐订阅源

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 元素引用