2020-05-18

一，什么是事件捕获、事件冒泡、事件委托？

    作用：1，支持为同一个DOM元素注册多个同类型事件；2，可将事件分成事件捕获和事件冒泡机制

    addEventListener的第三个参数觉得，该事件为冒泡还是捕获，默认false为冒泡，true为捕获

    事件捕获：当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件

    事件冒泡：当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件

    事件委托：通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素；

    事件委托的优点：1，提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。,2，动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

    事件委托的缺点：1，focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托；2，mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的；

二，window.onload和DOMContentLoaded的区别

    1、当onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。2、当DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

三，什么是跨域？以及如何解决-------------------https://juejin.im/post/5c9c38e2e51d452db7007f66

    跨域：由浏览器同源策略限制的一类请求场景

    同源策略：所谓同源是指"协议+域名+端口"三者相同，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

    解决方案：

    1，通过jsonp跨域：动态创建script，请求一个带参网址实现跨域通信

        优点：JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

        缺点：只能实现get一种请求、不安全 容易遭到xss攻击

    2，CORS：CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器

        服务端设置Access-Control-Allow-Origin：*

        优点：目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案；CORS与JSONP的使用目的相同，但是比JSONP更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据；

        缺点：整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

    3，document.domain + iframe跨域

        此方案仅限主域相同，子域不同的跨域应用场景(网页一级域名相同，只是二级域名不同)。实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

    4，location.hash

        实现原理： a与b跨域相互通信，通过中间页c来实现(且c与a是同域)。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

        具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

    5，window.name + iframe跨域

        浏览器窗口有window.name属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。并且可以支持非常长的 name 值（2MB）。

    6，postMessage跨域

        这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

        postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。

    7，nginx代理跨域

        跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。

        实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

    8，WebSocket

        WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

    9，Nodejs中间件代理跨域

        node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

    10，vue代理跨域：在vue.config.js中设置devServer；react代理跨域：在package.json中设置proxy