一、从输入url到页面展示过程都发生了什么
1、URL解析（协议：http,https;域名：www.baidu;端口号：8080）
2、建立tcp连接（浏览器三次握手，第一次是客户端告诉服务器我要访问你，第二次是服务器告诉客户端我知道你要访问我了，第三次是客户端知道服务器知道自己要访问服务器了。目的是让客户端与服务器彼此知道自己要通信了）
3、客户端发送HTTP请求，服务器处理请求，返回响应结果
4、断开tcp连接
5、浏览器渲染
二、常见状态码问题
1、404：请求资源不在（后端问题一般是）
2、400：错误请求，一般是请求路径或者语法有误
3、403:服务器拒绝请求
4、401:未授权，用户没有通过认证（比如登录认证）
三、Cookie 和 Session 有什么不同
1、Cookie 保存在客户端（浏览器），Session 保存在服务器端
2、Cookie 只能保存 ASCII，Session 可以存任意数据类型，一般情况下我们可以在 Session 中保持一些常用变量信息，比如说 UserId 等
3、Cookie 可设置为长时间保持，比如我们经常使用的默认登录功能，Session 一般失效时间较短，客户端关闭或者 Session 超时都会失效
4、 单个 Cookie 保存的数据不能超过 4K，Session 可存储数据远高于 Cookie
判断用户登录状态
1、SessionID 是连接 Cookie 和 Session 的一道桥梁，大部分系统也是根据此原理来验证用户登录状态。过程是：浏览器第一次访问服务器，服务器会创建出自己的session,识别session的钥匙是sessionID,服务器会将sessionID返回给浏览器，浏览器接到服务端的返回数据后将sessionID存到自己的cookie里，同时也将此浏览器的域名存入cookie中（此时cookie中含有具体浏览器（因为域名可以知道具体浏览器）的sessionID，比如域名：百度www.baidu，sessionID：666）；当浏览器第二次访问服务器时，会先判断此浏览器要访问的服务端下有没有cookie有的话就将cookie一起发给服务端，当服务端接到浏览器数据时，解析cookie发现有sessionID于是可以判断此浏览器不是第一次访问自己，所以可以让此浏览器访问。
2、token原理，浏览器第一次访问token，服务器会生产token并且把token给浏览器，之后浏览器每次请求服务器都带上token，这样就能判断这个浏览器是不是之前也访问过当前服务器。
四、Ajax
Ajax是用来异步请求的工具。XMLHttpRequest 对象是实现 Ajax 异步交互的核心，该对象为客户端提供了在客户端和服务器之间传输数据的功能。XMLHttpRequest 对象提供了一个通过 URL 来获取数据的简单方式，并且不会是整个页面刷新。
多用来写请求,Ajax是多种技术的合集
它的优点有：
1、用户操作不需要等上一个请求结束
2、异步交互只需与服务器端交换必要的数据内容，而不是将所有数据全部更新
3、通过 Ajax 实现异步交互不需要任何第三方插件，只要浏览器支持 JavaScript 语言即可实现
缺点：
1、如果后面逻辑的执行依靠前面逻辑执行的结果的话，异步交互可能会造成问题
实现Ajax异步交互
实现 Ajax 异步交互需要服务器逻辑进行配合，而作为客户端的 HTML 页面需要完成以下步骤：
- 创建 Ajax 的核心对象 XMLHttpRequest 对象
var request = new XMLHttpRequest();
- 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
xhrReq.open(method, url, [async][, user][, password]);
参数说明：
method: 表示当前的请求方式常见的为 GET 和 POST
url: 表示当前请求的服务器端地址连接
async: 一个可选的布尔参数，表示是否异步执行操作，默认为true
user: 可选的用户名用于认证用途；默认为null。
password: 可选的密码用于认证用途，默认为null
- 构建请求所需的数据内容，并通过 XMLHttpRequest 对象的 send() 方法发送给服务器端
xhrReq.send([body])
参数说明：
body: 在 XHR 请求中要发送的数据体，如果不传递数据则为 null
- 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
- 接受并处理服务端向客户端响应的数据结果
- 将处理结果更新到 HTML 页面中
五、为什么会有跨域，如何解决跨域
因为浏览器不能执行其它网站脚本。（比如：比如一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输入的内容,这样用户名和密码就轻松到手了）
解决方式：
1、使用 vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题
六、get请求与post请求
get请求与post请求都是http协议（明文传输），所以他俩本质没区别都不安全。
区别：
1、GET请求参数会直接挂载在URL上，POST请求携带的参数在URL上看不见
2、GET请求一般用于数据和静态资源的获取，有些GET请求不用和数据库交互，所以可以使用缓存；POST请求则更多用于数据的新增和修改。新增数据无法具备固定内容。所以很多浏览器都不支持缓存POST请求
3、因为GET请求是挂载在URL上的，所以传输的数据类型只能是字符串，但是POST请求可以传输除字符串以外的数据，比如：视频，声音，图片，文档等
4、GET请求入参在URL上，POST请求入参在Request body上
七、React简介
React 的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件
组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是 props，所以可以把 props 理解为从外部传入组件内部的数据
react 具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据
props 除了可以传字符串，数字，还可以传递对象，数组甚至是回调函数。
八、状态（state）与属性（props）的差异
相同点：
- 两者都是 JavaScript 对象
- 两者都是用于保存信息
- props 和 state 都能触发渲染更新
区别：
- props 是外部传递给组件的，而 state 是在组件内被组件自己管理的，一般在 constructor 中初始化
- props 在组件内部是不可修改的，但 state 在组件内部可以进行修改
- state 是多变的、可以修改
九、应该在React组件的何处发起Ajax请求
componentDidMount组件挂载阶段发起Ajax请求
十、在React中，refs的作用是什么
在React中，refs的作用是允许我们直接访问DOM元素或组件实例的机制，通过调用refs的current属性，可以获取到相关的DOM元素
十一、渲染一个列表时，何为key，设置key的目的是什么
key属性用于标识一个元素的唯一性，当列表中的数据发生改变时，Vue会根据key值来对比哪些数据是新的，哪些数据是旧的， 从而渲染新的数据，而不用渲染整个列表。
我们先来了解Vue中实现key的底层原理步骤：
- 创建一份当前的虚拟DOM和上一次的虚拟DOM；
- 在数据发生改变后，vue会通过比较新旧虚拟DOM的差异来计算出需要对哪些DOM元素进行何种类型的操作（新增、删除、移动等）；
- 如果某个元素上添加了key属性，在计算差异时vue就会将其作为参考，如果两次数据更新时，某个元素的key值没有发生变化，则代表这个元素没有发生位置变化，vue会直接复用它，而不是重新渲染。
当vue第一次渲染时，会根据items 中的数据加载生成虚拟DOM,同时绑定key值,最后加载为以下的真实DOM节点。
当我们点击 button 按钮后，items 数据源发生变化，此时vue仍进行渲染，再次生成虚拟DOM，不过会对比上一次生成的虚拟DOM，最后根据绑定的key值重新渲染，加载为以下的真实DOM节点。
十二、vue的优点
1、文档清晰，适合初学者
2、响应式数据绑定，数据一旦被修改，视图会自动更新
十三、watch和computed有什么区别
1、进入页面，首先执行computed然后执行watch
2、computed是计算属性（多用于计算数值加减），watch是监听属性（多用来监听数据变化，比如false/true）
3、computed有缓存，watch无
十四、vue双向绑定原理
v-model是vue.js框架中的一个指令，它用于在表单输入元素和vue实例的数据之间建立双向绑定关系
v-model是@input事件与v-bind的结合体
十五、原型与原型链
详解网址：juejin.cn/post/698467…
1、每个函数都有一个属性prototype，这个属性指向一个对象，这个对象就是此函数的原型对象
2、每个通过构造函数创建出来的实例对象，其本身有个属性__proto__属性，这个属性会指向该实例对象的详解网址：构造函数的原型对象
十六、箭头函数与普通函数的区别
详解网址：blog.csdn.net/qq_42258904…
1、普通函数有function关键字，箭头函数是匿名函数
2、普通函数的this指向调用它的对象，箭头函数的this指向其上下文（任何方法都改变不了其指向，如 call() , bind() , apply()）
十七、setState 到底是同步的，还是异步的
详解网址：blog.csdn.net/youshenshiw…
2、
juejin.cn/post/706939…
1、setState本身是异步的，但在特殊环境（setTimeout、setInterval 等 DOM 原生事件）他是同步的 2、setState第二个参数的作用：因为setState是一个异步的过程，所以说执行完setState之后不能立刻更改state里面的值。如果需要对state数据更改监听，setState提供第二个参数，就是用来监听state里面数据的更改，当数据更改完成，调用回调函数，用于可以实时的获取到更新之后的数据 3、为什么setState设计为异步的： （1） setState设计为异步，可以显著的提升性能：如果每次调用setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；最好的办法应该是获取到多个更新，之后进行批量更新； （2） 如果同步更新了state，但是还没有执行render函数，而且peops依赖于state中的数据，那么state和props不能保持同步；pstate和props不能保持一致性，会在开发中产生很多的问题； 十八、http与tcp 详解网址：zhuanlan.zhihu.com/p/267520757 1、TCP协议是传输层协议，主要解决数据如何在网络中传输，而HTTP是应用层协议，主要解决如何包装数据 2、Http协议是建立在TCP协议基础之上的，当浏览器需要从服务器获取网页数据的时候，会发出一次Http请求。Http会通过TCP建立起一个到服务器的连接通道，当本次请求需要的数据完毕后，Http会立即将TCP连接断开，这个过程是很短的，所以Http连接是一种短连接，是一种无状态的连接
十九、nextTick()与setState()的第二个参数效果相似，都是经过回调拿到同步数据（初始是异步） 二十、node.js 1、node.js的特点是，单线程、异步 2、npm是包管理工具 3、node.js可以执行js程序 4、版本一般是三部分组成，第三部分是补丁，第二部分也是补丁，第一部分是版本迭代或者重大修改 二十一、事件循环 1、先同后异 2、先微后宏 3、promise宏setTimeout微 4、v8是微任务队列
