前端面试汇总

一、Vue部分

1. vue 什么是MVVM

    MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也
    可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成
    UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

2. 介绍一下Vue生命周期

3. 为什么vue中data必须是一个函数 （数据污染）

4. 计算属性和watch的区别(首次加载时怎么触发watch， immediate: true)

5. vue 组件通信

6. query传参和params传参有什么区别

1.params传参可以提前在路由离定义好成为路由的一部分而query不需要
2.params传参或存在参数刷新丢失的情况而query不会

7. vuex 是什么？ 有哪几种属性

它有 5 种属性，分别是 state、getter、mutation、action、module
state：vuex的基本数据，用来存储变量
geeter：从基本数据(state)派生的数据，相当于state的计算属性
mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

8. 介绍一下$nextTick以及时间循环机制

9.v-for 为什么需要绑定Key

10. Vue的路由hash模式 和 history模式的区别

hash模式在浏览器中有个符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取而history是采用HTML5的新特性，底层使用pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更，history 模:前端的 URL 必须和实际向后端发起请求的 URL 一致，后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

11. 如何优化SPA应用的首屏加载速度慢的问题

1.将公用的JS库通过script标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；
2.在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；
3.加一个首屏loading图，提升用户体验；
4.使用预渲染插件prerender-spa-plugin生成对特定路由静态的html文件

12. Vue中双向数据绑定是如何实现的

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；vue双向数据绑定，其核心是 Object.defineProperty()方法

13. 文件夹assets和static的区别

assets和static两个都是存放静态资源文件，但是assets中存放的静态资源文件在项目打包时会进行编译，而static不会

14. 简述vue中diff算法原理

diff算法是一种优化手段，将前后两个模块进行差异化对比，修补（更新）差异的过程叫做patch(打补丁)，从以下几点来理解：
1. 当数据发生变化时，vue是怎么更新节点的？
    要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们。我们先根据真实DOM生成一颗 virtual DOM ，当 virtual DOM 某个节点的数据改变后会生成一个新的Vnode ，然后 Vnode 和 oldVnode 作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode 的值为 Vnode 。
    diff的过程就是调用名为 patch 的函数，比较新旧节点，一边比较一边给 真实的DOM 打补丁。
2. virtual DOM和真实DOM的区别？
    virtual DOM是将真实的 DOM 的数据抽取出来，以对象的形式模拟树形结构，diff算法比较的也是virtual DOM
3. diff的比较方式？
在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。

15. v-model 原理

v-model 只是语法糖而已。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件。
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change事件；
select 字段将 value 作为 prop 并将 change 作为事件。
注意：对于需要使用输入法的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。
在普通元素上：
input v-model=‘sth’
input v-bind:value=‘sth’ v-on:input=‘sth = $event.target.value’

16 你都做过哪些 Vue 的性能优化

对象层级不要过深，否则性能就会差。
不需要响应式的数据不要放在 data 中
v-if 和 v-show 区分使用场景
computed 和 watch 区分场景使用
v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格
防止内部泄露，组件销毁后把全局变量和时间销毁
图片懒加载
路由懒加载
异步路由
第三方插件的按需加载
适当采用 keep-alive 缓存组件
防抖、节流的运用
服务端渲染 SSR or 预渲染

二、js部分

1. var let const 区别

2. this指向

3. 箭头函数和普通函数的区别

4. 数组、对象遍历方法

5. 跨域是什么，如何解决跨域

6. 深拷贝和浅拷贝区别，如何实现一个深拷贝

7. 简述下Promise(Pending, Resolved, Rejected)

8. 简述下async/await 以及对于Promise 有什么优势

9. 简述下闭包

10. apply，call，bind三者的区别

• 三者都可以改变函数的this对象指向。
• 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。
• 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
• bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。

11. 说一下localstorage、sessionstorage区别

12. 简述下js的事件循环

三、CSS部分

1. 清除浮动的几种方式

2. 左右居中、上下居中的几种方式；

1. 利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页 面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。 该方法需要考虑浏览器兼容问题。 
2. 利用绝对定位，设置四个方向的值都为 0，并将 margin 设置为 auto， 由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上 的居中。该方法适用于盒子有宽高的情况：
3. 利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页 面的中心，然后再通过 margin 负值来调整元素的中心点到页面的中 心。该方法适用于盒子宽高已知的情况
4. 使 用 flex 布 局 ， 通 过 align-items:center 和 justify-content:center设置容器的垂直和水平方向上为居中对齐， 然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的 问题，该方法在移动端用的较多

3. 如何覆盖组件库自定义样式；

4. 如何实现0.5px效果；

伪元素 + transform（放缩）

5. 有没有做过大屏，需要注意什么；

6. CSS 优化和提高性能的方法有哪些

加载性能： 
（1）css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。 
（2）css 单一样式：当需要下边距和左边距的时候，很多时候会选 择 使 用 margin:top 0 bottom 0 ； 但 margin-bottom:bottom;margin-left:left;执行效率会更高。 
（3）减少使用@import，建议使用 link，因为后者在页面加载时一 起加载，前者是等待页面加载完成之后再进行加载。 选择器性能： （
	1）关键选择器（key selector）。选择器的最后面的部分为关键 选择器（即用来匹配目标元素的部分）。CSS 选择符是从右到左进行 匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定 是否是指定的元素等等； 
	（2）如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加 标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们 了）。 		
	（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素 进行选择。 
	（4）尽量少的去对标签进行选择，而是用 class。
	（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择 器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三 层，更多的使用类来关联每一个标签元素。 
	（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重 复指定规则。 
渲染性能： 
（1）慎重使用高性能属性：浮动、定位。 
（2）尽量减少页面重排、重绘。 
（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样 式。去除这些空规则无疑能减少 css 文档体积。 
（4）属性值为 0 时，不加单位。 
（5）属性值为浮动小数 0.**，可以省略小数点之前的 0。 
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。 
（7）不使用@import 前缀，它会影响 css 的加载速度。 
（8）选择器优化嵌套，尽量避免层级过深。 
（9）css 雪碧图，同一页面相近部分的小图标，方便使用，减少页 面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚， 再使用。 
（10）正确使用 display 的属性，由于 display 的作用，某些样式组 合会无效，徒增样式体积的同时也影响解析性能。 170
（11）不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生， 国外却很流行。web fonts 通常体积庞大，而且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能。 可维护性、健壮性： （1）将具有相同属性的样式抽离出来，整合并通过 class 在页面中 进行使用，提高 css 的可维护性。 （2）样式与内容分离：将 css 代码定义到外部 css 中。

7. 常见的 CSS 布局单位

像素（px），百分比（%），em，rem，vw/vh