前端面试问题总结

最近有换工作的打算，于是在BOSS上投递了简历，然后总结一下遇到的面试问题

一、面试问题汇总

1.html部分

1.1.浏览器输入URL到页面显示经历了什么

• 浏览器输入url后，会解析对应的服务器的域名然后拿到对应的IP，之后会经过三次握手建立TCP连接。成功建立连接之后会发送对应的网络请求，服务器会把请求的内容从服务端发送到浏览器，浏览器拿到对应的内容后会进行渲染。
• 首先会把html、css、js文件下载下来，然后根据html结构绘制成对应的dom树，然后把css样式绘制到dom树上形成render tree，js文件相当于添加一些对应的交互效果。
• js文件的下载可能对产生堵塞现象，有可能是文件下载失败，也有可能是js代码过长导致执行时间过长从而产生页面加载过慢的感觉，这种情况下可以添加defer属性，不妨碍render tree的绘制。

2.css部分

2.1.说说居中的几种方式（水平垂直居中）

1）宽高已知

• 绝对定位：

/** 假设宽高都是100px **/
width : 100px;
height : 100px;

/** 方法1 **/
position : absolute;
left: 50%;
top: 50%;
margin-left : -50px;
margin-top : -50px;

/** 或者，这个对宽高没有要求 **/
position : absolute;
left : 0；
top : 0;
right : 0;
bottom : 0;
margin : auto;

2）宽高未知

• flex布局

/** 父盒子中添加以下代码 **/
display : flex;
justify-content : center;/** 水平居中 **/
align-items : center; /** 垂直居中 **/

2.2.有没有遇到盒子塌陷的情况，怎么处理的（相当于如何设置BFC）

• overflow:hidden
• 用伪元素处理

::after{
	content : '';
	display : block;
	clear : both;
}

• 设置成绝对定位

2.3.重绘跟重排的区别

• 重绘：页面样式修改，dom结构未变，重新绘制样式（推荐）
• 重排：dom结构改变，重新绘制整个页面

2.4.display:none跟visibility:hidden区别

• display:none不占据原本空间，不可获取宽高，会引起页面重绘和回流
• visibility:hidden占据原本空间，可获取宽高，只引起重绘

2.5.css有哪些选择器

• ID选择器#xxx
• 类选择器.xxx
• 标签选择器[]
• 通配符选择器*
• 伪类选择器:nth-child
• 伪元素选择器::before

2.6.选择器优先级情况

!important > style内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器

2.7.了解伪元素么？一般用在哪里

一般用来添加样式，比如鼠标放在菜单栏上出现从中间到两边的水平线（css3动画效果）

2.8.用过sass和less吗？谈谈你对这两个的理解

只用过sass，类似于一种嵌套的样式结构

3.js部分

3.1.谈谈你对原型链、原型的理解

• 原型是函数对应的属性，规定了构造函数的共同祖先
• 构造函数实例化之后，寻找某个属性，从下至上寻找，形成的链式结构称为原型链

3.2.谈谈引入模块的好处

引申：你知道哪些模块引入的方式，除了ES6的方式

• 引入模块可以优化页面加载速度，它将一个大js分成若干个小js，页面下载速度会加快
• 方面后期维护，将大js分成小的js，每个小js对应一个模块，维护起来更加方便

AMD/CMD，主要对模块化了解不太深。。。

3.3.谈谈你对跨域的理解

• 跨域产生的原因
  • 浏览器有同源策略，限制了不同源IP之间的访问
• 跨域解决的办法
  • JSONP方式，需要后端配合
  • 后端设置允许跨域
  • ajax设置crossDomain:true

3.4.说说基础的数据类型

• Boolean
• String
• Number
• null
• undefined
• Symbol
• BigInt

3.5.你知道哪些引用类型

• Function
• Reg
• Date
• Array
• Object

3.6.了解ES6么？说说跟之前相比有啥变化

ES6相当于对之前js的进行了优化

• 引入了let和const声明变量的方式
• 引入了新的循环表示方式，for in和for of，for in一般用于循环对象，for of一般用于循环可迭代的数据，未必是数组
• 引入了Promise

3.7.了解ES6的哪些API

• 数组的一些方法
  • forEach
  • map
  • filter
  • reduce
  • some(不太熟)
  • find(不太熟)

3.8.看到你说了Promise，有了解过么

• 主要用于解决回调地狱的问题，使用Promise之后，逻辑结构更加清楚

3.9.Promise解决了哪些问题

同上

3.10.了解js的执行机制么，说一下

js引擎包含处理函数的执行栈，事件循环机制，消息队列
同步函数执行时进入执行栈，执行完毕后出栈，运行至栈空
异步函数会先进入消息队列，等待同步代码执行完毕后会触发事件循环，此时会将消息队列中的任务推入执行栈中，执行，出栈，直至栈空
以下是对应的示意图

3.11.说说本地存储的几种类型

• localStorage
  • 浏览器本地存储，关闭浏览器数据依旧存在，不会主动向后端发送数据
• sessionStorage
  • 浏览器临时存储，关闭浏览器数据消失，只存在于当前窗口，不会主动向后端发送数据
• cookie
  • 浏览器缓存，会主动向后端发送数据，存在过期时间

3.12.了解过强缓存跟协商缓存么，谈一谈你的理解

3.13.异步加载js文件的几种方式

• 在js标签上添加async或者defer属性
• 动态生成js标签，然后插入到dom中

3.14.谈谈你对闭包的理解

闭包：内部函数被保存到外部形成的一种现象
优点：其他函数能访问到这个内部函数里的数据，可用作缓存器
缺点：由于原作用域未释放，会导致内存泄漏，可用立即执行函数规避

3.15.谈谈你对继承的理解

3.16.说一下this指向问题

• 全局指向window
• 局部
  • 构造函数，实例化之后指向实例化对象
  • 箭头函数，this指向函数出生的环境

可通过call、bind、apply改变this指向

3.17.如何判断当前数据类型

• typeof — 无法区分引用类型
• instanceof — 可以区分
• Object.prototype.toString.call() — 可以区分

3.18.如何用instanceof判断数据类型？能写一个实现方式么

3.19.谈谈你对深度克隆的理解，如何不克隆对象的原型链？

我们先聊聊浅层克隆，浅层克隆实际上克隆的是目标的地址，这会导致一个问题，当目标是引用值的时候，修改克隆的数据，源数据也会跟着变。

深度克隆类似于拷贝一份数据，拷贝前后的数据互不影响。可用递归方式实现。

在用递归实现的时候用hasOwnProperty方法判断当前的属性是否是自身的。

4.Vue和Element UI部分

4.1.说说对Vuex的理解

• 状态管理插件，包含state、getters、actions、mutations、mudules
• action包含异步函数

4.2.说说对Vue-Router的理解

• 路由插件，再不刷新页面的情况下切换对应的内容

4.3.说说路由中Hash跟History的区别

• hash不用配置nginx
• history需要配置nginx，不然会出现404页面

4.4.v-if跟v-show的区别

• v-if值为false时，整个dom元素移除
• v-show值为false时，dom元素样式添加display:none
  v-show适用于频繁切换的场景，v-if适用于几乎不会发生改变的场景

4.5.说说生命周期

• beforeCreated
• created
• beforeMounted
• mounted
• beforeUpdated
• updated
• beforeDestroyed
• destroyed

4.6.说说Vue中watch和computed的区别

4.7.了解过keep-live组件么，谈谈这个组件的适用方式

4.8.说一下组件传值的方式

父传子：props
子传父：$emit

4.9.为啥要把一个js文件分成多个？

优化加载速度，并行下载的速度比串行下载速度要快。

4.10.你做过哪些性能优化

• 把相同逻辑的代码封装成函数，相同逻辑的样式结构封装成通用组件
• 按需引入路由、Element UI、Echarts
• 使用happyPack、thread-loader、cache-loader优化打包速度（从网上查找的）

4.11.如何按需引入Element UI和Echarts

先导入对应的组件
然后将Vue.use() 里的内容改成对应想引入的组件

4.12.说说对路由懒加载的理解以及目的

在对应的页面下载对应的信息，其他的不下载。这样做可以优化加载速度，因为请求的内容减少了。

4.13.你用哪种方式处理接口？

• jquery的ajax
• vue的axios

二、面试学到的

• 组件内的代码不宜过长，最多500行
• 尽量减少代码长度，理顺逻辑，看有没有更简洁的解决方法
• 关于缓存的优化可以设置hash值进行数据比对

抽个时间把面试题答案写一下/找一下

---

2023.2.22

补充面试内容：

1.css盒模型
2.css样式优先级
3.除了px还用过哪些单位，rem是相对于哪个的相对单位
4.js数据类型
5.null与undefined区别
6.let与var区别
7.剪头函数与普通函数区别
8.vue3与vue2的区别
9.vite与webpack区别
10.用过react与flutter么
11.移动端使用过其他框架么
12.聊一下跨域原理以及解决方法

参考文章
1.前端从业小哥哥—前端页面布局居中水平、垂直居中问题
2.我家有只狗—display:none和visiblity:hidden区别
3.梦烬—css盒子塌陷问题的4种解决方案