优质面试题
- Q: Ajax、Fetch、Axios三者有什么区别
- Q: 防抖和节流有什么区别,分别用于什么场景
- Q: px、%、em、rem、vw/vh 有什么区别
- Q: 什么时候不能使用箭头函数
- Q: 请描述 TCP 三次握手和四次挥手
- Q: JS中 for...in 和 for...of 有什么区别
- Q: for await...of 有什么作用
- Q: offsetHeight、scrollHeight、clientHeight有什么区别
- Q: HTMLCollection 和 NodeList 区别
- Q: Vue 中 computed 和 watch 有什么区别
- Q: Vue 组件通讯有几种方式,尽量全面
- Q: Vuex 中 action 和 mutation 有什么区别
- Q: JS 严格模式有什么特点
- Q: Http 跨域时为何要发送 options 请求
- Q: 如果一个H5很慢,如何排查性能问题
- Q: 高质量代码的特点
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: 高质量代码的特点
- 规范性:符合代码规范,逻辑清晰可读
- 完整性:考虑全面所有功能
- 鲁棒性:处理异常输入和边界情况