同源、同源策略、JSONP、防抖与节流

同源：如果两个页面的协议、域名、和端口都相同，则两个页面具有相同的源

同源策略

是浏览器提供的一个安全功能

A网站的JavaScript不允许和非同源的C网站进行数据交互

跨域：是同源的对立面

出现跨域的根本原因：浏览器的同源策略不允许非同源的URL之间进行数据交互

浏览器对跨域请求的拦截：

返回数据但是被同源策略给拦截了。

实现跨域数据请求：

JSONP是被迫想出来的一种临时解决方案。缺点是只支持get请求，不支持post请求

CORS属于跨域的根本解决方案。支持get和post请求，缺点是对低版本浏览器不兼容

JSONP

script标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本，并通过函数调用的形式接受跨域接口响应回来的数据

jQuery实现JSONP的过程

发起jsonp请求的时候，动态向hearder中append一个script标签

请求成功之后，动态移除刚才创建的那个script标签

如果需要自定义回调函数的名称：jsonpCallback: 'abc'

防抖和节流

防抖：是当事件被触发之后，延迟n秒后再执行回调，如果n秒内事件又被触发，则重新开始计时。作用：能够提高浏览器的性能。

应用场景：用户在输入框中连续输入一串字符的时候，只有在输入完成之后才可以执行查询请求，这样可以有效的介绍请求次数，节约资源。

缓存搜索建议列表：当用户发起的请求和上几次请求相同的时候就可以把上几次请求的数据保存到一个对象中去。

节流：可以减少一段事件内事件的触发频率。

应用频率：鼠标连续不断的触发某事件，单位时间内只能被触发一次

懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，不浪费cpu资源。

节流阀需要给变量定义成null，清空节流阀也要将timer清空为null，不是清空定时器

            let timer = null

            addEventListener('mousemove', function(e) {

                    if (timer) {

                        return

                    }

                    timer = setTimeout(function() {

                        $("#angel").css('left', e.pageX + 'px').css('top', e.pageY + 'px')

                        timer = null

                    }, 20)

                    console.log('ok');

                })