前端基础面试题（前端经典面试题）

Q: Ajax、Fetch、Axios三者有什么区别

三者都用于网络请求，但是不同维度

• Ajax（Asynchronous Javascript and XML），一种技术统称
• Fetch，一个具体的 API
• Axios，第三方库 https://axios-http.com

Q: 防抖和节流有什么区别，分别用于什么场景

防抖

• 防抖，防止抖动，“你先抖动着，啥时候停了，再执行下一步”
• 例如，搜索输入框，输入停止后触发搜索

function debounce(fn, delay = 200) {
	let timer = 0
	return function() {
		if (timer) clearTimeout(timer)
		
		timer = setTimeout(() => {
			fn.apply(this, arguments)
			timer = 0
		}, delay)
	}
}

节流

• 节流，节省交互沟通。流，不一定指流量
• “一个一个来，按时间节奏，插队者无效”
• 例如，drag或scroll期间触发某个回调，要设置一个时间间隔

function throttle(fn, delay = 200) {
	let timer = 0

	return function() {
		if (timer) return

		timer = setTimeout(() => {
			fn.apply(this, arguments)
			timer = 0
		}, delay)
	}
}

答案

• 节流：限制执行频率，有节奏的执行
• 防抖：限制执行次数，多次密集的触发只执行一次
• 节流关注“过程”，防抖关注“结果”
• 实际工作中可使用 lodash

Q: px、%、em、rem、vw/vh 有什么区别

• px 基本单位，绝对单位（其他的都是相对单位）
• % 相对于父元素的宽度比例
• em 相对于当前元素的font-size
• rem 相对于根节点的font-size
• vw 屏幕宽度的比例
• vh 屏幕高度的比例
• vmin 两者的最小值，vmax 两者的最大值

Q: 什么时候不能使用箭头函数

箭头函数有什么缺点？

• 没有argument
• 无法通过 apply call bind 改变 this
• 某些箭头函数代码难以阅读

什么时候不能使用箭头函数？

• 对象方法
• 原型方法
• 构造函数
• 动态上下文中的回调函数
• vue 生命周期和 methods

Q: 请描述 TCP 三次握手和四次挥手

三次握手-建立连接

• Client 发包，Server 接收。Server：有 Client 要找我
• Server 发包，Client 接收。Client：Server已经收到信息了
• Client 发包，Server接收。Server：Client 要准备发送了

四次挥手 - 关闭连接

• Client 发包，Server 接收。Server：Client 已请求结束
• Server 发包，Client 接收。Client：Server 已收到，Server端继续向Client返回资源
• Server 发包，Client 接收。Client：Server 资源已全部返回。（Server端没有关闭连接的权利）
• Client 发包，Server 接收。Server：可以关闭了（然后关闭连接）

Q: JS中 for…in 和 for…of 有什么区别

key 和 value

• for…in 遍历得到 key
• for…of 遍历得到 value

适用于不同的数据类型

• 遍历对象：for…in
• 遍历 Map Set：for…of
• 遍历 generator：for…of

可枚举 vs 可迭代

• for…in 用于可枚举数据，如对象、数组、字符串
  通过 Object.getOwnPropertyDescriptors(obj) 可查看每个对象属性的配置，其中有一项 enumerable 为 true 为可枚举数据
• for…of 用于可迭代数据，如数组、字符串、Map、Set
  查看 Symbol.iterator 属性是否是函数

答案

• for…in 用于可枚举数据，如对象、数组、字符串，得到 key
• for…of 用于可迭代数据，如数组、字符串、Map、Set，得到 value

Q: for await…of 有什么作用

• for await…of 用于遍历多个 promise

Q: offsetHeight、scrollHeight、clientHeight有什么区别

• offsetHeight offsetWidth：border + padding + content
• clientHeight clientWidth：padding + content
• scrollHeight scrollWidth：padding + 实际内容尺寸

Q: HTMLCollection 和 NodeList 区别

Node 和 Element

• Dom 是一棵树，所有节点都是 Node
• Node 是 Element 的基类
• Element 是其他 HTML 元素的基类，如 HTMLDivElement

HTMLCollection 和 NodeList

• HTMLCollection 是 Element 集合，ele.children 获取
• NodeList 是 Node 集合，ele.childNodes 获取

扩展：类数组 -> 数组

• Array.from(list)
• Array.prototype.slice.call(list)
• […list]

Q: Vue 中 computed 和 watch 有什么区别

• computed 用于计算产生新的数据，有缓存（methods无缓存）
• watch用于监听现有数据

Q: Vue 组件通讯有几种方式，尽量全面

• props 和 $emit - 父子组件
• 自定义事件 - 不相关组件
  Vue2：new Vue()
  Vue3：引入第三方的自定义事件（event-emitter）
• $attrs（当组件只有一个dom节点时，inheritAttrs可设置dom属性不可见） - 父子组件
• $parent - 父子组件
• $refs - 父子组件
• provide 和 inject - 多层级组件
• vuex - 全局组件

Q: Vuex 中 action 和 mutation 有什么区别

• mutation：原子操作；必须同步代码
• action：可包含多个mutation；可包含异步代码

Q: JS 严格模式有什么特点

开启严格模式

'use strict' // 全局开启

function fn() {
	'use strict' // 某个函数开启
}

特点

• 全局变量必须先声明
• 禁止用 with
• 创建 eval 作用域（单独的作用域，不受外面作用域的影响，不推荐使用）
• 禁止 this 指向 window
• 函数参数不能重名

Q: Http 跨域时为何要发送 options 请求

• options 请求，是跨域请求之前的预检查
• 浏览器自行发起的，无需我们干预
• 不会影响实际的功能

解决跨域的方法

• JSONP
• CORS

Q: 如果一个H5很慢，如何排查性能问题

前端性能指标

• First Paint（FP） 第一次渲染
• First Contentful Paint（FCP） 第一次有内容的渲染
• First Meaningful Paint（FMP） 第一次有意义的渲染（已弃用，因为无法通过技术手段去定义，属于业务指标，改用LCP）
• DomContentLoaded（DCL）原生html事件，页面内容加载完成
• Largest Contentfull Paint （LCP）页面最大的内容渲染完成
• Load（L）页面所有资源加载完成

Chrome devTools

• Performance 可查看上述性能指标，并有网页快照
• Network 可以查看各个资源的加载时间

Lighthouse

• 菲常流行的第三方性能测评工具
• 支持移动端和PC
• 有测试报告和优化建议
• npm install lighthouse -g
• lighthouse https://www.baidu.com/ --view --preset=desktop (–view: 查看报告 --preset=desktop: 访问的是pc端，默认是移端

如果是网页加载慢

• 优化服务器端硬件配置，使用CDN
• 路由懒加载，大组件异步加载——减少主包的体积
• 优化HTTP缓存策略

如果是网页渲染慢

• 优化服务端接口（如Aiax获取数据慢）
• 优化前端组件内部逻辑（参考Vue React优化）
• 服务端渲染 SSR

Q: 高质量代码的特点

• 规范性：符合代码规范，逻辑清晰可读
• 完整性：考虑全面所有功能
• 鲁棒性：处理异常输入和边界情况