前言

收获了很多大佬们的经验分享和知识总结,现在来一份诚意满满的回馈,将2020年腾讯前端面经进行一次大整理,同时也会提供答案,希望大家都能参与进来,2021年春招顺利~

答案提供在 https://github.com/Chocolate1999/Front-end-learning-to-organize-notes (小狮子前端の学习整理笔记),别忘了star ┗|`O′|┛ 嗷~~

最后更新时间:2020/1/6 下午5点 持续更新中…

部门相关

整理从2020年2月份到年底的腾讯面经「仅校招」,数据并不一定真实,仅作参考。

部门 上岸次数 面经次数 备注
CSIG 4 5
PCG 6 13
WXG 3 5
TEG 1 2
CDG 1 1

计算机网络

  • 常见状态码知道哪些? 304 403 405分别是什么
  • http状态码 302 504分别代表什么意思
  • 响应状态码,200(from disk cache),200(from memory cache),304的区别。
  • POST和GET 的区别,除了长度,安全其他的
  • http介绍一下,为什么http2.0不普及,websocket的基本指令,性能
  • 爬虫,网站如何去做防止,如何判断
  • tcp和udp区别
  • 那如果让你做一个视频聊天软件,你用tcp还是udp?为什么?
  • tcp是怎么去保证可靠传输的?
  • tcp三次握手
  • tcp握手结束第一次的包有多大
  • TCP的超时重传
  • TCP为什么是三次握手呢?
  • TCP如何去终止之前发送报文的?
  • tcp拥塞控制(四部分)
  • CDN的原理是什么
  • dns过程
  • HTTP协议,1.1和2.0的区别,了解哪些请求方法,请求/响应头部
  • 为什么项目不用https以及http与https的区别
  • https的加密过程以及如何防止中间人攻击
  • 为什么tcp连接是可靠的(校验和重传)
  • 通过什么机制处理服务端接收数据乱序丢包等(滑动窗口和拥塞控制)
  • 在TCP建立连接后,路由器发生了什么变化
  • http的header和body 讲的很详细 请求方式 请求头内容 状态码
  • http2相关问题。在http1的时代,会经常把很多资源部署在不同域名下,为什么?(有可能是减少cookie的传输量)
  • TCP和UDP的区别和场景,又问如果让你设计一个既保证准确性速度又快的协议,怎么做
  • OSI7层模型 每层大致用处及相关协议
  • https,http2.0,websocket(提了一下),TLS握手,怎么知道数字证书的真假
  • http2.0有了解吗?有抓包看看到底什么个情况吗?
  • cookie session区别
  • session怎么保存、有多台服务器,sessionid 怎么找
  • 为什么cookie可以用来保存登录状态
  • http头部chunk
  • get 发一个 tcp 包,post 发两个 tcp 包,这种情况是一定的吗,什么情况下不是这样
  • post 如何把数据放到 url 中
  • 一个 http 的报文的头和 body 之间有什么分隔
  • 出现 304 的场景,通过什么协议头来确认(304 的响应头)
  • websocket原理,如何实现,和http报文结构有哪些不同(注意是结构不是特性)
  • cookie,localStorage,sessionStorage 使用和区别
  • ca验证
  • wireshark能抓包到https请求的内容吗
  • https怎么预防中间人攻击
  • http请求的过程中怎么知道数据已经发送完毕要断开连接,怎么断开
  • 网络的七层模型
  • get post head 这些请求方式有什么不同
  • 了解轮询和websocket吗?
  • 说一下websocket的四个阶段(websocket不能使用时要怎么处理、使用什么方式来代替websocket)

操作系统

  • 进程和线程
  • 进程之间的通信知道吗?node中自己实现过哪种通信?(说了管道,消息队列,套接字,信号量啥的,表示自己不会node,没实现过,说了浏览器的多个tag之间也属于进程通信,表示不满意,不要说应用层上的东西)

浏览器工作原理

  • 同源是什么意思,除了那三个没有了么
  • 事件冒泡和事件捕获,应用?注意?
  • 事件轮询 Eventloop
  • promise、console.log、setTimeout、执行顺序
  • 重绘和重排
  • URl到页面加载过程
  • 跨域问题,解决,jsonp原理,不受跨域影响的标签
  • Etag是什么?
  • 浏览器储存cookie,localStorage,sessionStorage详细区别
  • http缓存,如果缓存还在有效期内,但是资源变更了怎么办
  • jsonp跨域的安全问题
  • cors 跨域,要支持两个域名怎么做
  • js会阻塞加载,怎么阻塞的?
  • http缓存更新静态文件的方式
  • postmessage
  • 浏览器卡顿,你怎么去排除?(服务器到后台都讲了一遍,他告诉我如果数据没问题,是浏览器的问题怎么排除,我说了代码中打断点调试,他不满意,说我Chrome的调试工具台掌握很不好)
  • PC浏览器的分布?主流浏览器的版本
  • 缓存问题,Etag和IF-modify-since是怎么来的?
  • 非同源cookie怎么访问
  • 如果要你缓存图片你怎么做?
  • 有多台服务器,sessionid怎么找

浏览器安全

  • 知道哪些前端危险?如何防御
  • XSS的原理,如何防御XSS?为什么换成实体字符就好了?
  • 假如说某链接获取到你的敏感信息,发送奇怪请求到服务器,你怎么去防御?
  • 讲一讲cookie是怎么发送到服务端,具体过程,尽量详细
  • csrf token能存储在cookie里吗?其实是可以的,只要服务端不要去从cookie里面取csrf token就行
  • 黑客是怎么去利用cookie的?这个请求到底是怎么构造的?
  • http请求中option主要是干什么的
  • xss的原理和防御措施(讲了加强cookie,过滤输入,过滤输出)
  • CSRF了解过吗,它的攻击流程是怎样的,如何防御(refencer可不可以被修改、token可不可以被窃取,既然有漏洞那不是白做了)

HTML

  • div里面嵌套一个tip,当tip改变的时候,div会重新渲染吗,怎么样实现div不会重新渲染
  • html5新特性
  • HTML跟HTML5的区别(解释了本质区别,框架上的区别)

JS

基础问题

  • let,const,var的区别。const定义的对象是否可以修改
  • js的原型和原型链,原型链的终点在哪里?
  • js的基本数据类型
  • 事件委托,详细讲
  • es6新特性,常用语法有哪些
  • this的原理,call,apply,bind的区别
  • 全等和弱等的区别
  • 构造函数的原型
  • 函数柯里化
  • 数组浅拷贝
  • 立即执行函数
  • 浏览器事件模型, IE的有什么特殊, 如何兼容(attachEvent与addEventListener)
  • js宏任务和微任务
  • 数组查找的方法
  • 了解过for…of吗
  • class继承和js继承的区别
  • {}的原型链
  • typeof null是什么,为什么是这个结果。
  • typeof和instanceof有什么区别,说说判断的原理
  • 数组里面新加的方法你有用过哪些?
  • 微任务有哪些?
  • 如何判断Array和Object
  • js精度问题(0.1+0.2==0.3的问题)
  • 讲一下generator生成器
  • 讲一下声明提升
  • 讲一下块作用域
  • 原型对象的constructor指向谁
  • dom规范跟js规范有什么区别?
  • js定时器,设置一个时间,会在那个时间之后准时执行吗?
  • transition有什么需要注意的地方?
  • .js的错误监控机制有了解吗?

进阶问题

  • 闭包,应用
  • 防抖,节流
  • setTimeout第二个参数为0时和匿名自执行函数区别
  • js里堆和栈的区别
  • new操作符之后的操作
  • this指向
  • ES6的使用,相比ES5的好处
  • 简单说一下es6的symbol属性
  • ES6的新特性(变量声明,字符串模板,数组的新方法flat,函数的默认值,箭头函数、class继承,promise,await/async 讲的很详细)
  • 如果要同时启动两个异步任务,怎么做
  • 深拷贝/浅拷贝问题
  • 说一下链表的实现
  • bind(object).bind(windows) 后的this指向
  • 构造继承里 Function.call(argu)里传进来的参数argu是什么
  • promise介绍,你是怎么用promise的,怎么实现一个promise
  • async是什么的语法糖,generator怎么用
  • ajax有哪些状态,每个状态分别对应什么
  • 手动实现一个ajax,这样实现的方法叫什么
  • require和import的区别?AMD、CMD、ES6
  • callback的缺点,Promise的状态有哪些,generator,async和await
  • js溢出怎么解决
  • 如何实现私有的方法/属性
  • ES5实现继承的方法,构造继承,原型链继承,组合继承,寄生组合继承
  • 怎么用正则判断当前域名是否为qq.com,或者xxx.qq.com
  • try…catch…中如果异步代码出错怎么办?
  • js怎么删除cookie
  • cookie的几个字段的功能
  • 怎么创建一个Promise,参数是什么,怎么中断一个promise,除了抛异常和return new Promise()还有什么
  • 怎么判断一个空数组
  • 箭头函数跟普通函数的区别,普通函数的作用域
  • let const, babel 中的实现
  • fetch的使用,考察通信是否了解
  • 事件机制,捕获和冒泡,如何阻止冒泡?
  • 阻塞、非阻塞和异步同步是对应的吗?一样的吗?
  • window.onload和document.ready,onload 是所有资源包括图片都加载完才执行
  • 如何给不存在的元素绑定事件监听
  • 可以在捕获阶段实现事件代理吗,为什么业界都用冒泡?(原因应该是,捕获和冒泡没有明显的优劣之分,但是冒泡事件流模型被大多数浏览器支持,兼容性更好)
  • promise的api:如果有10个调用请求,那么哪个api能查到最快调用的请求
  • promise中不声明async,可以用await吗
  • 内存泄漏
  • 怎么判断一个元素有没有被引用
  • 全局变量为什么不会被垃圾处理
  • BOM和DOM的区别,BOM的方法讲完整一点
  • 点击事件是宏任务还是微任务
  • class定义类和function定义类的区别

输出题

  • 以下代码执行结果
var a = {b: 1, c: function(){console.log(this.b)}}
  • 输出for循环中定时器的输出语句结果
  • 打印结果是什么
function test(a,b) {
console.log(b)
return {
test:function(c){
return test(c,a);
}
};
}
var retA = test(0); retA.test(2); retA.test(4); retA.test(8);
var retB = test(0).test(2).test(4).test(8);
var retC = test('good').test('bad'); retC.test('good'); retC.test('bad');
  • 问如何改造,才能实现真正的效果,闭包可以吗,然后用闭包实现一下这个效果
for (var i = 0; i < 4; i++) { setTimeout(function() { console.log(i); }, 300); }

TS

  • TS 声明文件
  • TS 可选属性

CSS

  • 介绍一下css盒模型

  • position的值有哪些,区别是什么

  • bfc是什么。怎么样形成bfc,bfc有哪些用

  • 实现一个垂直水平居中

  • 左右布局,sider+右侧自适应如何实现

  • animation的参数,怎样实现一个动画

  • 说说盒模型和怪异盒模型

  • 预处理器sass优点

  • 样式框架的原理,布局方法有哪些,flex,grid,还有吗

  • 为什么下面的margin可以居中?

    .outer { display: flex; } .inner { margin: auto; }

  • margin-top为负值,除了绝对定位还有哪些地方碰到过?

  • 怎么使两个div并列

  • 父元素和子元素宽高不知道的情况如何居中子元素(这个问题其实和父元素高度知不知道无关,因为文档流中父元素默认包裹子元素,高度是由子元素撑开的。)

  • CSS基础好么,知道DEN么?

  • css中隐藏元素的方法,display:none, visibility:hidden,区别?还有什么方式

  • css绝对定位和相对定位都是以谁为基准

  • css弹性盒子

  • CSS和JS实现动画的方式

  • ease-in怎么用js实现?

  • CSS和JS实现动画哪个好?为什么?

  • 实现一个块从左到右的移动

  • css设置元素隐藏,两种有什么区别?

  • css选择器有哪些?

  • css怎么实现列表中隔一行变一个颜色

  • 实现一个自适应内容的正方形盒子

  • css有哪些单位

  • 讲一下css的flex布局

  • px和rem的区别,举个例子说明一下

  • 浮动布局和flex布局相比有什么优缺点

  • 写CSS喜欢用什么布局

HTML

  • web语义化、语义化标签有哪些、section标签的作用

node

  • node用什么实现模块化管理
  • 说一下node的nextTick
  • 说说浏览器和node.js里面捕获错误的方式
  • 谈谈你对nodejs的理解
  • node和浏览器有什么区别吗

移动端&小程序

  • 移动端300ms的问题,以及fastclick的原理
  • 小程序的话,你做了哪些优化?说说吧

Webpack

  • 介绍一下webpack,webpack有哪些配置,loader和plugin有什么区别
  • webpack的原理机制、配置了入口之后发生了什么
  • Webpack用过么?里面的tree-shaking什么原理?(tree-shaking是因为import静态引入的能力,得以对文件内容进行浅层比较,去掉未被使用的代码。)
  • webpack的打包时间优化
  • webpack的打包流程
  • Require/import如何解决循环引用 Webpack是怎么做的
  • webpack异步加载路由需要怎么配置,问还有优化首屏渲染的其他方法吗
  • webpack loader在什么时期起作用
  • 写一个webpack插件应该怎么写
  • webpack中如何实现按需加载的
  • webpack依赖node吗?
  • 有了解过webpack里面的拆包吗,说一下你的拆包策略
  • 你觉得拆包的意义在哪,结合http的缓存详细说下拆包你觉得拆包的意义在哪,结合http的缓存详细说下拆包
  • 拆包过程有遇到过什么坑吗,如何解决的(有个webpack的bundle和module的id自增导致缓存失效的问题)
  • 了解PWA吗,webpack怎么做PWA

设计模式

  • 设计模型 策略模式,单例模式,工厂模式

前端框架

  • 了解有哪些框架,脏数据检测的原理、数据劫持的原理、订阅者发布者
  • 用过哪些前端router,实现方式原理[hash、history]
  • 框架的好处,坏处,单页面应用,seo如何解决
  • jquery的each
  • jquery的ready
  • ready和upload区别

Vue

  • VUE的生命周期,create和mounted之间发生了什么
  • vue created 和 beforemount 之前会发生什么
  • vue什么生命周期以后就不会被监听了
  • 钩子?
  • 让你实现一个弹窗组件需要注意什么?
  • vue数据双项绑定+diff算法
  • 既然有双向绑定,为什么VUE还有虚拟dom这个机制,以及这个机制的好处
  • VUE路由的实现原理
  • 怎么去实现vue的计算属性
  • vue构建v-dom树过程
  • vue-cli做了哪些代码的优化,在开发环境到生产环境
  • Vue的预渲染这个插件,具体是怎么去做的?
  • Vue的子组件与子组件之间的通信讲讲吧
  • 父子组件的通信和子父组件的通信是不是也可以实现呢?
  • 说说你对Vue的总体看法,特点,以及与其他框架的不同的地方
  • Vue的spa首屏优化怎么做的,说具体思路
  • vue中通过一个按钮控制input获得焦点,怎么实现,通过ref获取对象跟原生的js有什么不同
  • vue的高级组件了解吗?
  • Vue的computed和watch有什么区别
  • 如果要计算页面渲染时间,应该在哪个阶段为止
  • Vue生命周期中的mounted,在原生js中怎么实现?
  • Vue的虚拟DOM和patch算法
  • vue跟jquery的不同,操作DOM,组件化,MVVM,虚拟DOM
  • Vuex 5个概念 为什么mutations不能异步?异步会怎样?
  • 对vue中data进行更新会发生什么(生命周期进行更新、渲染)
  • 如果要复用项目中的某一块逻辑,你怎么做
  • vue中兄弟组件的通信方式(vuex,vue组件传递分配props)
  • 说说v-if和v-show的区别
  • 假设界面显示价格为9.99元,现在我去拉取了后台的价格,现在数据为8.88元。当你把数据设置为8.88后再到页面显示成8.88元。在这个期间你了不了解vue帮你做了什么事情?
  • 介绍vuex的各个模块和简单讲讲原理
  • dispatch和commit的区别
  • vue父组件先mounted还是子组件mounted
  • Vue中的nextTick了解吗?
  • vue里面的key有什么作用

React

  • 介绍一下react生命周期
  • react diff有了解么
  • 介绍一下redux
  • react数据流传递
  • react父组件子组件兄弟组件传递信息
  • react16新特性
  • this.setState执行后干了什么
  • 为什么引进redux
  • react事件机制
  • render在什么时候被调用
  • js和react垃圾处理机制和回收
  • 为什么要用到redux,redux的原理

项目工程

  • 登录功能,从前端到后台是怎么处理的
  • 用户登录怎么实现的,怎么知道是同一个用户(用userId,那手机号不就没用了吗)
  • 手机号验证怎么做的,正则表达式的方法
  • 发送验证码功能,向同一个手机发送多次验证码(攻击),怎么处理
  • 项目前端怎么优化(2018 前端性能优化清单
  • 最近最熟悉的项目,遇到最难解决的问题
  • 搜索框优化,防抖节流,还有?
  • jQuery用过吗,token如何实现验证登录
  • 如果我从前端要请求一张图片,你觉得从前端到后端的整个流程是怎样的,详细讲讲在后端的处理流程,随便扯了点路由匹配啥的
  • 很大的日志读取,ip出现最多的十次,怎么分片
  • 你是怎么压缩图片的?
  • 项目上线之后,怎样排除js中存在的问题?
  • 如何上传文件,pc端
  • 本地存储你有做什么特别处理吗?
  • 说一下缓加载怎么实现的
  • 有50g的QQ号数据,一次只能运行20g,想要找出出现次数最多的前十个qq号,怎么做?
  • 图片压缩后台怎么实现你知道吗?怎么牺牲图片的画质呢?
  • 输入 有做什么安全处理吗?(xss攻击,常见的字符转义处理有哪些?)
  • 知道Base64吗
  • 如果说要展示一个十万的数据在移动端的网页上怎么做
  • 自己做一个登录系统从前端到后端需要注意什么
  • 介绍一下雅虎的性能优化原则
  • 海量日志中找ip最多出现次数
  • 超大的日志文件, 提取其中的IP地址
  • 前后端通信数据格式
  • 用什么实现离线应用:manifest,原理呢?
  • 如何提高首屏加载速度
  • 图片懒加载怎么实现
  • 博客的话,做过哪些方面的优化呢?
  • 场景题:现在手机QQ要做个成语接龙,你怎么去做,说说思路吧
  • 你有什么较好的算法可以尽量减少成语库的数量吗?
  • 有没有想过前端如何去检测用户输入的是不是成语?
  • SSR
  • SEO怎么做的,说说技术细节
  • 用ajax上传图片
  • 预渲染prerender怎么做的,说说技术细节,具体说一下预渲染的原理
  • 如何减少白屏时间和首屏时间
  • 如果部署上去的项目有人打开后一直是白屏,怎么去收集这种情况
  • 用户第二次访问网页,会快很多,是什么原理?
  • 让你设计一个登录、注册、忘记密码的页面你会怎么设计?
  • 组件化开发是为了什么
  • 5000条数据展示
  • 如何知道用户发生的错误(window.onerror
  • 富文本编辑器怎么实现?(给标签设置contenteditable属性,然后使用浏览器支持的document.execCommand 命令模式API)
  • 富文本编辑器的安全问题
  • 如果要实现在离线情况下编辑且不丢失数据,怎么办?(先回答的是使用localStorage,回答之后不断追问,还问了能否直接用对象存,后面扯到了引擎方面的问题。)
  • 从底层谈谈map数据结构的设计。如果容量不够了怎么办,扩容过程中可能会耗费比较多的时间,如果在扩容时要访问怎么办;
  • 微信附近的人这个功能,如何设计
  • severless的优点
  • git相关操作
  • 如何实现一个可编辑的可以无限延伸的表格?
  • 除了websocket外还有什么方法能实现后端推送?
  • 自动化测试是怎么做的,怎么判断输出是不是符合期望
  • 100ms请求事件,有几种写法
  • 如何能只发送信息,不进行数据缓存
  • 前端要加载一个图片有哪些方式,然后还问到了base64是怎么实现的,有什么缺点,icon是怎么实现的
  • 后端一下子给你几万条数据,你要怎么处理。(一开始我说,这种情况下后端一定会分页的,然后又问没分页怎么办。然后我说前端手动分页,然后讲了一下具体的实现方法。)
  • 有一个高频触发的请求,你会怎么处理,这个饶了好久,一开始没get到面试官的点,一开始谈到了节流和防抖,然后面试官说这样会影响用户体验,而且这个需求就是需要高频触发,然后又说了一下需要高频请求的场景,一开始说到表单,然后说到购物车抢购。然后我又说加个16位随机字符串的参数,然后面试官说这样只是可以区分请求,在网络传输过程中,请求不一定是按先后顺序到达服务器的,那么服务器怎么知道请求的先后顺序呢,其实答案很简单,就是加个时间戳参数。不过当时一下子没反应过来,还谈到了域名发散,面试官说太复杂,然后才谈到加表明各个请求之间关系的参数。
  • 性能优化(讲了雅虎军规(资源加载、代码规范、缓存、服务器)下次可以优化讲成通用性能优化的方案雅虎军规+vue项目的优化)
  • 怎么保证token的安全性,拿到你的token就可以做全部的事情了吗?
  • 弱类型语言的缺点,平时哪些地方让你抓狂
  • 封装统一的网络请求的好处
  • 说一下babel是怎么实现各个浏览器兼容的,讲了一下babel的工作流程和AST树
  • 垃圾回收,如何使用这个方法来优化,主流的浏览器垃圾回收的算法,具体流程
  • 标记清除为什么比引用清除好
  • 要在页面上实行一个特别慢的 js 代码,会遇到什么问题,假设页面已经加载好,用户点击之后开始计算,造成没有响应的现象的原因(被禁用还是被延迟)
  • 阻塞会造成什么后果
  • 很大的计算,会让页面卡顿,有什么办法可以使页面不卡顿,也让任务完成(我回答了异步的方法,面试官问还有没有其他的方式,例如 html5 的新特性)
  • 实现百度搜索,foucs有下拉框,根据输入内容能模糊查询
  • 无限滚动列表优化问题
  • 假如说我们的网页有一个表单,有人模拟 http 的 post 绕过了表单将数据发送到了后台应该怎么办
  • 怎么去实现一个多人在线文档(从技术和需求说,来自腾讯文档,怎么做到数据的渲染、怎么获取到数据、网络上需要做什么处理)
  • 详细说明一下你是怎么通过设置请求头解决了缓存问题吗?
  • 图片懒加载原理(节流是什么)
  • 点击穿透
  • fastClick原理
  • 说说不用nuxt框架怎么实现SSR,数据预取怎么实现的

可能会问到的后端问题

  • RESTful的原理
  • 数据库百万条数据,有几种语文,数学,计算平均分,排序出来,如何解决
  • 后台有注解,前端有吗?装饰器用过吗?
  • 关系型和非关系型数据库
  • 数据库的索引的原理和用法
  • 数据库的事务知道吗?
  • 连接查询有哪些方式?
  • 你知道Java为啥能够运行在几乎所有系统上吗?
  • linux相关操作(查看进程用ps)
  • mysql跟mongondb的不同
  • 数据库优化方法
  • pm2查看日志的命令
  • koa的底层原理
  • koa的洋葱模型,和express有什么区别
  • 事务的原理了解吗
  • 什么是内外连接
  • 索引了解吗,为什么索引能加快速度
  • 同步和异步的区别
  • 如果有六百万名考生的高考成绩要排序应该怎么做
  • web服务用过哪些?
  • 你提到了nginx,有做过一些负载均衡吗?

算法

  • 找出数组中n项,n项的和为m
  • 口述快速排序
  • 冒泡,及冒泡的优化
  • 讲讲迪杰斯特拉算法
  • 讲讲最小生成树算法
  • 讲讲hash算法
  • 堆排序
  • 数组三分,如果一个数组能够分成非空的三个部分,每个部分和相等,则返回true
  • 查找算法应该用堆还是用栈
  • 数据结构有那些
  • 快排时间复杂度+快排什么时候最慢
  • 洗牌算法
  • dp和二叉树
  • 二叉树根据一个节点查找下一个节点
  • 从一个数组的后十个数中找出3个和为10的数字
  • 找出两个字符串(str1,str2)的最大公共子长度
  • 一次可以跳一步,两步,三步,问n步的路有多少种到达终点方式?(斐波那契,写了个尾递归)
  • 大量数据的数组,怎么找出排名前n个数
  • 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始)。如果不存在,则返回 -1
  • 实现 string的indexOf() 函数
  • 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。
    字符 数值
    I 1
    V 5
    X 10
    L 50
    C 100
    D 500
    M 1000
    例如, 罗马数字 2 写做 II ,即为两个并列的 1。12 写做 XII ,即为 X + II 。 27 写做 XXVII, 即为 XX + V + II 。
    通常情况下,罗马数字中小的数字在大的数字的右边。但也存在特例,例如 4 不写做 IIII,而是 IV。数字 1 在数字 5 的左边,所表示的数等于大数 5 减小数 1 得到的数值 4 。同样地,数字 9 表示为 IX。这个特殊的规则只适用于以下六种情况:
    I 可以放在 V (5) 和 X (10) 的左边,来表示 4 和 9。
    X 可以放在 L (50) 和 C (100) 的左边,来表示 40 和 90。
    C 可以放在 D (500) 和 M (1000) 的左边,来表示 400 和 900。
    给定一个罗马数字,将其转换成整数。输入确保在 1 到 3999 的范围内。
  • 大数相加
  • 链表反转
  • 二叉树排序
  • 二叉树的翻转
  • 出现最多的字母个数
  • 找一篇文章中出现最多的英文单词
  • 正则匹配字符串
  • 现在给你一个树状对象,{value:1,children:{value:2,children:{…}}}这样的结构,如何把所有value删去,返回一个新对象?
  • 如何判断一个对象中有没有叫value的属性?不要考虑代码的复杂性,能说几种说几种
  • 说说你知道的排序和查找算法吧
  • 堆排序是如何实现的?时间复杂度是多少?
  • 有1000步的台阶,每次只能选择走1步、2步或者3步,走完台阶一共有多少种走法
  • 长度为1亿的字符串,寻找字符串包含’tencent’子串的数量
  • 无序数组中选择第k大的数,分析算法时间复杂度
  • 两个整数求和会超过int范围 怎么运算
  • DFS非递归 先序遍历
  • 数组中超过一半的数是同一个数,找出那个数(分析复杂度,如何优化)
  • 手撕二叉树的题目,leetcode124
  • 生成一个8*8的01棋盘,每行每列不能多于1个1,输出生成的棋盘和符不符合规定
  • 数组和链表随机访问的时间复杂度
  • O(N) 寻找最长的连续字符串
  • 小明从老板那里拿到了一个密码表,说是如果解开密码表中的秘密,就可以升职加薪,赢取白富美,走向人生巅峰。这个密码表是一个 CSV 文件,里面的数据由数字(没有小数点)、字母组成。小明需要提取每个数据中的数字(例如 1a2b3c 提取后得到 123,提取后的数字整体看作一个十进制数),把数值为奇数的项相加,就可以解开这个秘密。请你实现一个函数 sum,帮小明完成这项工作。
function sum(input: string) {

return input.split(/[,\n]/)

.map(item => Number(item.replace(/[a-z]/ig, "")))

.filter(num => num % 2 === 1)

.reduce((a, b) => a + b)

}
  • 在一个字符串中找出连续重复的字符,这个字符可以是数字、字母和中文等
  • 有效括号 - 判断一个字符串中括号是否都能匹配
  • 一个字符串里面有一些不可见的字符,如”\n”,写一个算法剔除它们

手撕

  • 数据绑定实现【框架和抛开框架,手撕】
  • 排序数组,查询某个值,存在则返回索引,不存在返回插入位置;优化,for~二分 【手撕】
  • js实现阶乘
  • 创建一个 Person 类,其包含公有属性 name 和私有属性 age 以及公有方法 setAge ;创建一个 Teacher 类,使其继承 Person ,并包含私有属性 studentCount 和私有方法 setStudentCount
  • 实现一个类似百度输入框的功能,根据用户的输入,找出一个数组中匹配到的数显示出来
  • 一个输入框实现百度搜索那样的autocomplete效果
  • 请写一个函数,计算一篇英文文章中出现次数最多的单词及出现次数
  • 怎么用js实现队列
  • js观察者模式
  • 数组扁平化
  • 实现一个实数的堆栈,使得其 push pop max 方法的时间复杂度为 O(1)
  • 有一个整数二维数组,每行的元素个数不同,输出它的全排列,同一行的数互斥。要求不使用递归完成
  • 实现一个函数,检查二叉树是否平衡。
  • 实现一个 Http 请求池,需要能够限制并发数
  • 合并二叉树
  • 奇偶链表
  • 使用闭包实现变量自加一
  • 双向链表转二叉树,二叉树转双向链表
  • url正则匹配
  • nlogn排序算法有哪些,快排稳定么
  • 构建排序二叉树
  • 搜索二叉树找第k大的数
  • 手写原生ajax,new XMLHttpRequest()
  • 手写对象深拷贝
  • 获取标签名称为div的元素的个数,并且判断是不是数组,考察类型判断
  • 给两个构造函数A和B,如何实现A继承B
  • 用户权限认证过程
  • 写个模块导出的案例
  • 说下异步的问题,写个promise的使用小案例
  • 拖拽代码 (手写)
  • 手撕代码:大数相乘
  • 手撕代码:函数无限柯里化(有n个参数,函数调用n+1次得到结果)
  • 手撕代码:实现一个轮询器,主要考察Promise
  • 用es5的let实现一个闭包
  • 继承(实现私有属性和私有方法)
  • 设计实现一个固定执行顺序的script加载
  • 手写代码题:找出字符串中出现次数最多的字符及出现次数
  • 编程题(对输入的一段字符串(有逗号 有回车,挑出其中的数字,然后求和,求和之后再把数中的奇数加) 1.正则做法 2.字符串遍历做法,挑出数字 , 换行,再按换行分割,再按,号分割,数组扁平,求和,变字符串,遍历
  • 数组去重手写,越多越好
  • 将一个平铺的数组用js写成树的结构
  • 完成函数的实现,使得它可以实现达到 Array.prototype.forEach 相同的功能
  • 看下面代码执行结果,说明原因
setTimeout(()=>{
console.log(4);
})

new Promise(resolve=>{
resolve();
console.log(1);
}).then(()=>{
console.log(3);
})

console.log(2);
  • token过期怎么做
  • 怎么知道用户和token的对应关系
  • token和cookie区别
  • token为什么比cookie更不容易受到攻击,为什么要用cookie
  • 手撕Event bus
  • 手撕函数组合
  • 手撕对象扁平化
请实现 flatten(input) 函数,input 为一个 javascript 对象(Object 或者 Array),返回值为扁平化后的结果。
* 示例:
* var input = {
* a: 1,
* b: [ 1, 2, { c: true }, [ 3 ] ],
* d: { e: 2, f: 3 },
* g: null,
* }
* var output = flatten(input);
* output如下
* {
* "a": 1,
* "b[0]": 1,
* "b[1]": 2,
* "b[2].c": true,
* "b[3][0]": 3,
* "d.e": 2,
* "d.f": 3,
* // "g": null, 值为null或者undefined,丢弃
* }
*/
  • 给列表中的li(里面是a标签)绑定点击事件,点击时弹出其在列表中的顺序(页面不跳转)
  • JS实现一个JSON.stringify()功能的函数
  • 三次重试:假设有一个函数名为job,调用job后会执行一些异步任务,并返回一个Promise,但job执行的异步任务任务有可能会失败
    请实现函数retry,把job作为retry函数的参数传入,当retry执行后会尝试调用job,如果job返回成功(即Promise fulfilled),则retry函数返回job函数的返回内容;
    如果job返回失败(即Promise rejected),retry函数会再次尝试调用job函数。
    如果job连续三次均返回失败,retry则不再尝试调用,并返回其最后一次失败的内容。
function job() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
var num = Math.ceil(Math.random() * 20); //生成1-10的随机数
console.log('随机数生成的值:', num)
if (num <= 1) {
console.log('符合条件,值为' + num)
resolve(num);
}
else {
reject('数字大于1了执行失败');
}
}, 2000);
})
}

function retry(job, times, delay) {
return new Promise(function(resolve, reject){
function attempt() {
job().then(num => {
resolve(num);
}).catch(function (err) {
console.log('还有', times - 1, '次尝试');
if (0 == times - 1) {
reject(err);
} else {
times--;
setTimeout(attempt(), delay);
}
})
}
attempt();
})
}

retry(job, 3, 1000).then(result => {
console.log(result);
}).catch(err => { console.log(err); });
function job() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
var num = Math.ceil(Math.random() * 20); //生成1-10的随机数
console.log('随机数生成的值:', num)
if (num <= 10) {
console.log('符合条件,值为' + num)
resolve(num);
}
else {
reject('数字大于10了执行失败');
}
}, 2000);
})
}

async function retry(job, times) {
for (let i = 0; i < times; i++) {
try {
return await job();
break;
} catch(err){
if(i == times-1){
return err;
}
}
finally {
console.log('还有', times - i - 1, '次机会');
}
}
}

retry(job, 3).then(num => { console.log(num) })
  • 给了一个代码片段,大概就是一个产生随机数的for循环,然后把这个随机数当作参数传到一个异步函数,问怎么保证输出顺序也是有序的,其实就是类似于同时发送几个http请求,怎么保证响应顺序也按照请求顺序依次返回
  • 写了个类型判断函数
function getType(param) {
const type = Object.prototype.toString.call(param).slice(8, -1);
if (type === "Object") {
return param.constructor.name;
} else {
return type;
}
}
  • 遍历根结点下所有子节点
function traverseDom(root) {
let result = [];
let queue = [root];
while (queue.length) {
let cur = queue.shift();
result.push(cur);
for (let i = 0; i < cur.children.length; i++) {
queue.push(cur.children[i]);
}
}
return result;
}
  • 实现页脚在内容最底部
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
}

html,
body {
height: 100%;
}

.container {
min-height: 100%;
}

.content {
background: goldenrod;
color: white;
text-align: center;
}

.placeholder {
height: 50px;
}

.footer {
height: 50px;
background: greenyellow;
margin-top: -50px;
}
</style>
</head>

<body>
<div class="container">
<div class="content">我是内容</div>
<div class="placeholder"></div>
</div>
<div class="footer"></div>
</body>

</html>

智力题

  • 100人教室70人喜欢足球,80人喜欢篮球,问同时喜欢足球和篮球的人数
  • 试探玻璃杯破碎的楼层
  • 时针与分针夹角
  • 5.25时针和分针夹角
  • 上一题拓展:X时Y分夹角
  • 一个班里60%喜欢A, 70%喜欢B, 80%喜欢C, 问同时喜欢ABC的
  • 一瓶汽水一块钱,俩空瓶可以换一瓶汽水,给你20块钱,最多喝多少瓶?
  • 给你一个A4纸张,随便剪掉一个随意位置宽高的矩形,给你一个没有刻度的尺子和笔,怎么一刀把剩下的A4纸张分成面积同样大小的两半。
  • 如何洗开一副扑克牌
  • a和b两个人投掷硬币,朝上a得1分,反之b得分,现在a8分、b7分,请问a和b先到10分的概率各是多少。
  • 一根不均匀绳子烧完一个小时,问怎么使用多根这种绳子来计算15分钟
  • 一个烤盘,每次最多烤两块肉,一面烤10min,问要烤几分钟
  • 20个瓶子,有19个瓶子每颗药1g,有一个瓶子每颗药1.1g,问怎么用一把称一次找出1.1g的瓶子

拓展问题

  • excel同步/冲突
  • OT算法

非技术相关

  • 讲一下你觉得最自豪的项目
  • 对该职位的学习方式(根据对方的回答,需要的人员应该是看过专业书籍,有去了解这一方面的大佬并针对其技术分享进 行学习。而不只是用的时候再学,野网站学习。可以简洁为愿意并且会主动地学习)
  • 认为前端开发中比较难、比较重要的地方
  • 除了react还用了哪些技术
  • 遇到过的难点,如何解决的?
  • 有读英文文档的习惯吗?
  • ts和java对比,ts和es6对比,js对比框架
  • 面试过其他什么公司
  • 什么时候开始学习前端的,学习前端的方式,平时都看过哪些书?
  • 平时学前端看什么书呀?说说学习路线吧
  • 你看书或者看博客学习的时候,是怎么做总结的
  • 最近都有再看什么书?
  • 写文章的时候总有个先后顺序或者一定的结构吧,你是怎么做的
  • 没有试过思维导图
  • 在前端上未来有什么打算?有没有什么想学的东西?是只想找个工作还是想怎么发展?
  • 为什么说自己擅长沟通和有抗压能力
  • 问了计算机组成,问我cache知道吗,我大概说了说,然后问为什么cache更快
  • 操作系统,银行家算法,死锁怎么解决
  • 为什么学习前端
  • 我在学习过程中遇到了哪些困难,怎么解决的。
  • 有没有关注前端的新技术
  • flutter有了解吗
  • h5有写过吗,移动端有了解吗
  • 了解过小程序吗
  • 如何衡量一个软件的质量?如何保证产品的质量?(软件工程的思想,敏捷中的测试驱动开发)
  • 找出不多于三个关键词形容自己
  • 怎么跟一个不懂前端的人介绍前端

HR问题

  • 自我介绍
  • 讲一讲最近收获最大的一个项目,在项目担任的角色
  • 有什么爱好,为什么喜欢
  • 是否为独生子女
  • 是否去过深圳
  • 是否考研
  • 什么专业,为什么不选择省外的高校
  • 是否有其它公司offer
  • 入职时间,可实习多久
  • 说说自己性格的优点和缺点
  • 你怎么看我们部门
  • 你了解过我们是做什么的吗
  • 你平常怎么学习
  • 你的未来规划是什么
  • 你女朋友不让你来深圳怎么办
  • 什么时候能入职 能做多久
  • 参加过什么比赛,拿过什么奖
  • 老师和同学对自己评价的优缺点
  • 成绩在年级上的位置
  • 说下团队的规模,在团队的角色
  • 觉得自己技术怎么样
  • 什么时候开始用GitHub,更新频率怎么样

总监面

  • 如何学习全新的框架
  • 一个卡顿的项目交给你,怎么去进行优化
  • 周围有人拿到腾讯offer了吗?
  • 介绍了一下我的专业干啥的
  • 日常开发中遇到问题怎么解决
  • 建立中的项目有啥亮点
  • 前端处理耗时比较长的计算问题,如何防止页面卡顿的优化方案
  • bilibili上面一键三连怎么实现
  • 自己的职业规划