2022年前端面试集锦

2022年前端面试集锦2022前端面试问题集锦 整理了自己面试前端(主要技术是vue)的各种问题,以及一些算法答案,面试回答思路等等

a公司

  • (√)自我介绍
  • (√)是否在职;离职原因;未来团队期待,主要看中啥
  • (√)职业规划,发展方向
  • (√)关注的前端方向:vue3;ts;vite;小程序
  • (√)深拷贝和浅拷贝的区别,实现方式有哪些;

deepClone 手写递归,具体实现方式,特别数据的边界处理(时间,function,正则);如何解决循环引用的问题,处理方式,判断条件终止,deepClone 如何终止的?

export function deepClone(obj, hash = new WeakMap()) {
  // 处理null或者undefined
  if (obj === null) return obj;
  // 处理日期类型
  if (obj instanceof Date) return new Date(obj);
  // 处理正则类型
  if (obj instanceof RegExp) return new RegExp(obj);
  // 普通值或函数不需要深拷贝
  if (typeof obj !== "object") return obj;
  // 对象进行深拷贝
  if (hash.get(obj)) return hash.get(obj);
  let cloneObj = new obj.constructor();
  // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
  hash.set(obj, cloneObj);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 实现一个递归拷贝
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  return cloneObj;
}
  • (√)防抖和节流的区别,使用场景;如何选择使用防抖和节流,用户体验和用户操作来区分吧;防抖的实现过程,具体实现方式,例如定时器
  • (√)ES6 常用属性
  • (√)Promise 解决地狱回调的问题;async/await 使用,异步过程同步化;
  • 一个接口+一个事件监听返回结果,实现同步的封装,onbus,具体流程,用一个 promise 解决
  • (√)http 协议的理解:1.0,1.1,2.0,3.0 的区别;强缓存和协商缓存,etag 详细,if-modify-since 详细,两者的优先级
  • (√)网络安全:xss,csrf(具体实现方式),sql 注入;防止 token 或 cookie 被窃取的方式(https 或者安全域名限制);
  • (√)vue 响应式原理:观察者订阅者模式,2.0 是 defineProproty;3.0 是 proxy
  • (√)虚拟 dom 原理
  • (√)diff 算法基于啥算法实现的,原理
  • (√)vue 组件传值方式,兄弟组件的传值
  • created 为啥不能用箭头函数定义?this 指向不对;如果用箭头函数定义,this 是啥值
  • (√)前端性能优化思路,具体实现

b公司

  • 一面
    • (√)自我介绍,离职原因
    • (√)前端期间,印象深刻的问题
      • H5 兼容性问题,头部兼容性处理(H5 头部,混合 APP 头部,微信头部,刘海屏,华为内嵌键盘)
      • 定制化组件开发:改源码;基于组件本身,二次开发;造轮子,重写
      • 虚拟列表功能实现
    • (√)浏览器
      • 从输入 url 到浏览器渲染经过了哪些流程
      • 强缓存,协商缓存;两种方案优势缺点;分别使用情况,使用条件
    • (√)nexttick 实现原理,怎么实现 dom 循环完之后回调(Promise.then、MutationObserver、setImmediate、setTimeout)
    • (√)js 事件循环机制
    • (√)前端性能优化,如何做的
    • (√)写博客,最近写了些啥
    • (√)看书吗,看啥技术视频
    • (√)webpack 个性化配置:拆包;less,sass 处理;打包加速优化;dll plugins;图片资源压缩
  • 二面
    • (√)自我介绍
    • (√)离职原因
    • (√)H5 混合开发
    • (√)性能优化处理
    • (√)最近做的项目,做的啥,介绍项目

c公司

  • (√)呆过的公司的团队规模介绍,前端人员规模,自己承担的职责
  • (√)前端性能优化:具体实现,优化指标等,骨架屏优化;减少重排或者重绘等(骨架屏,图标 resize,v-show 的处理)
  • (√)白屏时间的计算,优化的衡量指标,如何评价优化好与不好,优化结果对比等等
  • (√)比较关注的性能指标:包大小,请求数量,浏览器缓存合理使用,页面渲染阻塞情况
  • (√)对自己简历写的东西要熟悉,也要能扛得住问,问的时候会一步一步的深度挖掘,提问
  • 动画,做的比较少,也没啥好说了
  • 如何衡量组件封装的好与不好:扩展性;如何设置扩展性比较好(预留插槽);
  • code view,代码审核,看别人的代码;组件的分层和分治
  • 测试脚本,边界测试衡量
  • 写过 react native,感觉咋样,哪些比较难:底层 java 编写;用的比较多的,图表和列表
  • (√)uniapp 写过一些,小活动
  • (√)最近在写 vite,ts,学习啥新的技术
  • (√)webpack 的版本,相关配置,对 webpack 的理解
  • (√)tree shaking 的实现,如何实现的,import/export
  • 最棘手的问题:兼容性问题,你的手机没问题,他的有问题;怎么解决,模拟用户问题的情况,看日志查,错误处理系统;效率高吗?
  • 封装,提升效率的方式:组件封装,公共函数封装(时间格式化等),公共功能封装(分享,登陆等),引入新的工具或技术(sass)提升效率;
  • 写打包的脚本,优化打包发布脚本啥的:应该是运维写的吧,jenkins

d公司

  • 一面
    • 自我介绍
    • html header 头部标签;rem 实现,一般 H5 使用,PC 没咋使用(media);
    • (√)两栏布局实现:flex;定位;grid;float 布局(右边能自适应嘛)
    • (√)flex: 1 代表啥(1 0 width);
    • (√)H5 项目:抽取公共样式,引入 sass,实现方案;css name 的规范;不同颜色主题包的实现方案
    • (√)项目难点:封装哪些组件?你的上传和默认的上传有哪些区别?封装过程中,如何设计组件?透传 props 如何做的,默认组件的参数如何处理的,$attr
    • (√)大数据性能渲染问题:分页加载,虚拟 dom 实现;接口处理,相当于避开了问题;虚拟列表,可以承受几万条
    • (√)性能优化,白屏的处理:百度统计优化(defer,async);缓存(强缓存,协商缓存),CDN,CDN 返回的响应头;优化工具,分析工具;
    • (√)koa 写过服务端嘛
    • (√)复杂的权限管理如何实现的(菜单权限,角色权限,路由权限,页面内部权限);权限的封装(and 和 or 多条件处理);有没有统一的权限处理
    • (√)vue3.x 和 2.x 区别,体验:Composition API;TypeScript 优点,解决了哪些问题
    • 什么逻辑适合放在 Composition API;什么适合放在页面
    • (√)vuex 用过吗?组件内部,公共变量函数啥的
    • vite,webpack,babel 看过源代码吗?看过相关的书,如 js 红宝书?js 如何学的
    • JS 实现:菜单 ul,li,li 的第三项点击实现字体变为红色;querySelectAll(),返回对象,[0]是数组;
    • js 如何判断是不是数组:Array.isArray(arr);arr instanceof Array;Object.prototype.toString.call(arr) === ‘[object Array]’
    • 你比较擅长的是啥?PC 端和 H5 主要差异是啥?
    • uniapp 跨端方案如何
    • 周边生态(webpack,nodejs,sass,babel)等熟悉源码,做二次开发,还是只是单纯使用
  • 二面
    • 自我介绍
    • 团队有哪些成长,吸收了哪些营养
    • 写代码:求平均数
// 求平均时间
var arr = ["8:01", "9:30", "11:50"];

const average = (arr) => {
  let minutes = 0;
  arr.forEach((o) => {
    let a = o.split(":");
    minutes = minutes + a[0] * 60 + parseInt(a[1]);
  });
  minutes = minutes / arr.length;

  let hour = Math.floor(minutes / 60);
  let minute = minutes - 60 * hour;
  console.log(hour, "...", minute);

  return `${hour}:${minute}`;
};

console.log(average(["8:01", "9:30", "11:50"])); // 9:47

感谢评论区[MoTou]提供的如下方法,更加简洁:

var arr = ['8:01', '9:30', '11:50']
let res = 0
arr.forEach(el => {
    res += new Date('2000/01/01 ' + el).getTime()
})
const a = new Date(res / arr.length)
console.log(`${a.getHours()}:${a.getMinutes()}`)
  • (√)浏览器打开页面:cookie 的理解;domain(域名,顶级域名), path, expires(session), http-only
  • 接口服务端定义的:接口文档,沟通交流;后端定义接口不规范咋办?数据的处理由前端,还是后端处理;如何定义规划的
  • 封装的公共组件和公共函数有哪些人使用,提出了哪些问题?

e公司

  • 一面
    • vue style scoped 属性作用是啥,如何是样式仅在当前模块生效
      • 作用:实现组件的私有化,不对全局造成样式污染,表示当前 style 属性只属于当前模块
      • 原理:打包之后,编译成特定样式,data-v-[hash],即 CSS 带属性选择器
    • (√)token 失效刷新如何实现的,token 和登录的处理
    • (√)角色权限的处理,路由守卫导航,动态路由匹配
    • (√)脚手架,一般会改哪些配置;压缩的处理:插件的压缩处理,gzip 压缩,代码压缩
    • (√)代码层级的性能优化
    • ES6,promise 链式调用如何实现;promise.then().catch().then().catch(),有报错,如何实现,走的流程
    • (√)常用的深浅拷贝;手写深拷贝如何实现;递归调用,处理特殊的边界问题;防止死循环;解决引用递归问题
    • (√)ES6 常用属性和方法
    • async/await 的使用,和 promise 使用的区别
      • 错误捕捉方式:promise 使用.catch;async/await 可以.then.catch,也可以 try/catch
      • 调用方式:promsie 连续调用,链式调用;async/await 简洁易懂,异步操作同步化
    • (√)js 事件循环:nodejs 里面的,koa 用的多吗
    • 让元素看不见:dispaly:none;opacity:0;
    • 四个 div,宽度 25%,第四个会被挤下去,不考虑宽高的问题?
    • (√)http 协议的理解:1.1 和 2.0 的区别;长链接如何做到的,分成更小的帧,二进制传输
  • 二面
    • 了解过哪些媒体技术:直播,弹幕,通信
    • 了解及时通信嘛:如微信 web 端,websocket,消息推送等,有没有了解过
    • 做过一些浏览器兼容性问题,手机端的:微信浏览器,IOS safiri,谷歌内核浏览器
    • 小程序,uniapp使用过嘛

f公司

一面

  • H5 开发,如何做真机调试
    • react native 可以进行真机调试:usb 调试
    • vConsole / Eruda 查看报错信息
    • Fildder(手机和 fildder 链接同一个网络,然后手机开启手动代理并安装证书)
    • android 手机 chrome 浏览器,开启 usb 调试,chrome://inspect/#devices
    • Charles 代理调试
  • (√)移动端 1px 的问题
  • 小程序开发,uniapp 熟悉嘛?
  • 小程序 api 有 setData 方法,为啥要合并操作,减少操作次数的原因
    • 会导致卡顿,操作反馈延迟严重,渲染结果不实时
    • 当数据量过大时会增加脚本的编译执行时间,占用 WebView JS 线程
  • (√)性能优化,具体介绍一下:图片优化,指的是减少图片体积;
  • (√)http1.1 和 2.0 的区别
  • 图片上传预览:图片存在本地,通过 base64 转化;云库实现,用到了吗?
  • (√)webpack 性能优化:并行压缩;dllplugin;splitchunk;混淆压缩;happypack 多线程;includes 减少范围;cache 属性,对性能优化作用最大,改善构建速度
  • (√)js 数据类型
  • 遍历数组的方式:forEach;for in;for of;
    • forEach 和 map 的区别;
      • map 不写 return,默认返回 undefined,返回一个数组长度的 undefined 的数组;
    • forEach 中断循环
      • 用数组的方法,return false;
      • 数组的 api,使用 some 或者 every 实现
      • 使用 for 循环或者 for in 代替
      • 使用 throw 抛出异常
  • 遍历对象的方式
    • for in:主要用来遍历对象(for keys in obj)
      • 遍历自身和继承的可枚举属性(延续原型链遍历出对象的原型属性)
      • 有什么问题:要使用 hasOwnProperty 判断,只处理自身的,不处理继承的
    • for of: ES6 新增的,遍历所有数据结构的统一的方法
      • 只要部署了 Symbol.iterator 属性,就被视为具有 iterator 接口,就可以用 for…of 循环遍历它的成员
      • 包括数组、Set 和 Map 结构、某些类似数组的对象(比如 arguments 对象、DOM NodeList 对象)、Generator 对象,以及字符串
    • Object.keys:返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)
    • Object.getOwnPropertyNames(obj):返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)
    • Object.getOwnPropertySymbols()
    • Reflect.ownKeys(obj)遍历:返回一个数组,包含对象自身的所有属性,不管属性名是 Symbol 或字符串,也不管是否可枚举
  • (√)vue 的组件通信方式:
    a t t r ;父组件调用子组件的方法( attr;父组件调用子组件的方法(
    emit;$refs)
  • vue-router 路由参数,从一个商品跳入到另一个商品,路由参数变化,但是路由不变化,渲染会出现的问题,
    • 原因:同一个组件不会挂载两次
    • 解决办法:
      • 监听路由参数变化,watch 实现
      • 组件内的路由导航:
        • 路由独享守卫,beforeEnter
        • 组件内的守卫 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave
  • 手写题:js 原型链
// 构造函数的原型
// function的原型
// object的原型
function Foo() {}

const foo = new Foo()
Foo.__proto__ = ?
foo.__proto__ = ?
Foo.prototype.__proto__ = ?
  • 手写题:发布订阅者模式
class EventEmitter {
  constructor() {
    this.arr = {}
  }

  on(name, fn) {
    this.arr[name] ? this.arr[name].push(fn) : this.arr[name] = [fn]
  }

  off(name, fn) {
    if(this.arr[name)) {
      if(fn) {
        this.arr[name] = this.arr[name].filter(o => o!==fn);
      } else {
        delete this.arr[name]
      }
    }
  }

  once(name, fn) {
   this.arr[name] = fn
  }

  emit(name, params) {
    // this.$emit('change', params)
    if(Array.isArray(this.arr[name]))
    {
      this.arr[name].forEach(fn => {
      fn(params)
    })
    } else{
      this.arr[name](params)
      off(name)
    }
  }
}

二面

  • 最近的项目,针对项目问
    • 单点登录实现,前端还是后端实现;
    • 权限管理(后端、菜单、路由、页面级;动态路由加载 自定义指令按钮级 路由导航;)
    • 前端性能优化处理
    • SSR 渲染原理,用过该技术嘛
    • 发布,上线的流程,工具等;jerkins,;docker,看过编译运行代码嘛;
  • 前端安全的控制:xss,csrf,sql 注入;怎样的 token 才是安全的 token;其他保证安全的方式;
  • 统一登陆处理,第三方登录对接;如何做这种系统,如果你做的话,怎么安排,怎么设计(技术选型,第三方对接,渠道对接,项目结构)
  • 百来个人开发一个项目,如何协调,用啥技术(微应用吧 优点:兼容不同技术 新旧系统)
  • H5 的混合开发项目:h5 和原生的通信(jsbridge)
  • react native 开发:选用技术原因;类似技术有哪些
  • 用到了 vue3 嘛,vue3 对 vue2 大的更新;vue3 和最新的 react 有啥区别,对比有啥优势
  • 了解过微信公众号,小程序的开发嘛:两个的区别,登陆的过程;微信公众号如何判断你是谁,怎么获取 unnid
  • PC 端的扫码登陆实现
  • 团队前端人数,任务分工;团队技术栈规划;团队前端,代码质量如何管控;

三面

  • 针对项目:做了哪些开发工作;个人价值体现最大的地方;大数据量的问题处理(分页,分片,虚拟滚动,关键字远程搜索,异步加载);
  • 前端美工设计:专门的 UI;Ui 定义了一套自己的组件库规范
  • 未来的职业发展定位,职业规划
  • 现在项目面对的客户群体,
  • 自己评价性格:中性,外向,内向等
  • 工作内容:除了技术本身,toB 行业,会面临各式各样的客户,会有不同的沟通方式和交流,会有挑战;怎么平衡技术和客户需求
  • 前后端联调,任务划分,有明显的界限划分嘛

g公司

  • (√)new 操作符具体干了啥?
  • (√)箭头函数与普通函数的区别
  • (√)数组常用方法
    • push;pop;shift;unshift;slice;splice
    • indexOf;includes;find
    • reverse;sort;
    • join;split;concat;
    • some;every;forEach;filter;map
    • reduce;reduceRight
  • reduce 作用
// accumulator-累加器;currentValue-当前值;currentIndex-当前值索引;initialValue-初始值;
array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)

// 1. 数组求和
let total = [1, 2, 3, 4].reduce((acc, cur) => (acc += cur), 90);

// 2. 数组去重 [1,2,4,null]
// 2.1 filter
let arr = [1, 2, 2, 4, null, null].filter((item, index, arr) => arr.indexOf(item) === index);
// 2.2 new Set
let arr = [...new Set([1, 2, 2, 4, null, null])];
// 2.3 reduce
let arr = [1, 2, 2, 4, null, null].reduce((acc, cur) => {
    return acc.includes(cur) ? acc : acc.concat(cur);
}, []);

// 3. 扁平化多维数组 [0, 1, 2, 3, 4, 5, 6, 7]
let arr = [0,[1],[2, 3],[4, [5, 6, 7]]]
// 3.1 flat
arr.flat(Infinity);
// 3.2 reduce
let dimensionReduction = function (arr) {
    return arr.reduce((acc, cur) => {
        return acc.concat(
            Array.isArray(cur) ?
            dimensionReduction(cur) :
            cur
            );
    }, []);
}
dimensionReduction(arr);

// 4. 求字符串中字母出现的次数
const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
const res = str.split('').reduce((acc, cur) => {acc[cur] ? acc[cur]++ : acc[cur] = 1; return acc;}, {});

// 5. 数组转对象 按照id 取出stream
var streams = [{name: '技术', id: 1}, {name: '设计', id: 2}];
var obj = streams.reduce((acc, cur) => {acc[cur.id] = cur; return acc;}, {});
  • 手写 reduce
Array.prototype.myReduce = function (cb, initValue) {
  const array = this; // 获取数组
  let pre = initValue || array[0];
  const startIndex = initValue ? 1 : 0;
  for (let i = startIndex; i < array.length; i++) {
    const cur = array[i];
    pre = cb(pre, cur, i, array);
  }
  return pre;
};
  • (√)web 攻击方式:攻击目标,预防方式
    • XSS (Cross Site Scripting) 跨站脚本攻击
    • CSRF(Cross-site request forgery)跨站请求伪造
      • token 实现安全的原理
    • SQL 注入攻击
  • (√)http1.0,htt1.1,http2.0,http3.0 的区别
    • http 是有状态还是无状态的,请求有无区别(无状态,携带辅助信息)
  • (√)Restful API 请求方式
    • get 和 post 请求的区别
  • (√)前端性能优化
  • (√)async 和 defer 区别;prefetch 和 preload 区别
  • (√)vue diff 算法
    • 比较只会在同层级进行, 不会跨层级比较:节点类型不同,直接用新的替换旧的;相同,就比较子节点
    • 在 diff 比较的过程中,循环从两边向中间比较
  • (√)vue 虚拟 DOM 的作用
    • 不会进行回流和重绘;
    • 对于频繁操作,只进行一次对比差异并修改真实 DOM,减少了真实 DOM 中多次回流重绘引起的性能损耗;
    • 有效降低大面积的重绘与排版,只更新差异部分,进行渲染局部;
  • (√)vue key 的作用:高效的更新虚拟 dom
  • (√)v-if 和 v-for
  • (√)JS 事件循环机制
    • 同步、异步(宏任务、微任务);
    • 一段代码,输出执行顺序
  • (√)项目错误处理
    • 后端接口报错:axios 的响应拦截器处理
    • 代码逻辑错误
    • 对象属性未定义错误处理:可选链 obj?.name
    • 错误拦截:try、catch
    • vue 内置错误处理机制:errorHandler;errorCaptured
  • (√)树结构数据中找和为 n 的路径[算法]

给定一个二叉树和一个数字 n,判断二叉树中是否有一个路径上的数字之和等于给定的数字 n

function hasPathSum(root, sum) {
  if (!root) {
    return false;
  }
  if (!root.left && !root.right) {
    return sum === root.val;
  }
  return (
    hasPathSum(root.left, sum - root.val) ||
    hasPathSum(root.right, sum - root.val)
  );
}
  • (√)保证 3 个请求结果顺序显示[开放题]
    • 粗暴型:顺序请求,一个请求完了再请求另一个
    • 优化型:promise.all 一起请求,通过函数控制结果顺序显示
      • 简单通过 flag 标志实现顺序显示
      • 写一个函数控制顺序显示,链式调用

h公司

  • 一面
    • 盒模型;BFC;
    • 高阶函数作用:柯里化(curry);组合函数(compose);管道函数(pipe)
    • 页面自适应方案,flexible 本质
    • WebSocket 了解嘛?
    • 跨域问题解决:JSONP;iframe;postMessage;CORS;Proxy;WebSocket
    • vue 双向数据绑定:数据劫持结合发布者-订阅者模式
    • vue 组件通信方式
    • vue 生命周期
    • vue3.0 特性
    • 扩展运算符的应用(ES6)
    • 浏览器解析流程
  1. URL 解析
  2. DNS 查询
  3. TCP 连接(三次握手) 第一次握手:建立连接时,客户端发送 syn(建立联机)包到服务器,并进入 syn_send 状态,等待服务器确认; 第二次握手:服务器收到 syn 包,确认包信息,同时自己也发送一个 syn + ack(确认)包并进入 syn_recv 状态; 第三次握手:客户端收到 syn+ack 包,向服务器发送 ack 包,发送完后,客户端和服务器都进入 established 状态,完成三次握手;
  4. HTTP 请求
  5. 服务器响应请求
  6. 页面渲染 解析 HTML,构建 DOM 树(script 会下载 并解析 js,异步下载完执行是仍会阻塞 DOM 解析) 解析 CSS(link 或 style 标签),生成 CSS 规则树(HTML 和 CSS 解析相互独立) 合并 DOM 树和 CSS 规则,生成 render 树 布局 render 树( Layout / reflow 回流),负责各元素尺寸、位置的计算 绘制 render 树( paint 重绘),绘制页面像素信息 浏览器会将各层的信息发送给 GPU,GPU 会将各层合成( composite ),显示在屏幕上
  • 二面
    • 定制化组件是哪些?
    • 组件封装,提升效率,考虑组件化,发布远程通用
    • 性能优化之 Performance 面板
    • ES5 和 ES6 继承的区别
    • H5 混合开发 JSBridge 通信
    • h5 手机端兼容性

i公司

  • 一面
    • H5 混合开发:客户端交互,APP 交互,微信交互;jsbridge 通信,如何封装的,看过吗
    • 大数据处理:分页;虚拟列表;后端远程搜索
    • 前端性能优化
    • 首页白屏解决:缓存;骨架屏;重绘,重排;减少包大小;解决阻塞;
    • webpack 打包优化方式
    • SPA 单页应用;SSR 服务端原理(NuxtJS);webpack 热更新
    • NextTick 的理解
    • keep-alive 动态组件
    • vuex 模块化实现
    • 大数加法[算法]

实现两个字符串型数字的加法运算,返回字符串型的数字的和

注意:无法直接对传入参数进行转换成数字

思路:一位数一位数相加,采用隐式转化的方式相加

sum("1233", "233"); // '1466'

function sum(num_str1, num_str2) {
  // 字符串转字符数组
  const num_arr1 = num_str1.split("");
  // 字符串转字符数组
  const num_arr2 = num_str2.split("");
  // 竖式加法计算次数
  let sum_length = Math.max(num_arr1.length, num_arr2.length);
  // 求和结果
  const sum = [];
  // 进位标志位
  let CF = 0;
  // 循环语句为什么加CF进位存在判断呢,因为当最高位产生进位,(如 999 + 9999)
  // 计算到千分位9的时候,并且没有更多数要参与运算时,仍然需要进位参与一次运算,否则丢失进位。
  while (sum_length-- > 0 || CF) {
    // 求和,注意数组长度不够,按0算
    let temp =
      Number.parseInt(num_arr1.pop() || 0) +
      Number.parseInt(num_arr2.pop() || 0) +
      CF;
    if (temp >= 10) {
      temp %= 10; // 取个位数
      CF = 1; // 产生进位(对于加法,最多产生1个进位)
    } else {
      CF = 0; // 未产生进位
    }
    sum.unshift(temp); // 记录求和数据(从头插入)
  }
  return sum.join("");
}
  • 二面(针对项目提问)
    • 组件的定制化改造,二次封装还是自己写的
    • select 分页实现:滚动,分片,远程搜索,虚拟列表,数据处理部分展示
    • 单点登陆的实现;
    • 权限管理的实现;自定义指令控制操作权限,按钮级别;数据权限实现
    • 大量数据性能优化;表格遇到的问题,怎么解决的;
    • 前端性能优化
      • 哪个优化提升最明显;
      • 首屏渲染为啥那么长,包为啥那么大,如何优化;
      • 如何实现 ssr
    • 项目中遇到的问题,难题
      • pwa 使用场景;
      • 和安卓通信交互,和原生的相机,相册如何交互的;如何获取相册图片;照片 js 如何拿到的;input 和原生的相册如何交互,串起来;js 调用原生的相机
    • 微信账号和手机号账号绑定实现:微信提供 uuid,绑定原理和过程
    • webpack 构建过程,plugin 的实现
    • 对未来的团队和技术有啥要求,职业规划类的吧
    • 开发方向,自我定位

如何实现一个拖拽指令?

vue.js 自定义指令(拖拽、拖动、移动) 指令 v-drag

j公司

  • 挑战性项目;项目难点

  • 虚拟 dom 作用:多次数据变化,一次更新;怎么收集数据变化;

  • 对象的深拷贝实现,递归调用死循环问题如何解决

  • 浏览器缓存对比:cookie;localStorage;sessionStorage

  • 权限管理实现:咋实现的?具体怎么处理,代码实现

    • 路由权限;菜单权限(路由守卫导航);按钮权限(v-if,自定义指令);接口权限
  • 单点登录 SSO 实现

  • vue2.0 和 vue3.0 区别

    • 2.0
      • 双向数据绑定:Object.defineProperty
    • 3.0
      • 双向数据绑定:Proxy,Reflect
      • Composition API:更好的逻辑复用和代码组织
      • Fragment:可以用多个根元素
      • Teleport(任意门)
      • 使用 Typescript 开发
      • 重构 Virtual DOM,修改了 diff 算法
  • v-model 在 2.0 和 3.0 里面的区别,实现原理

    • 破坏性的: 当用在 自定义组件 上的时候,v-model 的 prop 与 event 的默认名已变更:
      • prop: value -> modelValue;
      • event: input -> update:modelValue;
    • 破坏性的: v-bind 的 .sync 修饰符以及 model 选项已删除,取而代之的是 v-model 的一个参数;
    • 新的: 现在可以在一个组件上使用多个 v-model 来绑定数据了;
    • 新的: 新增了自定义 v-model 修饰符的功能。
  • flex 弹性布局

    • flex:1,等价于 0 1 auto,各个参数含义
    • 实现纵向三栏布局,中间 flex:1,如果中间宽度大于外层宽度,怎样表现?
  • z-index 无效问题:生效范围;什么情况下会失效,边界条件

    1. 父级元素溢出隐藏或者不显示:父元素设置了 overflow:hidden /display:none/ 等,那么子元素如果在父元素外部绝对定位,那么调节子元素 z-index 可能不会显示
    2. 父级元素层级低,z-index 被覆盖
    3. 没有设置定位(position)属性
    4. 父级元素 position 属性为 relative
    5. 含有浮动(float)属性
    6. IE 不兼容
  • 移动端 1px 边框

    1. 针对 IOS:border:0.5px solid #E5E5E5
    2. 使用边框图片
    3. 使用 box-shadow 实现:试了下,看不出效果
    4. 使用伪元素:设置绝对定位,和父元素左上角对齐。将伪元素的长和宽先放大 2 倍,然后再设置一个边框,以左上角为中心,缩放到原来的 0.5 倍
    5. 设置 viewport 的 scale 值
  • 协商缓存和强缓存使用场景

    1. 强缓存:访问服务器获取到数据后缓存下来,过期时间之内不会再重复请求,而是直接从本地缓存数据库读取

    • http1.0:Expire 相应头。expires 表示未来资源会过期的时间

    • http1.1:Cache-Control。max-age=xxx(缓存的资源将在 xxx 秒后过期);no-cache(需要使用协商缓存来验证是否过期);no-store(不可缓存)

    1. 协商缓存:每次读取数据都要和服务端通信,增加缓存标志。如果不匹配,表示资源更新,返回新数据;匹配则表示没有更新,返回 304

    • http1.0:Last-Modified;If-Modified-Since;弊端是时间的精确度只能在秒,资源没变但时间变了,也会更新

    • http1.1:Etag; If-None-Match

    1. 常见情况

    • 输入 url 回车进入:根据实际缓存策略处理,没有设置 no-cache 或 no-store,默认先走强制缓存路线
    • 按钮刷新,F5 刷新,右键重新加载:将 cache-control 的 max-age 直接设置成了 0,让缓存立即过期,直接走协商缓存路线
    • ctrl+F5 强刷:浏览器会强行设置 no-cache,强制获取最新的资源
  • vue-router 实现原理

    • 怎么知道页面变化了,更新页面;3.0 通过响应式,监听变量,响应机制;局部刷新
    • hash 模式:hashchange
    • history 模式:pushState 和 replaceState
  • 快排实现:核心递归[算法]

//快排实现
var a = [3, 2, 8, 4, 5, 6, 7, 1];
//递归调用
QuickSort(a, 0, a.length - 1);
console.log(a.toString());

function QuickSort(a, l, r) {
  if (l >= r) {
    return;
  }
  var target = a[l];
  var left = l,
    right = r;

  while (left < right) {
    while (left < right && target <= a[right]) {
      //B往左走寻找比挖出来的第一个萝卜轻,且位置在A右边的萝卜
      right--;
    }
    a[left] = a[right];
    while (left < right && a[left] <= target) {
      //A要往右寻找比一个萝卜重,且位置在B左边的萝卜
      left++;
    }
    a[right] = a[left];
  }
  a[left] = target;
  QuickSort(a, l, left);
  QuickSort(a, left + 1, r);
}

k公司

  1. 自我介绍
  2. 工作中遇到的难点
  3. 服务端渲染和客户端渲染的区别,NuxtJS 的实现
  4. 从输入一个 URL 地址到浏览器完成渲染的整个过程
  5. 计算机网络浏览器缓存:强缓存和协商缓存
  6. 前端性能优化
  7. 跨域方式
  8. css 选择器及优先级
  9. flex 布局属性及意义;水平垂直居中实现
  10. JS 事件循环机制
  11. js 作用域和作用域链
  12. 闭包及其作用
  13. let,const 和 var 区别
  14. 对象的深拷贝:深拷贝与浅拷贝的区别?
  • 浅拷贝:创建新的数据,这个数据有着原始数据属性值的一份精确拷贝
    • 基本类型,拷贝的就是基本类型的值
    • 引用类型,拷贝的就是内存地址(共享)
    • 方式:Object.assign;slice;concat;拓展运算符
  • 深拷贝:开辟一个新的栈,对应两个不同的地址
    • 方式:_.cloneDeep();jQuery.extend();JSON.stringify();循环递归实现
    • 递归碰到循环调用问题,死循环,如何解决?
      • 尾递归优化
      • 循环重写
  1. ES6 常用方法和属性
  • 类 class,extends
  • 模块化 import/export
  • 箭头函数
  • 模板字符串
  • 函数参数默认值
  • 解构赋值
  • 扩展运算符(…)
  • let, var, const
  • Promise, .then, .catch, .finally, .all(), .race,
  • async/await
  • includes;Object.values();Object.entries()
  1. props 传值无法更新问题

通过 props 传值不随着变化而变化,原因及解决方法(实际问题)

  • watch 监听:immediate;deep
  • this.$set()
  • 使用 v-if
  • Object.assign()
  1. Promise 常用方法
  • Promise
    • 异步编程的一种解决方案,解决地狱回调
    • 三种状态:pending(进行中);fulfilled(已成功);rejected(已失败)
    • then,catch,finally
    • all,race,allSettled,resolve,reject,try
  • async/await:Generator(yield,next) 的语法糖
  1. 手写 Promise.all;Promise.all 和 Promise.race 的区别?
// Promise.all
export const all = (promiseArr) => {
  let result = [];
  let count = 0;
  return new myPromise((resolve, reject) => {
    for (let i = 0; i < promiseArr.length; i++) {
      Promise.resolve(promiseArr[i]).then(
        (res) => {
          result[i] = res;
          count++;
          // 全部promise执行成功之后才resolve
          if (count === promiseArr.length) {
            resolve(result);
          }
        },
        (err) => {
          reject(err);
        }
      );
    }
  });
};

// Promise.race
export const race = (promiseArr) => {
  return new myPromise((resolve, reject) => {
    for (let i = 0; i < promiseArr.length; i++) {
      Promise.resolve(promiseArr[i]).then(
        (res) => {
          // 只要有任何一个promise状态变更就resolve
          resolve(res);
        },
        (err) => {
          reject(err);
        }
      );
    }
  });
};
  1. 爬楼梯方式
// 1 1
// 2 2
// 3 4 111 12 21 3
// 4 1111 121 112 211 13 31 4 22
// 四级台阶有多少种方法?
const sum = (n) => {
  if (n == 1 || n == 2) {
    return n;
  }
  return sum(n - 1) + sum(n - 2);
};

其他

  1. 职业规划,对架构师的理解
  2. 工程化,组件化,模块化
  3. 渐进式 Web 应用(PWA)
  4. WebAssembly
  5. 重绘和重排
  6. jquery 和 vue 操作 dom 渲染的区别
  • 区别:操作 dom 和操作数据
  • 实现及时:虚拟 dom;diff 算法,渲染的优化处理 diff 算法
  1. 如何实现发包之后改前端配置,不发布也可以更新
  2. 元素在页面隐藏的方式
  • display:none
  • visibility:hidden
  • opacity:0
  • 设置 height、width 模型属性为 0
  • position:absolute,将元素移出可视区域
  • transform 偏移:同上
  • clip-path:裁剪
  1. CSS 高度塌陷的原因;如何解决(BFC)

    • 原因:
      • 子元素浮动,父元素就会塌陷
      • 当子元素添加了 positive:absolute 属性,父元素高度塌陷,高度为 0
    • 解决:
      • 触发 BFC:overflow hidden
      • 清除浮动:clear both;after 伪元素
  2. 敏捷开发的理解

  3. 遇到的问题,怎么解决的

  4. 自己估计的工作量和实际不符,完不成的情况?

  5. 频繁变更了需求,会咋办,改咋处理?

  6. webGL 三维场景渲染优化

  7. 改变 this 指向的方式:apply,call,bind()

  8. 有一个请求,没有收到数据,如何排查:postman,联调方式,日志工具

  9. 如何节省沟通成本

    • 和 HR 有需求不同的讨论,如何 battle
    • 和后端接口对接,如何确定哪些后端实现,那些前端实现:不能靠感觉,标准是啥?如性能,用户体验等等
    • 会对需求提出意见吗?有反驳过产品的需求吗
  10. 数据埋点如何实现

  11. 模块化方式,import 和 require 区别

    • CommonJs (典型代表:node.js 早期):用于服务端
      • 都运行在模块作用域,不会污染全局作用域
      • 同步加载的,即只有加载完成,才能执行后面的操作
      • 首次执行后就会缓存,再次加载只返回缓存结果,如果想要再次执行,可清除缓存
      • require 返回的值是被输出的值的拷贝,模块内部的变化也不会影响这个值
    • AMD (典型代表:require.js):异步模块定义
      • 所有依赖模块的语句,都定义在一个回调函数中,等到模块加载完成之后,这个回调函数才会运行
      • require
    • CMD (典型代表:sea.js)
    • ES6 的 Module:import/export
      • CommonJS 和 AMD 模块,都只能在运行时确定这些东西
      • ES6 设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量
      • import()允许您仅在需要时动态加载模块,而不必预先加载所有模块
  12. 前端性能优化:评价指标;具体优化实现;

  13. webpack 配置,优化实现;核心概念:plugin,loader;loader 实现原理,如对 css 的处理解析

今天的文章2022年前端面试集锦分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/23406.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注