Vue

1. Vuex

1.1 关于`VueX`

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

状态管理模式。

把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！这就是“状态管理模式”。

应用场景有：单页应用中，组件之间的数据状态。应用实例： 1、购物车功能； 2、下单页面有选择优惠券按钮，点击进入优惠券页面，选择后返回到下单页，数据会绑定回来，显示已选择的优惠券； 3、登录状态等等

Vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

Vuex的State特性

1、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data

2、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

Vuex的Getter特性

1、getters 可以对State进行计算操作，它就是Store的计算属性

2、虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用

3、如果一个状态只在一个组件内使用，是可以不用getters

Vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

Vuex的Module特性

Module 可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

使用Vuex的好处？

1、多层嵌套的组件、兄弟组件间的状态会更好管理维护。 2、缓存一些当前要使用请求远程或本地的数据集（刷新后会自己销毁）。 3、有了第二条，就可以减少向服务器的请求，节省资源。如果你的用户足够多，那么每多出一个请求，对公司来说，都是一大笔钱。 4、对开发者来说，如果你的项目足够复杂，团队的规模也不仅是一个人，数据集中处理更利于程序的稳定和维护

2. 双向绑定的原理

MVC模式

以往的MVC模式是单向绑定，即Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新

MVVM模式

MVVM模式就是Model–View–ViewModel模式。它实现了View的变动，自动反映在 ViewModel，反之亦然。对于双向绑定的理解，就是用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。再说细点，就是在单向绑定的基础上给可输入元素input、textare等添加了change(input)事件,(change事件触发，View的状态就被更新了)来动态修改model。

双向绑定原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的

我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令（如v-model，v-on）对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

3. 组件间传递数据

1.父组件向子组件传递数据，使用props属性；子组件向父组件中传递数据，在子组件中使用$emit派发事件，父组件中使用v-on监听事件；缺点：组件嵌套层次多的话，传递数据比较麻烦。

2.祖先组件通过依赖注入(inject / provide)的方式，向其所有子孙后代传递数据；缺点：无法监听数据修改的来源，不支持响应式。

3.通过属性 $root /$ parent / $children /ref，访问根组件、父级组件、子组件中的数据；缺点：要求组件之间要有传递性。

4.通过事件总线(event bus)的方式，可以实现任意两个组件间进行数据传递；缺点：不支持响应式，这个概念是vue1.0版本中的，现在已经废弃。

5.通过 VueJs 的状态管理模式 Vuex，实现多个组件进行数据共享，推荐使用这种方式进行项目中各组件间的数据传递。

4. Vue项目优化

Vue 项目性能优化实践 - 知乎 (zhihu.com)

5. MVVM和MVC

MVC模式

以往的MVC模式是单向绑定，即Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新

MVVM模式

MVVM模式就是Model–View–ViewModel模式。它实现了View的变动，自动反映在 ViewModel，反之亦然。对于双向绑定的理解，就是用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。再说细点，就是在单向绑定的基础上给可输入元素input、textare等添加了change(input)事件,(change事件触发，View的状态就被更新了)来动态修改model。

在MVVM框架下视图和模型是不能直接通信的，只能通过ViewModel进行交互，它能够监听到数据的变化，然后通知视图进行自动更新，而当用户操作视图时，VM也能监听到视图的变化，然后通知数据做相应改动，这实际上就实现了数据的双向绑定。并且V和VM可以进行通信。

MVVM模式的优点:

低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。

独立开发: 开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面的设计。

mvc与mvvm的区别： MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。

MVC中Controller演变成MVVM中的ViewModel

-MVVM通过数据来显示视图层而不是节点操作

-MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低，加载速度变慢，影响用户体验等问题。

6. Computed和Watch

computed 和 watch 区分使用场景

computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch：更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

7. V-for 和 v-if同时使用的问题

v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

（1）v-for 遍历必须为 item 添加 key

在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。

（2）v-for 遍历避免同时使用 v-if

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性

8. 什么时候使用$.nextTick()

1.你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。

2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。当你设置 vm.someData = ‘new value’，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

9. 路由的原理

1. 何为前端路由？

路由（Router）这个概念最先是后端出现的，是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。

前端随着 ajax 的流行，数据请求可以在不刷新浏览器的情况下进行。异步交互体验中最盛行的就是 SPA —— 单页应用。单页应用不仅仅是在页面交互时无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。

2. 前端Router基本功能

一个基本的前端路由至少应该提供以下功能：

前端Router可以控制浏览器的 history，使的浏览器不会在 URL 发生改变时刷新整个页面。前端Router需要维护一个 URL 历史栈，通过这个栈可以返回之前页面，进入下一个页面。前端路由实现原理就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容。但是这样存在一个问题，就是 url 每次变化的时候，都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下，保证页面的不刷新。目前 Router有两种实现方式 History 和 hash。

History 和 Hash 对比

1.hash 使用 # 后面的内容模拟一个完整路径，不太美观。

2.hash 在请求时不会发送给服务器，用户手动刷新页面，后端接受到了也是同一个地址。

3.History 直接修改浏览器 URL，用户手动刷新页面，后端接受到是不同的地址，需要后端做处理跳转到统一的html页面

10. 常用的事件修饰符

①.stop:阻止冒泡 –对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果子级元素设置@click.stop的话就不会触发父级的click事件

②.prevent:阻止默认行为 –对于如<a href=“www.baidu.com” @click.prevent=“linkMethod”>百度自带事件的,添加prevent事件后,href跳转路径将不会触发

③.self:仅绑定元素自身触发,防止事件冒泡 –对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果父级元素设置@click.self的话就不会被子级元素的click事件影响

④.once: 事件只触发一次(常用表单提交)

⑤.passive: 滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用,浏览器内核线程在每个事件执行时查询prevent,造成卡顿,使用passive将会跳过内核线程查询,进而提升流畅度

⑥.capture: 对于冒泡事件,且存在多个冒泡事件时,存在该修饰符的会优先执行,如果有多个,则从外到内执行

⑦.native: 将vue组件转换为一个普通的HTML标签,如果该修饰符用在普通html标签上是不起任何作用的

浏览器原理相关

1. 常用HTTP请求

1、GET方法

GET方法用于使用给定的URI从给定服务器中检索信息，即从指定资源中请求数据。使用GET方法的请求应该只是检索数据，并且不应对数据产生其他影响。

在GET请求的URL中发送查询字符串（名称/值对），需要这样写：

/test/demo_form.php?name1=value1&name2=value2`

说明：

GET请求是可以缓存的，我们可以从浏览器历史记录中查找到GET请求，还可以把它收藏到书签中；且GET请求有长度限制，仅用于请求数据（不修改）。

注：因GET请求的不安全性，在处理敏感数据时，绝不可以使用GET请求。

2、POST方法

POST方法用于将数据发送到服务器以创建或更新资源，它要求服务器确认请求中包含的内容作为由URI区分的Web资源的另一个下属。

POST请求永远不会被缓存，且对数据长度没有限制；我们无法从浏览器历史记录中查找到POST请求。

3、HEAD方法

HEAD方法与GET方法相同，但没有响应体，仅传输状态行和标题部分。这对于恢复相应头部编写的元数据非常有用，而无需传输整个内容。

4、PUT方法

PUT方法用于将数据发送到服务器以创建或更新资源，它可以用上传的内容替换目标资源中的所有当前内容。

它会将包含的元素放在所提供的URI下，如果URI指示的是当前资源，则会被改变。如果URI未指示当前资源，则服务器可以使用该URI创建资源。

5、DELETE方法

DELETE方法用来删除指定的资源，它会删除URI给出的目标资源的所有当前内容。

6、CONNECT方法

CONNECT方法用来建立到给定URI标识的服务器的隧道；它通过简单的TCP / IP隧道更改请求连接，通常实使用解码的HTTP代理来进行SSL编码的通信（HTTPS）。

7、OPTIONS方法

OPTIONS方法用来描述了目标资源的通信选项，会返回服务器支持预定义URL的HTTP策略。

8、TRACE方法

TRACE方法用于沿着目标资源的路径执行消息环回测试；它回应收到的请求，以便客户可以看到中间服务器进行了哪些（假设任何）进度或增量。

2. Get和Post的区别

GET方法

GET是获取的意思，顾名思义就是获取信息。

GET是默认的HTTP请求方法。

GET方法把参数通过key/value形式存放在URL里面，如果参数是英文数字原样显示，如果是中文或者其他字符加密（Base64）URL长度一般有限制所以GET方法的参数长度不能太长。由于参数显示再地址栏所以不安全，一般需要保密的请求不使用GET。

POST方法

POST是邮件的意思，顾名思义就像一封信一样将参数放在信封里面传输。它用于修改服务器上的数据，一般这些数据是应该保密的，就像信件一样，信的内容只能收信的人看见。例入当用户输入账号和密码登录时账号和密码作为参数通过HTTP请求传输到服务器，这时候肯定不能用GET方法将账号密码直接显示再URL上，这时候就应该用POST方法保证数据的保密性。

POST和GET的区别

GET提交的数据放在URL中，POST则不会。这是最显而易见的差别。这点意味着GET更不安全（POST也不安全，因为HTTP是明文传输抓包就能获取数据内容，要想安全还得加密） GET回退浏览器无害，POST会再次提交请求（GET方法回退后浏览器再缓存中拿结果，POST每次都会创建新资源） GET提交的数据大小有限制（是因为浏览器对URL的长度有限制，GET本身没有限制），POST没有 GET可以被保存为书签，POST不可以。这一点也能感受到。 GET能被缓存，POST不能 GET只允许ASCII字符，POST没有限制 GET会保存再浏览器历史记录中，POST不会。这点也能感受到。

总之，两者之间没有本质区别，区别就在于数据存储的位置。各自有适用环境，根据需求选择合适的方法即可。

3. 跨域的解决办法

同源策略

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略来对脚本和请求进行校验，若不同源，则禁止使用。

同源的定义

那如果判断是否同源？主要根据三个维度，域名，协议，端口三个都相同才算同源。举个：

网站A网站B结果www.zhenai.comhttp://i.z.com不同源…

同源策略的作用

①无法用js读取非同源的Cookie、LocalStorage 和 IndexDB 这个主要是为了防止恶意网站通过js获取用户其他网站的cookie等用户信息。

②无法用js获取非同源的DOM 防止恶意网站通过iframe获取页面dom，从而窃取页面的信息。

③无法用js发送非同源的AJAX请求防止恶意的请求攻击服务器窃取数据信息。

那是不是说非同源的请求就无法实现呢？也不是，这就引出了我们本文主要阐述的解决跨域请求问题的方法。

jsonp

jsonp能实现跨域是利用了img、script和link标签自身的跨域能力。我们知道当img或者script中的src是一个链接的时候，浏览器会请求这个链接获取资源，那么这个链接如果是跨域的，浏览器也会请求，从而达到了跨域请求的一个功能。

用法

var script = document.createElement('script');
script.src = 'http://localhost:3000/api/test.do?a=1&b=2&callback=cb';
$('body').append(script);

function cb(res){
    // do something
    console.log(res)
}

可以看到，我们创建一个script标签，将src改成我们要请求的接口，并将script添加在body中，那么当浏览器解析到这个script时，会想src对应的服务器发送一个get请求，并将参数带过去。然后当浏览器接收到服务端返回的数据，就会触发参数中callbak对应的回调函数cb，从而完成整个get请求。

优点

简单粗暴

缺点

①只支持get请求 ②需要后台配合，将返回结果包装成callback(res)的形式

防范

那如果黑客植入script脚本通过jsonp的方式对服务器进行攻击，怎么办？可以通过页面设置的内容安全协议csp进行防范。

cors跨域

cors 是一个W3C标准,全称是"跨域资源共享"（Cross-origin resource sharing），它允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服了 AJAX 只能同源使用的限制 cors 需要浏览器和服务器同时支持，整个 CORS通信过程，都是浏览器自动完成不需要用户参与，对于开发者来说，cors的代码和正常的 ajax 没有什么差别，浏览器一旦发现跨域请求，就会添加一些附加的头信息但是，cors不支持ie10及以下版本。

简单请求和复杂请求

浏览器将cors请求分为简单请求和复杂请求。简单请求则直接发送请求到服务器，只请求一次。而复杂请求在正式请求前都会有预检请求，在浏览器中都能看到有OPTIONS请求，用于向服务器请求权限信息的，需要请求两次。

那如何区分是简单请求还是复杂请求呢？

简单请求

简单请求必须要同时满足下面三个条件：

请求方式只能是：GET、POST、HEAD HTTP请求头限制这几种字段：Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID Content-type只能取：application/x-www-form-urlencoded、multipart/form-data、text/plain content-type的类型类型描述application/json消息主体是序列化后的 JSON 字符串application/x-www-form-urlencoded数据被编码为键值对。这是标准的编码格式multipart/form-data需要在表单中进行文件上传时，就需要使用该格式。常见的媒体格式是上传文件之时使用的text/plain数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符

application/json：

作用：告诉服务器请求的主题内容是json格式的字符串，服务器端会对json字符串进行解析，好处：前端人员不需要关心数据结构的复杂度，只要是标准的json格式就能提交成功。

application/x-www-form-urlencoded：是Jquery的Ajax请求默认方式

作用：在请求发送过程中会对数据进行序列化处理，以键值对形式？key1=value1&key2=value2的方式发送到服务器。好处：所有浏览器都支持。复杂请求不满足简单请求的条件，那么就是复杂请求。复杂请求会在正式请求发送之前，先发一个预检请求进行校验，校验通过后才能进行正式请求。举个

浏览器现在要发送一个put的复杂请求，那么在put请求发送之前，浏览器先发送一个options请求。 options请求头信息：

OPTIONS /cors HTTP/1.1
Origin: localhost:3000
Access-Control-Request-Method: PUT // 表示使用的什么HTTP请求方法
Access-Control-Request-Headers: X-Custom-Header // 表示浏览器发送的自定义字段
Host: localhost:3000
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
User-Agent: Mozilla/5.0...

服务器收到options请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应
options响应头信息

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://localhost:3000 // 表示http://localhost:3000可以访问数据
Access-Control-Allow-Methods: GET, POST, PUT      
Access-Control-Allow-Headers: X-Custom-Header    
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

当options请求通过之后发出正式的HTTP请求，倘若options请求不通过，则服务器不允许此次访问,从而抛出错误

options请求通过之后的,浏览器发出发请求

PUT /cors HTTP/1.1
Origin: http://api.zhenai.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

options请求缓存那这样的话，如果页面存在大量的复杂请求，岂不是每个请求前面都要进行一次options的请求，那不会造成大量资源的浪费么？

如果基于cors请求的方法来解决跨域问题，那么复杂请求之前是需要进行一个options的请求的，但我们可以通过对options请求进行缓存来减轻请求的压力。

在options请求中，我们可以通过设置响应头的参数Access-Control-Max-Age来对结果进行缓存比如： Access-Control-Max-Age: 600 表示对options检验结果进行十分钟的缓存

1.url变化会导致缓存失效,需要重新验证options请求的返回值

2.预检不关心post data

3.header变化，如果是去掉了自定义的header使得请求变成简单请求，不会发送options请求。如果是增加其他的header，是会重新验证Access-Control-Allow-Headers的值。

4.cookie变化，只要后端允许发送cookie，cookie值变化不会导致缓存失效。 该字段的兼容性如下：

nginx

nginx解决跨域的问题跟之前的方法有所不同，它是通过服务器的方向代理，将前端访问域名跟后端服务域名映射到同源的地址下，从而实现前端服务和后端服务的同源，那自然不存在跨域的问题了。

举个：

前端服务：http://localhost:3000，

前端页面路由：http://localhost:3000/page.html，

后端服务：http://localhost:3001，

后端接口路由：http://localhost:3001/api/test.do

可以看出，两个服务处于跨域的状态

通过nginx的配置进行反向代理，即可实现前后端服务同源，如下：

server
{
    listen 80;
    server_name localhost;

    location = / {
        proxy_pass http://localhost:3000;
    }

   location /api {
        proxy_pass http://localhost:3001;

        #指定允许跨域的方法，*代表所有
        add_header Access-Control-Allow-Methods *;

        #预检命令的缓存，如果不缓存每次会发送两次请求
        add_header Access-Control-Max-Age 3600;
        #带cookie请求需要加上这个字段，并设置为true
        add_header Access-Control-Allow-Credentials true;

        #表示允许这个域跨域调用（客户端发送请求的域名和端口） 
        #$http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
        add_header Access-Control-Allow-Origin $http_origin;

        #表示请求头的字段 动态获取
        add_header Access-Control-Allow-Headers 
        $http_access_control_request_headers;

        #OPTIONS预检命令，预检命令通过时才发送请求
        #检查请求的类型是不是预检命令
        if ($request_method = OPTIONS){
            return 200;
        }
   }
}

其实nginx不仅仅只是用于解决跨域问题，而是涉及到很多服务器资源分配的处理，在此就不详细探讨了。

vue proxyTable

其实，在我们主流使用的MVVM框架中，配置项里面也提供解决跨域问题的能力，继续举个，以vue2.x为例，我们可以通过在config/index.js中添加配置项实现跨域请求：

proxyTable: {
    '/apis': {
        // 测试环境
        target: 'http://www.zhenai.com/',  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/apis': ''   //需要rewrite重写的,
        } 
    }             
}

原理

其实原理很简单，就是在我们使用npm run dev命中，启动了一个node服务，然后将前端发出的请求发送到node服务，再将该服务转发到原本的后台服务，在这过程中实现了一层代理，由一个node服务发送一个请求到另外一个后台服务，自然也没有了浏览器所限制的跨域问题。

4. URL输出到页面的全过程

1 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；

2 服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；

3 浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建立相应的内部数据结构（如 HTML 的 DOM）；

4 载⼊解析到的资源⽂件，渲染页面，完成。

客户端网址中输入url 将输入的url发送到DNS获得该域名对应的WEB服务器的ip地址客户端游览器与WEB服务器建立TCP连接客户端游览器向WEB服务器发送HTTP或HTTPS请求 WEB服务器响应请求，返回指定的URL数据或错误信息客户端拿到WEB服务器的数据后解析源文件，进行页面排版，显示基础页面分析页面中的超链接，渲染页面

详细简版：

1 从浏览器接收 url 到开启⽹络请求线程（这⼀部分可以展开浏览器的机制以及进程与线程之间的关系）

2 开启⽹络线程到发出⼀个完整的 HTTP 请求（这⼀部分涉及到dns查询， TCP/IP 请求，五层因特⽹协议栈等知识）

3 从服务器接收到请求到对应后台接收到请求（这⼀部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）

4 后台和前台的 HTTP 交互（这⼀部分包括 HTTP 头部、响应码、报⽂结构、 cookie 等知识，可以提下静态资源的 cookie 优化，以及编码解码，如 gzip 压缩等）

6 单独拎出来的缓存问题， HTTP 的缓存（这部分包括http缓存头部， ETag ， catchcontrol 等）浏览器接收到 HTTP 数据包后的解析流程（解析 html、词法分析然后解析成 dom 树、解析 css ⽣成 css 规则树、合并成 render 树，然后 layout 、 painting 渲染、复合图层的合成、 GPU 绘制、外链资源的处理、 loaded 和 DOMContentLoaded 等）

7 CSS 的可视化格式模型（元素的渲染规则，如包含块，控制框， BFC ， IFC 等概念） JS 引擎解析过程（ JS 的解释阶段，预处理阶段，执⾏阶段⽣成执⾏上下⽂， VO ，作⽤域链、回收机制等等）

8 其它（可以拓展不同的知识模块，如跨域，web安全， hybrid 模式等等内容）

5. 常用的请求状态码

500 内部服务器错误

Internal Server Error 500内部服务器错误，服务器遇到未知无法解决的问题。

一般情况下，出现500响应状态的原因有很多种，但是主要的是“程序代码和服务器配置”两个问题。相对于代码而言，就是对站点进行升级，网页改版，新增加了一些常用的插件。就比如WordPress插件的版本可能就需要更高版本的PHP才能兼容。

而相对服务器而言的话，更多的是在系统版本升级导致，就比如最开始使用的是Windows Server 2003，后期想要升级2008、2012等版本的时候配置稍有不慎就会导致Internal Server Error 500。

404 请求错误

Not Found 404 错误请求，因发送的请求语法错误,服务器无法正常读取。

相信绝大多数的人都见过404的状态码，当用户试图请求Web服务器上一个不存在的资源时，就会触发Not Found404。出现404状态码可能是链接失效导致，也有可能是URL拼写错误，还有可能是因为Web服务器将所请求的资源移到了其他的地方。一般的网站都会设置自定义页面以防链接失效所产生不良的影响。

403 禁止访问

Forbidden 403 禁止访问，客户端没有权利访问所请求内容,服务器拒绝本次请求。

状态码403通常代表客户端错误，是指的服务器端有能力处理该请求，但是拒绝授权访问。这个状态码类似于401，但是进入该状态后不能再继续进行验证，该访问是长期禁止的，并且与应用逻辑密切相关，比如密码不正确等。

400 错误请求

Bad Request 400 错误请求，因发送的请求语法错误,服务器无法正常读取。

状态码400表示该语法无效，服务器无法理解该请求。客服端不应该在未经修改的情况下重复此请求。一般会因为前端提交数据的字段名称，或者是字段类型和后台的实体类不一致，导致无法封装。

401 未经授权

Unauthorized 401 未经授权，需要身份验证后才能获取所请求的内容,类似于403错误.不同点是.401错误后,只要正确输入帐号密码,验证即可通过。

状态码401就是Web服务器认为，客户端发送的HTTP数据流浪是正确的，但是进入URL资源的时候需要身份验证，而客户端尚未提供相关的验证信息，或者是已提供但是没有通过验证。这也是通常所知的“HTTP基本验证”。

200 请求成功

200 OK 请求成功，表示已经请求成功，默认情况下的状态码为200的响应就可以被缓存了。

不同请求方式对于请求成功的意义如下：

GET: 已经取得资源，并将资源添加到响应的消息体中。
HEAD: 响应的消息体为头部信息。
POST: 响应的消息体中包含此次请求的结果。
TRACE: 响应的消息体中包含服务器接收到的请求信息。

PUT 和 DELETE 的请求成功通常并不是响应200OK的状态码而是 204No Content 表示无内容(或者 201Created表示一个资源首次被创建成功)。

206 部分内容

Partial Content 206 部分内容，当客户端通过使用range头字段进行文件分段下载时使用该状态码。

状态码206表示服务器已经成功处理了部分GET请求。类似于FlashGet或者迅雷这类的HTTP 下载工具都是使用此类响应实现断点续传或者将一个大文档分解为多个下载段同时下载。

301 永久重定向

Moved Permanently 301 永久移动，该状态码表示所请求的URI资源路径已经改变,新的URL会在响应的Location:头字段里找到。

尽管标准要求浏览器在收到该响应并进行重定向时不应该修改http method和body，但是有一些浏览器可能会有问题。所以最好是在应对GET 或 HEAD 方法时使用301，其他情况使用308 来替代301。

302 临时重定向

Found 302临时移动，该状态码表示所请求的URI资源路径临时改变,并且还可能继续改变.因此客户端在以后访问时还得继续使用该URI.新的URL会在响应的Location:头字段里找到。

即使规范要求浏览器在重定向时保证请求方法和请求主体不变，但并不是所有的用户代理都会遵循这一点，你依然可以看到有缺陷的软件的存在。所以推荐仅在响应 GET 或 HEAD 方法时采用 302 状态码，而在其他时候使用 307 Temporary Redirect 来替代，因为在这些场景下方法变换是明确禁止的。

502 无效网关

Bad Gateway 502 网关错误，服务器作为网关且从上游服务器获取到了一个无效的HTTP响应。

前端面试八股文（超详细 之 VUE 框架）

Vue

1. Vuex

1.1 关于VueX

Vuex有哪几种属性？

Vuex的State特性

Vuex的Getter特性

Vuex的Mutation特性

Vuex的Module特性

使用Vuex的好处？

2. 双向绑定的原理

MVC模式

MVVM模式

双向绑定原理

3. 组件间传递数据

4. Vue项目优化

5. MVVM和MVC

MVC模式

MVVM模式

MVVM模式的优点:

6. Computed和Watch

computed 和 watch 区分使用场景

运用场景：

7. V-for 和 v-if同时使用的问题

v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

（1）v-for 遍历必须为 item 添加 key

（2）v-for 遍历避免同时使用 v-if

8. 什么时候使用$.nextTick()

9. 路由的原理

1. 何为前端路由？

2. 前端Router基本功能

History 和 Hash 对比

10. 常用的事件修饰符

浏览器原理相关

1. 常用HTTP请求

2. Get和Post的区别

3. 跨域的解决办法

vue proxyTable

原理

4. URL输出到页面的全过程

5. 常用的请求状态码

500 内部服务器错误

404 请求错误

403 禁止访问

400 错误请求

401 未经授权

200 请求成功

206 部分内容

301 永久重定向

302 临时重定向

502 无效网关

前端面试八股文（超详细之 VUE 框架）

1.1 关于`VueX`