浏览器相关

有哪几种浏览器，它们的内核是

浏览器有ie /safari/ chrome /mozilla firefox /opera

对应的内核有：ie----trident safari/chrome---webkit mozilla firefox---gecko opera---presto

说下对浏览器内核的理解

浏览器内核主要包括以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。

排版渲染引擎：主要负责取得网页的内容(HTML、XML、图像等)、整理信息，以及计算网页的显示方式，然后输出至显示器

JavaScript引擎：是用来渲染JavaScript的，JavaScript的渲染速度越快，动态网页的展示也越快

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

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

2.浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手

a.客户端向服务器发送一个建立连接的请求

b.服务器接到请求后发送同意连接的信号

c.客户端接到同意连接的信号后，再次向服务器发送了确认信号，然后客户端与服务器的连接建立成功

3.浏览器发送HTTP请求

浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；

4.服务器处理请求并返回HTTP报文（HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。）：

a…服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；

b.服务器将得到的 HTML 文件发送给浏览器；

c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；

d在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。

5.断开连接

浏览器缓存有哪些

sessionStorage/localStorage/cookie

数据存放有效期

sessionStorage:仅在当前浏览器窗口关闭之前有效，浏览器关闭就没了

localStorage:始终有效，窗口或者浏览器关闭也保存，所以叫持久化存储

cookie只在设置的cookie过期时间之前有效，即使窗口或浏览器关闭也有效

过期时间设置

sessionStorage/localStorage不可以设置过期时间

cookie有过期时间，可以设置过期时间（把时间调整到之前的时间，就过期了）

存储大小

cookie存储量最大不能超过4k

sessionStorage/localStorage不能超过5M(localstorage大小有点争议，另外一个地方我看到的说说是10mb,不知道谁为准)

注意：不同的浏览器存储的大小是不同的，会有影响

http状态码有哪些，有哪些

1xx代表临时响应并需要请求者继续执行操作的状态码

100，服务器已收到请求的第一部分，正在等待其余部分

2xx表示成功处理了请求的状态码

200，成功处理了请求

202，服务器已接受请求，但尚未处理

3xx重定向，要完成请求，需要进一步操作

304，自上次请求后，请求的网页未修改过

4xx 请求出错，妨碍了服务器的处理

400 服务器不理解请求的语法

401 未授权，需要进行身份验证

404 找不到请求的网页

5xx服务器错误，服务器在处理请求时发生内部错误

500 服务器内部错误

http与https的区别

HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

前端三要素是

html 结构，超文本标记语言，决定网页的结构和内容

css表现，层叠样式表，设定网页的表现样式

js,行为，弱类型的脚本语言，源码不需要经过编译，由浏览器解释运行，用于控制网页的行为。

强缓存、协商缓存、cdn缓存

http2

三次握手与四次握手

跨域（jsonp/cors）

跨域时如何处理cookie

垃圾回收机制

网络安全

https

什么是xss以及如何防止它

什么是csrf以及如何预防它

为什么会引起csrf攻击

事件循环-----涉及宏任务、微任务、ui渲染等的执行顺序

Vue部分

Vue中的v-if和v-for为什么不能一起用

v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true值的时候被渲染

v-for 指令基于一个数组来渲染一个列表, 在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

v-if与v-for都是vue模板系统中的指令，在vue模板编译的时候，会将指令系统转化成可执行的render函数

v-for优先级比v-if高, v-if 将分别重复运行于每个 v-for 循环中

所以，不推荐v-if和v-for同时使用

Vue的三种常用传值方式

父组件向子组件传值，在子组件中通过props传递过去的数据

子组件向父组件传值，在子组件中定义数据，使用$emit来进行自定义事件的触发及事件的发送

非父子组件传值，公共的vuex来进行传递值和获取值，或者用localsstorage来传值和取值

通过vuex来进行传递或者获取值，在state中定义变量，对变量值进行修改通过mutations，比如点击按钮进行加减，对变量值进行变异使用getters,比如变量初始值为100，修改后为10000，有异步使用action

兄弟组件之间

兄弟组件指的是平级之间的组件，他们中得传值方式比较多

1.第一种是属于一种比较麻烦的方法，可以将值先传给父组件，再通过父组件传值给子组件得传值方式传值给另一个子组件

2.可以使用Bus事件总线，创建一个中转站来进行传值。

组件之间如何通信

父子组件之间如何通信

组件间传递数据

父组件向子组件传递数据，使用props属性；子组件向父组件中传递数据，在子组件中使用$emit派发事件，父组件中使用v-on
监听事件；缺点：组件嵌套层次多的话，传递数据比较麻烦。
祖先组件通过依赖注入(inject / provide)的方式，向其所有子孙后代传递数据；缺点：无法监听数据修改的来源，不支持响应式。
通过属性$root / $parent / $children /
ref，访问根组件、父级组件、子组件中的数据；缺点：要求组件之间要有传递性。
通过事件总线(event bus)的方式，可以实现任意两个组件间进行数据传递；缺点：不支持响应式，这个概念是vue1.0版本中的，现在已经废弃。
通过 VueJs 的状态管理模式 Vuex，实现多个组件进行数据共享，推荐使用这种方式进行项目中各组件间的数据传递。

vue中的父组件及子组件生命周期的执行顺序

什么是MVVM

MVVM 是Model-View-ModelView的缩写，是一种脱胎于 MVC 模式的设计模式。

2.Model 代表数据层，负责存放业务相关的数据；

3.View 代表视图层，负责在页面上展示数据；

4.ViewModel 是的作用是同步 View 和 Model 之间的关联，其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化，并会选择性的传给 Model；Data Bindings 工具用于监听 Model 数据变化，并将其更新给 View。

MVC：MVC是Model-View- Controller的简写，即模型-视图-控制器，M和V和MVVM中的M和V是一样的。C是Controller即页面义务逻辑。区别。MVC是单向的数据传递。MVVM是双向的数据绑定，解决了MVC中大量的DOM操作使页面的渲染性能降低，加载速度变慢，影响用户体验。

为什么使用MVVM

低耦合-----视图view可以独立于model数据的变化和修改

可复用----你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑

独立开发------开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计

可测试-----现在可以针对ViewModel来写测试

什么是Vue

Vue是一套用于构建用户界面的渐进式JavaScript框架

与传统JS和JQuery框架不同，Vue的渐进式框架，开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。
Vue渐进式框架的核心概念：组件化，MVVM，响应式，和生命周期

Vue的优缺点

优点：轻量级、易上手、高性能、便于测试，移动优先（更适合移动端，比如移动端的Touch事件）
缺点：生态环境不够完善

vue组件中data为什么是一个函数

javascript的特性导致，在component中，data必须以函数的形式存在，不可以是对象
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data,相当于每个组件实例都要自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。

写成对象形式，就是所有的组件实例共用了一个data,这样一个修改等于全部都改了

案列对比：图1图二对比

<template><!-- 组件页 HelloWorld页面 --><div class="hello"><button @click="count++">+</button><h2>count:{{count}}</h2><button @click="count--">-</button></div>
</template><script>
export default {name: 'HelloWorld',
//data为一个函数时，组件里的count各自独立data(){return{count:0}}
}
</script><style scoped></style>

<template><div id="app"><hello-world></hello-world><br/><br/><hello-world></hello-world></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';
export default {name: "App",components:{HelloWorld},data() {return {};},
}
</script><style></style>

<template><!-- 组件页 HelloWorld页面 --><div class="hello"><button @click="count++">+</button><h2>count:{{count}}</h2><button @click="count--">-</button></div>
</template><script>
// data为一个对象时
const data = {count:0}
export default {name: 'HelloWorld',data(){return data;}
}
</script><style scoped></style>

<template><div id="app"><hello-world></hello-world><br/><br/><hello-world></hello-world></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';
export default {name: "App",components:{HelloWorld},data() {return {};},
}
</script><style></style>

Vue 中 methods,computed, watch 的区别

computed：
有缓存性，依赖于属性值，属性变化才会重新计算

methods：
没有缓存性，只要调用就会执行

watch：
没有缓存性，监听属性，当属性发生改变就会被调用

vue路由传参到底有几种方式

有两种:
query和params

query和params的区别：

params传参只能由name引入路由，如果写成path页面会显示undefined报错。
query传参的话可以使用path也可以使用name引入路由，不过建议使用path引入路由。

Vue-router 路由有哪些模式？

一般有两种模式：

hash 模式：监听hashchange事件实现前端路由，利用url中的hash来模拟一个hash，以保证url改变时，页面不会重新加载。

history 模式：利用pushstate和replacestate来将url替换但不刷新，但是有一个致命点就是，一旦刷新的话，就会可能404，因为没有当前的真正路径，要想解决这一问题需要后端配合，将不存在的路径重定向到入口文件。

GET和POST的区别

1、url可见性：

get，参数url可见； post，url参数不可见

2、数据传输上：

get，通过拼接url进行传递参数； post，通过body体传输参数

3、缓存性：

get请求是可以缓存的 post请求不可以缓存

==4、传输数据的大小: ==

get一般传输数据大小不超过2k-4k（根据浏览器不同，限制不一样，但相差不大）

post请求传输数据的大小根据php.ini 配置文件设定，也可以无限大。

keep-alive 的作用

1、在 vue 项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到 vue 的 keep-alive 技术了.

2、在 router-view 上使用可以缓存该路由组件

3、有两个参数 include - 字符串或正则表达，只有匹配的组件会被缓存 exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

promise 是什么？有哪些状态和参数？如何使用？

1、主要用于异步计算

2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果

3、可以在对象之间传递和操作 promise，帮助我们处理队列

promise 有三个状态：

1、pending[待定]初始状态

2、fulfilled[实现]操作成功

3、rejected[被否决]操作失败

resolve与reject两种参数

resolve 作用是，将 Promise 对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject 作用是，将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去

当 promise 状态发生改变，就会触发 then()里的响应函数处理后续步骤；

Promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled 从 pending 变为 rejected。

这两种情况只要发生，状态就凝固了，不会再变了。

常见的修饰符

Vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，常用的事件修饰符有以下几个：

1：stop：阻止冒泡（通俗的讲就是阻止事件向上级DOM元素传递）

2：prevent：阻止默认事件

3：capture：捕获冒泡，即有冒泡发生时，有此修饰的DOM元素会先执行，如果有多个就从外向内依次执行，然后再按照自然顺序依次执行。

4：self：将事件绑定到自身，只有自身触发时才能触发，通常用于避免冒泡事件的影响。(官网) 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

5：once：设置事件只能触发一次

6：passive尤其能够提升移动端的性能，滚动事件的默认事件，即滚动行为，滚就会触发。

7按键修饰符：keydown和keyup 键盘事件。（keycode）

vue 自定义指令如何使用

【全局指令】使用 Vue.diretive()来全局注册指令。

【局部指令】也可以注册局部指令，组件或 Vue 构造函数中接受一个 directives 的选项。

【bind】只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

【update】所在组件的VNode更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。

【unbind】只调用一次，指令与元素解绑时调用。

生命周期有几个，他们的作用是什么

new Vue() ---创建了一个Vue的实例对象

init--表示，刚初始化一个Vue空的实例对象，这个时候，这个对象身上，只有默认的一些生命周期函数和事件，其他东西都来创建

befotrecreate:生命周期函数执行的时候，data和methods中的数据都还没有初始化

created: data和methods已经被初始化好了，如果要调用methods中的方法或者操作data中的数据，最早，只能在created中操作。

beforeMount:此函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时，页面还是旧的

Mounted：内存中编译好的模板，已经挂载到页面上了，用户可以看见了

beforeUpdate:当执行beforeupdate时，页面中的显示数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步

updated:执行时，页面和data数据已经保持同步，都是最新的

beforeDestory:执行时，组件身上所有的data和所有methods以及过滤器指令等，都处于可用状态，还没有真正执行销毁过程

Destoryed:执行时，组件已经完全销毁了，组件中的所有的数据方法指令等都不可以用了

Vue 中 v-if 和 v-show 有什么区别？

v-if 在进行切换时，会直接对标签进行创建或销毁，不显示的标签不会加载在 DOM 树中。

v-show 在进行切换时，会对标签的 display 属性进行切换，通过 display 不显示来隐藏元素。

一般来说，v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。

v-for 中 key 的作用是什么？

key 是 Vue 使用 v-for 渲染列表时的节点标识。使用了 key 之后，当列表项发生变化时，Vue 会基于 key 的变化而重新排列元素顺序，并且移除 key 不存在的元素，提升运行效率。

为什么要设置key值，特别是循环操作的时候

因为Vue是采用虚拟Dom，diff算法。需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

key的作用主要是为了高效的更新虚拟DOM。

vue在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

注意：·1：v-for循环的时候，key属性只能使用number或string 2：key使用的时候，必须使用v-bind绑定属性的形式，指定key的值

vue核心是

数据驱动，组件化

Vuex是什么？它的五大核心是

vuex是一个专为vue.js应用程序开发的状态管理模式，它作用是将应用中的所有状态都放在一起，集中式来管理

1.state：用来存储变量，通过$store.state.变量名访问
2.mutations: 相当于我们vue里面方法,用来改变state存储的变量值，通过this.$store. commit来获取值
3.getters: 相当于组件中的计算属性，改变mutations变异的值
4.actions: 需要异步处理的时候可以使用actions,它跟mutations的区别是dispatch
5.modules: 这个是对处理过后的状态进行分类。

Vue的双向数据绑定原理是什么?

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

三个参数 to 、from 、next 分别的作用：

1.to: Route，代表要进入的目标，它是一个路由对象

2.from: Route，代表当前正要离开的路由，同样也是一个路由对象

3.next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

路由守卫有几种，是哪些

1.全局路由守卫：

定义：所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查

全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫

前置守卫：router.beforeEach((to, from, next) => {}

后置守卫：router.afterEach((to, from, next) => {}

2.组件路由守卫：

定义：跟 methods: {}等同级别书写，组件路由守卫是写在每个单独的 vue 文件里面的路由守卫

beforeRouteEnter (to, from, next){}

beforeRouteUpdate((to, from, next){}

beforeRouteLeave((to, from, next){}

3.独享路由守卫：

定义：路由独享守卫是在路由配置页面单独给路由配置的一个守卫

beforeEnter(to, from, next) =>{}

在Vue文件中template模板部分使用template标签的作用是什么

使用template时，会忽略template标签直接输出template中的内容。template不会渲染成元素，用div的话会被渲染成元素。把if,show,for等语句抽取出来放在template上面，把绑定的事件放在temlpate里面的元素上，可以使html结构更加清晰，还可以改善一个标签过长的情况。

介绍一下SPA，优势以及不足，如何解决

SPA的全称是单页面应用。一个SPA就是一个web应用，他所需的资源有HTML JS CSS等，一次请求就加载完成，不需要刷新的动态加载。术语“单页”就是在页面初始化加载以后就永远不会刷新重新加载。 2：优势：减轻服务器端的压力，提高页面的渲染效果，减少请求数量。 3：不足之处：首屏加载时间会很长。 SEO不友好。

nextTick的作用是什么

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

应用

想要在Vue生命周期函数中的created()操作DOM可以使用Vue.nextTick()回调函数

在数据改变后要执行的操作，而这个操作需要等数据改变后而改变DOM结构的时候才进行操作，需要用到nextTick

单向数据流与双向数据绑定的区别是怎么样的

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

数据的双向绑定由MVVM框架实现，由View、ViewModel和Model组成，view和model不能直接进行通信，他们通过中间件ViewModel来进行通信。当Model部分数据改变时，Data Bindings监听数据变化，会通知view更新视图； DOMListeners 监听视图，当view变化也会同步到Model中,View和Model之间的同步是自动的.

Vue中如何实现全局变量的定义

1：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。使用方式1：在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。使用方式2：在程序入口的main.js文件里面，将上面那个Global.vue文件挂载到Vue.prototype。

Vue优化方式

v-if 和v-show

使用Object.freeze()方式冻结data中的属性，从而阻止数据劫持

组件销毁的时候会断开所有与实例联系，但是除了addEventListener，所以当一个组件销毁的时候需要手动去removeEventListener

图片懒加载

路由懒加载

为减少重新渲染和创建dom节点的时间，采用虚拟dom

diff算法

diff算法是指对新旧虚拟节点进行对比，并返回一个patch对象，用来存储两个节点不同的地方，最后利用patch记录的消息局部更新DOM

虚拟DOM的优缺点

缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢

优点：减少了dom操作，减少了回流与重绘

保证性能的下限，虽说性能不是最佳，但是它具备局部更新的能力，所以大部分时候还是比正常的DOM性能高很多的

为什么选Vue进行项目开发

Vue是一个以数据驱动为核心的渐进式MVVM模式框架。采用了虚拟DOM,diff算法，在页面的渲染上性能要好一些。同时他还是一个高性能，轻巧，可组件化的库，并且拥有非常易用上手的API库。

深拷贝和浅拷贝的区别

浅拷贝扩展运算符... 赋值符号= object.assign

深拷贝 json.parse(json.stringify())、递归拷贝、var newobje=object.create(oldobj)

浅拷贝是拷贝对象指针，之间会相互影响，深拷贝是重新分配内存，不会影响

怎么把网址里的参数传出来呢？

querystring.parse

怎样实现继承

class的extends、Object.setPrototypeOf(子对象，父对象)、prototype

//父类型定义子类型都有的属性方法
   class Enemy{
       constructor(x,y) {
       this.x=x;
           this.y=y;
       }
       fly(){
           console.log(`飞到x=${this.x},y=${this.y}位置`);
       }
   }

   //子类型plane 继承extends父类型Enemy
   class plane extends Enemy{
       constructor(x,y,score) {
       //子类型请求super父类型
           super(x,y);
           this.score=score;
       }
       getScore(){
           console.log(`击落敌机，得${this.score}分`);
       }
   }

   var Kevin=new plane(50,100,5);
   console.log(Kevin);
   Kevin.fly();
   Kevin.getScore();

//正常的
       function Student(name,age){
           this.name=name;
           this.age=age;
       }
   var Kevin=new Student("Kevin",18);
       var Alan=new Student("Alan",20);
       console.log(Kevin);
       console.log(Alan);

       //继承的对象
       var father={
           money:10000,
           car:"大众"
       }
       //给子对象Kevin添加father
       Object.setPrototypeOf(Kevin,father)
       console.log(Kevin);

axios怎样封装

安装axios模块，然后建立request.js文件，引入axios文件，建立request函数请求，通过axios.create存放网址，再建立请求拦截 instance.interceptors.request.use 响应拦截instance.interceptors.reponse.use()

之后再建立对应模块的文件，引入request文件，存放路由地址

import axios from 'axios'export function request(config){//创建axios的实例const instance=axios.create({baseURL:'http://152.136.185.210:7878/api/hy66/',timeout:5000})//2.axios的拦截器
//2.1请求拦截的作用
instance.interceptors.request.use(config=>{//console.log(config);//1.比如config中的一些信息不符合服务器的要求//2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标//3.某些网络请求（比如登录（token））,必须携带一些特殊的信息return config
}, err => {console.log(err);
})//2.2响应拦截
instance.interceptors.response.use(res=>{//console.log(res);return res.data
},err=>{console.log(err);
})//3.发送真正的网络请求
return instance(config)
}

import {request} from "./request";export function getHomeMultidata(){return request({url:'/home/multidata'})
}

说下axios

axios是一个可以用在浏览器端和node js的异步通信框架，主要作用就是实现ajax异步通信。

功能特点:从浏览器中创建XMLHttpRequests

从node.js创建http请求

支持PromiseAPi ---js中链式编程

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换json数据

客户端支持防御XSRF

简单说下webpack

webpack是一个js程序的静态模块打包器，当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.

webpack.config.js配置文件如何写

module.exports = {entry:"",//入口文件，指定web pack用哪个文件作为项目的入口output:{  //output 输出，指定webpack把处理完成的文件放置到指定路径path:"", filename:""},module:{ //module模块，用于处理各种类型的文件loaders:[{test:/\.js$/,;loade:""}]},plugins:{},//插件，如热更新，代码重用等resolve:{},//设置路径指向watch:true//监听，用于设置文件改动后直接打包
}

watch与computed的区别

vue生命周期及对应的行为

vue父子组件生命周期执行顺序

组件间通讯方法

如何实现一个指令

vue.nextTick实现原理

diff算法

如何做到的双向绑定

虚拟dom为什么快

如何设计一个组件

webpack部分

用过哪些loader和plugin

loader的执行顺序为什么是后写的先执行

webpack配置优化

webpack打包优化（happypack/dll）

plugin与loader的区别

webpack执行的过程

如何编写一个loader/plugin

tree-shaking作用，如何才能生效

首屏加载如何优化

一个网页从请求到呈现花了很长时间，如何排查

css部分

什么是箱型

箱型阴影 box-shadow

具体的答案没有，就是指怎样用这个属性看起来的效果更好，光影和日照关系的更好。

怎样把元素垂直居中心

这个问题我打算分开答水平居中和垂直居中，到时候试验答复。

如何三栏式布局

我之前做过，之后把答案整理过来

选择器权重计算方法

!important优先级最高

内联优先级又比较高，在html元素中直接添加样式---1000

id选择器---100

类class和伪类选择器--10

元素/标签选择器----1

通配选择器*

继承的样式

种类规则：

只要有！important，优先级就最高

优先级相同，就使用靠近的样式，就近原则

比较优先级时，需要将每个选择器的所有结果相加后进行比较

选择器的累加不会超过最大的数量级，比如类选择器再高也不会超过id选择器

--------------------奇怪，明明我记得我在html/css基础知识写了的，但就是找不到这块内容，为什么啊啊啊啊啊！！！！！！

如何清除浮动

clear:both

还有一个是通过：：after/::befter写的，之后补

说下flex

flex是css方式布局的一种，它有主轴和交叉轴，通过dispaly:flex设定flex布局，flex-direction属性来决定主轴方向是水平方向还是垂直方向，justify-content主轴对齐方式，align-items交叉轴对齐方式，flex-wrap决定是否换行，flex:是flex-grow（项目放大，有剩余空间） flex-shrink（项目缩小，空间不够） flex-basis （元素的宽就是它的值）的缩写

什么是bfc,可以解决什么问题

bfc块级格式化上下文，它是一个独立的渲染区域，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素。

多用于清除浮动，解决高度塌陷，父子margin重叠等问题

//清除浮动
.clearfix:after{content:"";    /*内容为空*/height:0;  /*高度为0*/line-height:0;  /*行高为0*/display:block;  /*块级元素*/visibility:hidden;  /*隐藏*/clear:both;   /*清除浮动*/
}
.clearfix{zoom:1;   /*兼容IE678*/
}

位置属性

就是问的是position，position五个值，然后是relative和ansoluted的关系

如何实现自适应平方

我搜了一下，出来的是css实现自适应的正方形，都说高不固定，不能用height值，需要用width值实现正方形的height赋值。

可以用vw单位，具体的之后再说。

如何用css实现三角形

宽高设为0，border-三边为transparent，有一边有颜色值。

border边值设为1就是一个点，为何用border就可以，我首先想的就是padding/margin

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width:0;height:0;border-top: 40px solid transparent;border-bottom: 40px solid transparent;border-right: 40px solid black;}</style></head><body><div></div></body>
</html>

什么是css预处理器

css预处理器定义了一种新的语言，用一种专门的编程语言，为css增加一些编程的特性，再通过编译器转换为正常的css文件，以供项目使用。

常见的css预处理器有：sass less

js部分

js构建工具有哪些

babel:JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript

webpack:模块打包器，主要作用就是打包、压缩、合并及按序加载

手写防抖和节流

手写深拷贝

手写数组去重、数组乱序

说下继承

手写call/apply/bind

sleep函数

实现promise、实现promise.all、实现promise.retry

将一个同步callback包装成promise形式

写一个函数，可以控制最大并发数

jsonp的实现

eventEmitter（emit，on,off,once）

实现instanceof

实现new

实现数组flat/filter等方法

lazyMan

函数currying

箭头函数与普通函数的区别

变量的解构赋值

promise.async await 和generator的区别

es6和es5继承有何不同

js模块化（common/amd/cmd/es6）

说下this,如何改变this指向，call/apply/bind的区别

this一般有5种情况全局和独立调用中指向window

箭头函数的this看父级情况

构造函数是指向new的实例

use strice 模式下，指向undefined

其他的就是谁调用指向谁。比如对象.对象里的函数指向对象

前端面试题第二次整理（第二次找工作）相关推荐

前端面试题及答案整理（2022最新版）
收集整理2022年最新前端面试题及答案,方便平时翻看记忆,欢迎各位大佬们补充. 一般来说,把下面基础中的高频题写熟练就差不多了.当然去面大厂这些远远不够,还要再刷一些算法题. 基础高频 1.手写 i ...
2023前端面试题及答案整理（JavaScript）
JS类型 string,number,boolean,undefined,null,symbol(es6),BigInt(es10),object 值类型和引用类型的区别两种类型的区别是:存储位置不 ...
2023前端面试题及答案整理（Vue）
watch 和 computed 区别 watch 是监听动作,computed 是计算属性 watch 没缓存,只要数据变化就执行.computed 有缓存,只在属性变化的时候才去计算. watch ...
前端面试题汇总（整理） -- 看起来比较全
[转载]CSDN - 张林blog http://blog.csdn.net/XIAOZHUXMEN/article/category/6206651 这个博客几篇总结也不错. 修改增加了一些问题,并 ...
来自大厂 10+ 前端面试题附答案(整理版)
跨域方案很多种方法,但万变不离其宗,都是为了搞定同源策略.重用的有 jsonp.iframe.cors.img.HTML5 postMessage等等.其中用到 html 标签进行跨域的原理就是 h ...
前端面试题及答案整理（一）
各公司秋招很快就开始了,最近在准备面试的东西,干脆将发现的各类面试题整理一下共享出来,大部分面试题是没有标准答案的,我给出的答案也是仅供参考,如果有更好的解答欢迎在评论区留言. Part1 手写代码 ...
前端面试题——综合问题(整理)
个人收录,你不知道的,总会在这里找到答案,自己的强大才是真的强大,希望我写的也可以帮到你. 1.页面从输入URL到页面加载显示完成,这个过程中都发生了什么? 1.输入域名地址 2.发送至DNS服务器并 ...
2023前端面试题及答案整理（JS面试题）
ES6 let / const 全局作用域中,用 const 和 let 声明的变量不在 window 上,那到底在哪里?如何去获取? ES6规定,var 命令和 function 命令声明的全局变量 ...
前端面试题（重点整理）：谈谈你对web标准和W3c的认识、什么是ECMA、什么是html、浏览器和开发工具介绍
目录一.对web标准和W3C的认识 1.1 web标准 1.2 W3C的认识二.什么是ECMA 三.什么是html 四.浏览器和开发工具介绍 4.1 浏览器介绍 4.2 开发工具介绍一.对web ...
2022年最新互联网大厂前端面试题及答案-前端工程必备技能(持续整理更新中【关注收藏不迷路】）
对于做前端的朋友,或者做了前端几年了,基础不好的,或者想进大厂的想了解深入,下面的知识点很多前端朋友都没有深入了解.很重要,看完有种茅塞顿开感觉,**关注+收藏哦,总有一天用的得.** 涉及到知识点: ...

前端面试题第二次整理（第二次找工作）

浏览器相关

有哪几种浏览器，它们的内核是

说下对浏览器内核的理解

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

浏览器缓存有哪些

http状态码有哪些，有哪些

http与https的区别

前端三要素是

强缓存、协商缓存、cdn缓存

http2

三次握手与四次握手

跨域（jsonp/cors）

跨域时如何处理cookie

垃圾回收机制

网络安全

https

什么是xss以及如何防止它

什么是csrf以及如何预防它

为什么会引起csrf攻击

事件循环-----涉及宏任务、微任务、ui渲染等的执行顺序

Vue部分

Vue中的v-if和v-for为什么不能一起用

Vue的三种常用传值方式

组件之间如何通信

父子组件之间如何通信

组件间传递数据

vue中的父组件及子组件生命周期的执行顺序

什么是MVVM

为什么使用MVVM

什么是Vue

Vue的优缺点

vue组件中data为什么是一个函数

Vue 中 methods,computed, watch 的区别

vue路由传参到底有几种方式

Vue-router 路由有哪些模式？

GET和POST的区别

keep-alive 的作用

promise 是什么？有哪些状态和参数？如何使用？

常见的修饰符

vue 自定义指令如何使用

生命周期有几个，他们的作用是什么

Vue 中 v-if 和 v-show 有什么区别？

v-for 中 key 的作用是什么？

为什么要设置key值，特别是循环操作的时候

vue核心是

Vuex是什么？它的五大核心是

Vue的双向数据绑定原理是什么?

三个参数 to 、from 、next 分别的作用：

路由守卫有几种，是哪些

在Vue文件中template模板部分 使用template标签的作用是什么

介绍一下SPA，优势以及不足，如何解决

nextTick的作用是什么

单向数据流与双向数据绑定的区别是怎么样的

Vue中如何实现全局变量的定义

Vue优化方式

diff算法

虚拟DOM的优缺点

为什么选Vue进行项目开发

深拷贝和浅拷贝的区别

怎么把网址里的参数传出来呢？

怎样实现继承

axios怎样封装

说下axios

简单说下webpack

watch与computed的区别

vue生命周期及对应的行为

vue父子组件生命周期执行顺序

组件间通讯方法

如何实现一个指令

vue.nextTick实现原理

diff算法

如何做到的双向绑定

虚拟dom为什么快

如何设计一个组件

css部分

什么是箱型

怎样把元素垂直居中心

如何三栏式布局

选择器权重计算方法

在Vue文件中template模板部分使用template标签的作用是什么