⚠️ ⚠️侵删，联系我

店小秘

智能客服系统岗位 技术栈： Vue2 + ElementUI + Electron + socket.io

笔试

• localStorage 和 sessionStorage 的区别

• margin 重叠有哪些，怎么计算重叠的margin

• const foo = '22' + 2 - 2 的值和类型

• 闭包的概念、使用场景？项目哪里用到？

• 千分位 123456789 => 123,456,789？

• 手写深拷贝

• 数据扁平化 [1, 2, [3, [4]] => [1,2,3,4]

• for (var i = 0 ; i < 4; i ++) { setTimeout(() => console.log(i), 3)} 输出以及逐个输出实现

• 原生JS如何设置属性、哪些CSS属性可以脱离文档流？domcument.setAttribute

• 小球从 H 高度垂直掉落，每次弹起高度为原来的 90%，求小球掉落n次后经过的距离以及弹起高度

项目

• 登录鉴权方案、session-cookie 、 token 、 SSO

• token 怎么 加密，如何无感刷新token

• 追问： session 放在请求头可以吗？ token 放在cookie上可以吗

• cookie前端写入方式，有哪些属性

• 常用布局 居中、两侧、多栏、圣杯布局 ？

• flex 属性 align-content 、align-item 和 align-self ？

• 从哪些方面封装 axios、如何取消重复请求，如何设置请求头 以及其他场景的实现

• 文件下载实现方式有哪些？

• 上传组件如何判断文件类型？

• 大文件断点续传怎么做？上传一半没网了怎么了处理？

• Map 和 Object 的区别

• 出现跟产品意见相左的情况怎么处理？

• 讲出渲染10w条数据的方法（虚拟列表、滚动加载、分页加载）

• 追问： 虚拟滚动原理

• computed 和 watch的区别

• vue中key的作用，加不加key有什么区别，使用场景有哪些

例如现在有两个 按钮 <button v-if>1<button> 跟 <button v-else>2<button>，加不加key的区别

即构科技

面试官有点着急下班

• Vue2 和 Vue3 的区别
• 虚拟DOM了解多少，diff过程？
• Node 的了解程度，有哪些内置模块？fs 模块做什么
• echart 了解多少？
• 如何将数据转为关系图（面试官：使用 echart ）图片参考：echarts.apache.org/examples/zh…
• 长列表折叠式怎么优化，虚拟列表定高/不定高，闪屏问题？如何对列表内的树状结构进行懒加载？
• 数组转为tree实现（递归 + filter），如何优化
• 项目中遇到挑战性的工作
• 如果工作量特别大，时间特别紧怎么处理？

吉比特

用户增长部门

一面

• vue 项目一般使用什么路由模式，history 路由模式访问未登记的路由会报404吗，本地开发和线上的history区别？
• vue的通信方式有哪些？ 是单向还是双向的？哪些是单向的，哪些是双向的？ 【react、vue都是单向数据流哈，可以集中管理数据】
• 单向数据管理有什么好处？vuex 状态管理怎么做的
• v-for 中 key的作用？加不加key的区别？在v-for中给 item 绑定事件的方式有哪些？
• v-for中展示数组，key取id，对数组[1,2,3,4,5]排序后会不会重新渲染？为什么？
• 如何解决数组不刷新？vue.set原理？
• 深拷贝怎么实现？手写深拷贝，除了递归还有什么实现深拷贝(JSON.parse + JSON.stringify)? 实现一个递归的关键是什么？（设置递归出口）
• ...和 Object.assgin能实现深拷贝吗？
• 箭头函数用的多吗？箭头函数和普通 function 的区别？什么场景需要用到普通function ？
• 手写一个 call
• 看下平常写的代码，axios封装，怎么取消请求？（维护一个 key（url + method + params） => cancelToken 的Map结构）
• 手写节流、防抖，以及应用场景
• 函数式编程有了解吗？没有了解，对闭包、柯里化函数熟一点
• 什么是柯里化函数，有哪些使用场景，项目中有没有用到? (bind,add(1)(2,3)),
• 写了一个判断数据类型的柯里化: Function.prototype.call.bind(Object.prototype.String)
• 追问: 看你很喜欢用call、bind，有什么理由吗？没有能实现就行，语法简洁一点
• 追问：这些用法是怎么来的，平常怎么学习？多看掘金
• 跨域的方式(CORS + JSONP)，本地跨域怎么设置(webpack 的 devServer设置 proxy属性)?
• 让外部用户访问指定域名进行跨域怎么做？(Access-Control-Allow-Origin: *),前端怎么做(JSONP)，用JSONP有什么问题(需要验证来源 token 、 cookie)
• 打包工具有了解吗 webpack、vite、rollup、gulp？用 webpack 打包JS文件有什么不方便的吗？
  • 面试官引导，从构建速度入手，并讲解优化：从tree-shaking (ES6 静态编译原理)、构建缓存（cache-loader、babel-loader 开启缓存、hard-source-webpack-plugin 中间缓存）切入回答
• 用过Jenkins吗？使用Jenkins对项目流程有什么帮助？(区分 dev、test、uat、prod 环境)
• 如何规范代码? Husky + lint-staged
• 离职原因？你的职业规划是什么？

二面：

• 项目流程，如何处理多版本并行？

• 空窗期做了什么

• 如何遍历一个树？深度遍历、广度遍历？递归的复杂度多少？

• Vue了解吗，看过源码吗？你觉得虚拟DOM的源码怎么样，如何判断代码好坏？

• 了解设计模式吗？发布订阅模式核心是什么？

• 如何设计实现状态管理？

• 你的职业规划是什么？

• 如何公司项目内容跟你的职业规划冲突怎么办？

• 之前公司业务的盈利模式是什么？

• 你觉得公司业务有什么可以优化的？

• Leetcode题 写一个224.基本计算器

• 你期望薪资多少？

字节

TickTok 直播电商，微前端 react + TS

一面

（多从解决了什么问题的角度回答问题）

• 项目为什么接入 Ant Design ？

• webpack 的优化手段，分别解决了什么问题？如何分析构建速度、如何分析构建体积？

• Vue2 响应式原理的实现？

• Vue 响应式触发 getter/ setter 在哪个生命周期？一般每个生命周期你会做什么处理？

• 编程题1：实现千分位

• 编程题2：寻找树指定id下的name

const ADDRESS = [
  {
    id: 1,
    name: "北京",
    children: [
      {
        id: 11,
        name: "海淀",
        children: [{ id: 111, name: "中关村" }],
      },
      { id: 12, name: "朝阳" },
    ],
  },
  { id: 2, name: "河北省" },
];

function getNameById(id, address) {
  if (address.length === 0) return ''
  // 待实现
  let cache = []
  for (let item of address) {
    if (item.id === id) {
      return item.name;
    }
    if (item.children) {
      cache = [...cache, ...item.children]
    }
  }
  return getNameById(id, cache)
}
let res = getNameById(111, ADDRESS)
console.log(res)

• Async Promise 异步打印题，讲浏览器的事件循环 、 NodeJS的事件循环，解决了什么问题？

• 实现数组 flat (arr, depth)

二面

• Vue 和 React 的区别？

• 设计权限怎么做（接口、菜单、url、按钮）如何实现一个自定义指令？

• 为什么不把token放在cookie上？（负载均衡、CSRF攻击，有效期）

• 常见的网络攻击有哪些？XSS 、CSRF、中间人，防御手段？

• 实现富文本的时候，如何对用户的输入进行转码避免XSS？(富文本本身支持html输入，因此需要前端对< 或者>进行转义上传到服务器，重新渲染是使用innerText渲染或者自定义一套转义规则)

• 编程题1：找树的路径和 == 22

• 编程题2： 找出无序数组中的最长连续序列的长度，O(n) ,如 [7,4,2,3,1] => [1,2,3,4] => 4

• 编程题3: 20.有效的括号

• 哪个项目让你觉得比较挑战性？什么时候项目压力最大？

• 为什么入行前端

• 个人评价，你的优点和缺点

*音

• 登录鉴权怎么做? SSO?

• 前端 token 包含哪些信息？ 用户UID + 时间戳生成MD5

• 如何判断对象数据类型?为什么要调用 Object.prototype.toString ,直接用自身的 toString 可以吗?

• [].toString 和 {}.toString 为什么?

• const p = new Person() ,p.toString 的值是什么,为什么有toString方法? （其实在问原型链）

• 如何自定义 p.toString 值?

• this的指向怎么判断,全局调用一定指向window吗,严格模式下怎么表现

class Person {
	static sayName() {
		console.log(this)
	}
}
Person.sayName() // class Person

• 如何防止对象属性被修改? Object.freeze() , 重写属性的writable,面试官提示还有Object.seal()
• for-in 和 for-of 区别
• 如何让for-in只遍历当前对象key?hasOwnProperty
• 将原生对象改写成一个可迭代对象,可迭代对象有哪些
• 浏览器的事件循环,宏任务有哪些,微任务有哪些,除了定时器,promise还有呢?
• async await 是 Generator 的语法糖, Generator为什么可以做到暂停返回?
• 为什么有了宏任务还要设计出微任务?多个宏任务浏览器怎么判断优先级?例如setTimeout(fn, 10),然后在10的时候触发点击事件,fn先执行还是点击事件先执行
• Vue的$nextTick实现原理? MutationOberser 用过吗
• Vue2的响应式实现? Vue2的源码看过吗?
• vue的通信方式有哪些,有什么优缺点?
• 如何设计一个全局的发布订阅通信?
• 实现EventEmitter.once
• HTTP/2 相比于 HTTP/1.1 变化？详细讲一下多路复用?
• Node了解吗?主要做什么?
• 服务端渲染了解吗?

翼鸥教育 classin

项目是从0到1，打算实现一个*控系统。

• 项目中比较难的事

• 空窗期

• 虚拟列表定高、不定高实现

• 如何对组件UI库选型？

• SSO单点登录实现原理

• 微信公众号白屏怎么解决

• 前公司团队几人，你负责什么

• 你对功能怎么测试的？公司是怎么确保测试完成？

• 对后端有了解吗，技术栈呢，了解 SQL，REDIS吗