// 找到的是所属类原型上的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 shake 的实现,如何实现的,import/export
* 最棘手的问题:兼容性问题,你的手机没问题,他的有问题;怎么解决,模拟用户问题的情况,看日志查,错误处理系统;效率高吗?
* 封装,提升效率的方式:组件封装,公共函数封装(时间格式化等),公共功能封装(分享,登陆等),引入新的工具或技术(sass)提升效率;
* 写打包的脚本,优化打包发布脚本啥的:应该是运维写的吧,jerkins
## 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, typeof, instanceof
+ 你比较擅长的是啥?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
复制代码
* (√)浏览器打开页面: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 的组件通信方式:attr;父组件调用子组件的方法(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.arrname
off(name)
}
}
}
复制代码
### 二面
* 最近的项目,针对项目问
+ 单点登录实现,前端还是后端实现;
+ 权限管理(后端、菜单、路由、页面级;动态路由加载 自定义指令按钮级 路由导航;)
+ 前端性能优化处理
+ SSR 渲染原理,用过该技术嘛
+ 发布,上线的流程,工具等;jerkins,;docker,看过编译运行代码嘛;
* 前端安全的控制:xss,csrf,sql 注入;怎样的 token 才是安全的 token;其他保证安全的方式;
* 统一登陆处理,第三方登录对接;如何做这种系统,如果你做的话,怎么安排,怎么设计(技术选型,第三方对接,渠道对接,项目结构)
* 百来个人开发一个项目,如何协调,用啥技术(微应用吧 优点:兼容不同技术 新旧系统)
* H5 的混合开发项目:h5 和原生的通信(jsbridge)
* react native 开发:选用技术原因;类似技术有哪些
* 用到了 vue3 嘛,vue3 对 vue2 大的更新;vue3 和最新的 react 有啥区别,对比有啥优势
* 了解过微信公众号,小程序的开发嘛:两个的区别,登陆的过程;微信公众号如何判断你是谁,怎么获取 unnid
* PC 端的扫码登陆实现