介绍下浏览器跨域

跨域问题来源于浏览器的同源策略，浏览器为了提高网站的安全性，在发送ajax请求时，只有在当前页面地址与请求地址的协议+域名+端口号相同时才允许访问，否则会被拦截。

怎么去解决跨域问题

解决跨域的常用方法有三种，分别为使用代理（如nginx），CORS（跨域资源共享），jsonp

jsonp⽅案需要服务端怎么配合

在服务器端，需要对script的src进行url解析，获取前端需要的回调函数的信息，并返回给客户端，在客户端对后端返回结果进行执行。

Ajax发⽣跨域要设置什么（前端）

在header中设置CORS跨域请求

加上CORS之后从发起到请求正式成功的过程

简单请求的流程：浏览器直接发送CORS跨域请求，并在header信息中增加一个Origin字段，表明这是一个跨域的请求。服务器根据这个值，决定是否同意这次请求。如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应，浏览器收到这个回应发现这个回应的头信息没有包含Access-Control-Allow-Origin字段，就知道错了，从而会抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意这种错误无法通过状态码识别，此时HTTP回应的状态码可能是200

非简单请求的过程：非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

xsrf跨域攻击的安全性问题怎么防范

referer 检查请求来源
token 检查session中的Token和Header中的Token是否一致

使⽤Async会注意哪些东⻄

第一点，await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try...catch代码块中。

第二点，多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。

第三点，await命令只能用在async函数之中，如果用在普通函数，就会报错。

Async⾥⾯有多个await请求，可以怎么优化（请求是否有依赖）

多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。

Promise和Async处理失败的时候有什么区别

Promise使用catch函数捕获异常。 Async可以直接使用try...catch, 也可以和Promise使用一样的catch函数

Redux在状态管理⽅⾯解决了React本身不能解决的问题

多层组件传递参数很麻烦
状态修改的管理

Redux有没有做过封装

主要是使用Redux中间件

react⽣命周期，常⽤的⽣命周期

react的生命周期分成挂载期、更新期和卸载期。

componentDidMount()

componentDidUpdate()

componentWillUnmount()

对应的⽣命周期做什么事

组件加载，组件更新，组件卸载

遇到性能问题⼀般在哪个⽣命周期⾥解决

更新期，避免组件频繁更新

React怎么做性能优化（异步加载组件...）

避免组件频繁更新异步加载组件

写react有哪些细节可以优化
React的事件机制（绑定⼀个事件到⼀个组件上）

react 基于 vitrual dom 实现了 syntheticEvent （合成事件），react 事件处理器接收到一个 syntheticEvent 对象，syntheticEvent 和原生浏览器事件一样拥有同样的接口，也支持事件冒泡机制。可以通过 stopPropgation 和 preventDefault 中断。如果需要访问原生事件对象，可以使用 nativeEvent 属性。

react 的事件机制利用了事件委托机制。事件并没有绑定在真实的 dom 节点上，而是把事件都绑定在结构的最外层 document，使用一个统一的事件监听器。所有的事件都由这个监听器统一分发。

组件挂载和更新时，会将绑定的事件分门别类的放进一个叫做EventPluginHub的事件池里。事件触发时，根据事件产生的Event对象找到触发事件的组件，再通过组件标识和事件类型从事件池里找到对应的事件监听回调，然后执行相关的监听函数。

介绍下事件代理，主要解决什么问题

件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

前端开发中⽤到哪些设计模式

工厂模式、单例模式、原型模式、装饰模式

React/Redux中哪些功能⽤到了哪些设计模式

中介者模式、

state监听：发布订阅模式享元模式(flyweight)：state props

JS变量类型分为⼏种，区别是什么

var let const, var 没有块作用域，可重复声明，let const 有块作用域、不可重复声明，let 声明后可变、const不可变。

JS⾥垃圾回收机制是什么，常⽤的是哪种，怎么处理的

JS执行环境中的垃圾回收器怎样才能检测哪块内存可以被回收有两种方式：标记清除（mark and sweep）、引用计数(reference counting)。现在主流的浏览器都使用标记清除（mark and sweep）。

标记清除：大部分浏览器使用这种垃圾回收，当变量进入执行环境(声明变量）的时候，垃圾回收器将该变量进行了标记，当该变量离开环境的时候，将其再度标记，随之进行删除。
引用计数：这种方式常常会引起内存的泄露，主要存在于低版本的浏览器。它的机制就是跟踪某一个值得引用次数，当声明一个变量并且将一个引用类型赋值给变量得时候引用次数加1，当这个变量指向其他一个时引用次数减1，当为0时出发回收机制进行回收。

⼀般怎么组织CSS（Webpack）

base.css+common.css+page.css。

base.css 所有页面使用 common.css 被多个页面引用 page.css 页面私有

前端面试题（二）

componentDidMount()

componentDidUpdate()

componentWillUnmount()