前端常见面试题总结

持续更新中~
内容只是面试示例，问题及答案仅供参考提示~
基本面试前端涉及到的相关知识点都可能问道，尤其理论相关的~
本文偏注重应用，原理理论相关的东西较多，且每个人可能理解都不尽相同，我就不误人子弟了，故而不涉及；

一：css篇

1：如何隐藏某元素？

opacity 设为 0；
visibility 设为 hidden；
display 设为 none；
position 设为 absolute，然后将位置设到不可见区域

2：如何水平垂直居中某元素？

盒子未固定宽高：transforms变形；弹性盒子；
盒子固定宽高：绝对定位+margin负间距/margin:auto

3：定位有哪几种？分别相对于什么定位？占不占位置？

Position：absolute绝对定位，relative相对定位，fixed 固定定位，static 静态定位，stiky 粘性定位；

4：双飞翼布局？

二：js相关

1：JS的基本数据类型？

Undefined、Null、Boolean、Number、String、Symbol、Object

null 和 undefined 的区别

undefined 代表的含义是未定义，null 代表的含义是空对象。

判断数据类型

Typeof， instanceof , sonstructor, object.prototype.toString.call

2：深拷贝和浅拷贝？

浅拷贝：Object.assign()，concat，slice，拓展运算符
深拷贝：JSON.parse(JSON.stringify()); 递归

3：介绍一下事件冒泡和捕获？阻止事件冒泡

事件冒泡：自下而上：event.stopPropagation( )
事件捕获：自上而下

4：JS如何实现异步编程

回调函数(callback), 事件监听，Promise，Generator，async/await

promise与async/await区别？

settime out 与 promise执行顺序？

5：this指向问题

普通函数中的 this 指向 window 对象， 严格模式下为
undefined；
箭头函数没有，继承父作用域的this；
构造函数指向实例对象；
绑定事件的函数：谁调用指向谁；
对象里调用：谁调用指向谁；
定时器（回调函数）：window

6：url输入到解析？

DNS域名解析—找到ip发起请求—服务器返回数据—浏览器接受文件—资源语法解析—载入解析文件

前端缓存了解

强缓存，协商缓存

三：vue相关

1：移动端与pc端区别？

区别：架构，设备，开发语言，用户，兼容

移动端兼容怎么搞？rem的原理？rem配置？

兼容：媒体查询，vh，vw, %, em, rem; 等比缩放

1vh，1 1em, 1rem, 1px区别

1 rem
页面所有使用rem单位的长度都是相对于根元素元素的font-size大小。即1rem等于根元素元素的font-size大小。
1em
子元素字体大小的em是相对于父元素字体大小。
元素的width/height/padding/margin用em的话是相对于该元素的font-size。
1vh、1vw
全称是 Viewport Width 和 Viewport Height，视口的宽度和高度，1vh相当于 视口高度的 1%。
1px
px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2：如果有五个路由其中两个要通过登录，其中三个不用登录可以直接访问这个怎么实现？

beforEach 路由守卫；路由传参打标，守卫中判断拦截

路由守卫？

全局导航钩子，组件内钩子，单独路由独享组件
参数： to from next()

3：系统权限？

包含菜单、按钮、数据权限

路由，按钮，数据怎么解决？

路由后端返回权限路由列表数据，前端在menu处根据数据渲染； 按钮后端返回权限按钮列表数据，前端自定义指令；
数据权限由前端在请求头封装token等用户数据，后端接收判断当前用户；

4：组件传值方式？

Prop $emit $paraents ref vuex eventBus

简述vuex？

stste action mutations modules getters

action mutation 同步异步，为什么？

vuex刷新会不会丢失？解决

会，保存在运行内存中
做持久化存储，保存在session storage与local storage中

cookies session local 区别

5：路由传参方式？

router link to
router push qurey params

query与params区别？

用params传参的时候
页面跳转之后的页面路径为http://localhost:8080/#/index
这种传参方法：
用户看不到具体的参数值，相对安全
当页面刷新的时候传递的参数id在该页面中就不存在了。（存储本地或者改为query方式）
params传参的时候，只能用name引入路由，不能使用path引入
获取方式：this.$route.params
用query传参的时候
页面跳转之后的页面路径http://localhost:8080/#/index?id=1
这种传参方法：
传递的参数值会暴露在页面路径中，不安全。
当页面刷新的时候，传递的参数不会消失
query传参的时候，可以同时使用name和path引入路由

params刷新会不会丢失？解决？

会，eventBus, 数据存储

6：生命周期什么时候能拿到实例data，页面渲染完成在生命周期什么时候

7：scss 是什么？在 vue.cli 中的安装使用步骤？有哪几大特性？

可以用变量，例如（$变量名称=值）；
可以用混合器；
可以嵌套

8：组件中的data是对象还是函数?

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果

9：组件中写 name 选项有什么作用

① 项目使用 keep-alive 时，可搭配组件的 name 进行缓存过滤。
②DOM 做递归组件时需要调用自身 name
③vue-devtools 调试工具里显示的组件名称是由 vue 中组件 name 决定的

10：router与route区别

获取路由数据，跳转

11：nextTick 的理解

12：不需要响应式的数据应该怎么处理？

方法一：将数据定义在data之外
方法二：Object.freeze()
减少性能消耗

13：路由模式

Hash, history, abstract模式(严格模式);
vue-router的实现原理(核心)：更新视图但不重新请求页面

14：Vue3.0 的了解

大致有三个点，第一个是关于提出的新 API setup()函数，第二个说了对于 Typescript 的支持，最后说了关于替换
Object.defineProperty 为 Proxy 的支持。详细说了下关于 Proxy
代替带来的性能上的提升，因为传统的原型链拦截的方法，无法检测对象及数组的一些更新操作，但使用 Proxy 又带来了浏览器兼容问题

15：vue中"dependencies"，"devDependencies"是什么？package.json 文件里面的devDependencies和 dependencies 对象有什么区别？

使用 npm i 【包名】 --save-dev 安装的包，会被写入到 devDependencies 对象里面去； 而使用 npm i【包名】 --save 安装的包，则被写入到 dependencies 对象里面去。
devDependencies 里面的插件(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；而dependencies 是需要发布到生产环境的，是要打包的。

16：watch的immediate属性有什么用？

当created时要请求一次数据，并且搜索值改变也要请求数据时，

17：父页面a跳转子页面b，修改b页面数据后在返回a页面，不调用后端接口要实现a页面原数据保留，且b修改a某条数据；

四：项目优化相关

1：首屏渲染优化方式

推迟非关键资源的加载：异步加载的三种方式——async和defer、
动态脚本创建；
路由懒加载；
CDN；
gzip压缩；
浏览器缓存；
组件尽量不要全局引入

2：页面性能优化

代码压缩层面，关键资源，浏览器缓存，CDN，图片优化，防抖节流，减少回流与重绘

3：如果开发一个项目怎么着手去开发

4：跨域解决办法

JSONP；CORS跨域资源共享（Access-Control-Allow-Origin）；Nginx反向代理；webpack（在vue.config.js文件中）中 配置webpack-dev-server（changeOrigin: true, //是否跨域）

5：webpack了解及使用？

入口，出口，plugins, loader, env

优化配置？

6：组件封装？

7：常见状态码？

8：常用git命令？

9：echarts图表等？

持续更新中~
内容只是面试示例，问题及答案仅供参考提示~
基本面试前端涉及到的相关知识点都可能问道，尤其理论相关的~
本文偏注重应用，原理理论相关的东西较多，且每个人可能理解都不尽相同，我就不误人子弟了，故而不涉及；

一：css篇

1：如何隐藏某元素？

opacity 设为 0；
visibility 设为 hidden；
display 设为 none；
position 设为 absolute，然后将位置设到不可见区域

2：如何水平垂直居中某元素？

盒子未固定宽高：transforms变形；弹性盒子；
盒子固定宽高：绝对定位+margin负间距/margin:auto

3：定位有哪几种？分别相对于什么定位？占不占位置？

Position：absolute绝对定位，relative相对定位，fixed 固定定位，static 静态定位，stiky 粘性定位；

4：双飞翼布局？

二：js相关

1：JS的基本数据类型？

Undefined、Null、Boolean、Number、String、Symbol、Object

null 和 undefined 的区别

undefined 代表的含义是未定义，null 代表的含义是空对象。

判断数据类型

Typeof， instanceof , sonstructor, object.prototype.toString.call

2：深拷贝和浅拷贝？

浅拷贝：Object.assign()，concat，slice，拓展运算符
深拷贝：JSON.parse(JSON.stringify()); 递归

3：介绍一下事件冒泡和捕获？阻止事件冒泡

事件冒泡：自下而上：event.stopPropagation( )
事件捕获：自上而下

4：JS如何实现异步编程

回调函数(callback), 事件监听，Promise，Generator，async/await

promise与async/await区别？

settime out 与 promise执行顺序？

5：this指向问题

普通函数中的 this 指向 window 对象， 严格模式下为
undefined；
箭头函数没有，继承父作用域的this；
构造函数指向实例对象；
绑定事件的函数：谁调用指向谁；
对象里调用：谁调用指向谁；
定时器（回调函数）：window

6：url输入到解析？

DNS域名解析—找到ip发起请求—服务器返回数据—浏览器接受文件—资源语法解析—载入解析文件

前端缓存了解

强缓存，协商缓存

三：vue相关

1：移动端与pc端区别？

区别：架构，设备，开发语言，用户，兼容

移动端兼容怎么搞？rem的原理？rem配置？

兼容：媒体查询，vh，vw, %, em, rem; 等比缩放

1vh，1 1em, 1rem, 1px区别

1 rem
页面所有使用rem单位的长度都是相对于根元素元素的font-size大小。即1rem等于根元素元素的font-size大小。
1em
子元素字体大小的em是相对于父元素字体大小。
元素的width/height/padding/margin用em的话是相对于该元素的font-size。
1vh、1vw
全称是 Viewport Width 和 Viewport Height，视口的宽度和高度，1vh相当于 视口高度的 1%。
1px
px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2：如果有五个路由其中两个要通过登录，其中三个不用登录可以直接访问这个怎么实现？

beforEach 路由守卫；路由传参打标，守卫中判断拦截

路由守卫？

全局导航钩子，组件内钩子，单独路由独享组件
参数： to from next()

3：系统权限？

包含菜单、按钮、数据权限

路由，按钮，数据怎么解决？

路由后端返回权限路由列表数据，前端在menu处根据数据渲染； 按钮后端返回权限按钮列表数据，前端自定义指令；
数据权限由前端在请求头封装token等用户数据，后端接收判断当前用户；

4：组件传值方式？

Prop $emit $paraents ref vuex eventBus

简述vuex？

stste action mutations modules getters

action mutation 同步异步，为什么？

vuex刷新会不会丢失？解决

会，保存在运行内存中
做持久化存储，保存在session storage与local storage中

cookies session local 区别

5：路由传参方式？

router link to
router push qurey params

query与params区别？

用params传参的时候
页面跳转之后的页面路径为http://localhost:8080/#/index
这种传参方法：
用户看不到具体的参数值，相对安全
当页面刷新的时候传递的参数id在该页面中就不存在了。（存储本地或者改为query方式）
params传参的时候，只能用name引入路由，不能使用path引入
获取方式：this.$route.params
用query传参的时候
页面跳转之后的页面路径http://localhost:8080/#/index?id=1
这种传参方法：
传递的参数值会暴露在页面路径中，不安全。
当页面刷新的时候，传递的参数不会消失
query传参的时候，可以同时使用name和path引入路由

params刷新会不会丢失？解决？

会，eventBus, 数据存储

6：生命周期什么时候能拿到实例data，页面渲染完成在生命周期什么时候

7：scss 是什么？在 vue.cli 中的安装使用步骤？有哪几大特性？

可以用变量，例如（$变量名称=值）；
可以用混合器；
可以嵌套

8：组件中的data是对象还是函数?

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果

9：组件中写 name 选项有什么作用

① 项目使用 keep-alive 时，可搭配组件的 name 进行缓存过滤。
②DOM 做递归组件时需要调用自身 name
③vue-devtools 调试工具里显示的组件名称是由 vue 中组件 name 决定的

10：router与route区别

获取路由数据，跳转

11：nextTick 的理解

12：不需要响应式的数据应该怎么处理？

方法一：将数据定义在data之外
方法二：Object.freeze()
减少性能消耗

13：路由模式

Hash, history, abstract模式(严格模式);
vue-router的实现原理(核心)：更新视图但不重新请求页面

14：Vue3.0 的了解

大致有三个点，第一个是关于提出的新 API setup()函数，第二个说了对于 Typescript 的支持，最后说了关于替换
Object.defineProperty 为 Proxy 的支持。详细说了下关于 Proxy
代替带来的性能上的提升，因为传统的原型链拦截的方法，无法检测对象及数组的一些更新操作，但使用 Proxy 又带来了浏览器兼容问题

15：vue中"dependencies"，"devDependencies"是什么？package.json 文件里面的devDependencies和 dependencies 对象有什么区别？

使用 npm i 【包名】 --save-dev 安装的包，会被写入到 devDependencies 对象里面去； 而使用 npm i【包名】 --save 安装的包，则被写入到 dependencies 对象里面去。
devDependencies 里面的插件(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；而dependencies 是需要发布到生产环境的，是要打包的。

16：watch的immediate属性有什么用？

当created时要请求一次数据，并且搜索值改变也要请求数据时，

17：父页面a跳转子页面b，修改b页面数据后在返回a页面，不调用后端接口要实现a页面原数据保留，且b修改a某条数据；

四：项目优化相关

1：首屏渲染优化方式

推迟非关键资源的加载：异步加载的三种方式——async和defer、
动态脚本创建；
路由懒加载；
CDN；
gzip压缩；
浏览器缓存；
组件尽量不要全局引入

2：页面性能优化

代码压缩层面，关键资源，浏览器缓存，CDN，图片优化，防抖节流，减少回流与重绘

3：如果开发一个项目怎么着手去开发

4：跨域解决办法

JSONP；CORS跨域资源共享（Access-Control-Allow-Origin）；Nginx反向代理；webpack（在vue.config.js文件中）中 配置webpack-dev-server（changeOrigin: true, //是否跨域）

5：webpack了解及使用？

入口，出口，plugins, loader, env

优化配置？

6：组件封装？

7：常见状态码？

8：常用git命令？

9：echarts图表等？