博主 3 月份在腾讯官网投递 Web 前端开发岗，一路从提前批走到正式批，战线长达3个月...真的不容易（菜是原罪），特此记录下征战鹅厂的面经，希望可以帮到大家。

提前批

一面

官网显示流程——初试
3.14（电话面 + 视频面）

1. 自我介绍，怎么学前端的
2. CSS 常见两列布局、三列布局
3. CSS 水平垂直居中
4. 闭包，JS 没有闭包的话会怎么样
5. typeof 和 instanceof
6. js 的原型链，继承
7. js 的 bind、apply、call 有什么区别
8. var、let、const的区别
9. new 操作符原理（手动实现 new 给出思路）
10. 箭头函数，箭头函数 this 问题，箭头函数是否可以被 new
11. promise 知道吗，手写一个 promise 怎么写（说思路）
12. promise.all 应用场景
13. promise 和 async/await 的区别
14. vue 的生命周期（我说我 React 比较熟）
15. react 的生命周期（React16）
16. react 性能优化
17. react 的 diff 算法
18. react 的 Fiber 架构
19. 状态码 304（强缓存和协商缓存）
20. 你有什么要问的吗？

面完加了面试官 qq，第二天qq远程视频，手写原生 DOM 拖拽和大数相加
一面大概 1 个小时左右，比较注重 JS 和 CSS 的基础能力。面试官人很温和，通过后立马打电话和我说，这种尘埃落定的感觉真好~

面试完官网状态从初试变成复试~

二面

3.20（电话面）

1. 自我介绍，说说项目遇到的坑
2. 看你项目 ES6 用的比较多，说说 ES6 的一些新特性
3. 有没有考虑对图片处理的优化手段，说说常用的
4. 图片懒加载怎么做
5. 考虑过缓存方面的优化吗，强缓存和协商缓存区别
6. 防抖和节流
7. 实现无缝滑屏，你觉得怎么实现
8. dns 查询原理
9. tcp 握手和挥手
10. tcp 和 udp 区别，udp 使用场景
11. https 和 http 区别
12. http2.0 相比 1.0 好在哪
13. 抓包会吗，抓包原理，fiddler 用过吗
14. 跨域
15. csrf、xss，如何预防
16. 项目的 webpack 配置
17. plugin 和 loader 的区别
18. 写过 webpack 的插件吗（没写过）
19. webpack 单路口和多路口打包配置，为什么需要多路口
20. babel 的编译原理，抽象语法树
21. 你有什么要问的吗？

二面聊了很久，一个多小时，面试官非常厉害（应该是部门组长），整体处于被碾压的情况...然后面试官说可能会有三面，让我再准备下
感觉答得很一般，当时回去恶补了 webpack 以及性能优化的东西..

面试完官网状态依旧是复试..

三面

3.28（视频面）

1. 自我介绍，为什么会选择学前端呢？
2. 看你做了挺多项目，有没有在架构层面上考虑过对项目的优化
3. MVC MVP MVVM 架构了解吗，他们的使用场景
4. 怎么理解前后端分离思想
5. 和后端一般是怎么沟通和联调的
6. 网络安全
7. 看你用过 nginx，聊聊 nginx 吧
8. docker 也用过？（不是很熟还是别往简历上写给自己挖坑啦..）
9. 后端技术栈了解哪些
10. 有什么想问的吗？

三面大概半小时...面试官应该是部门技术总监，问的问题非常广，从大的架构层面往小的技术方面问，由广度到深度
整体气氛比较深沉...和巨佬聊技术有点格格不入T_T，巨佬说会考核下，然后让我等电话..

后来..后来..官网流程就灰了...电话呢？！ 提前批——挂。

但好在比较幸运是，在面腾讯之前拿到爱奇艺的实习机会~ 所以也不至于无路可走T_T
在等正式批的这段时间里，白天在公司上班，晚上恶补基础，在恶补的过程中，才发现自己之前面试答得简直一坨shi ...很多需要深挖的知识点，渐渐感觉时间不太够用(..•˘_˘•..)

正式批

26号突然收到面试邮件，约了 28 号晚上 7 点的面试..
赶紧到官网查看流程，灰了一个多月，终于亮起来了！！ 感动！！

一面

官网面试流程——初试
4.28（电话面）

1. 自我介绍，在校情况
2. 圣杯布局、双飞翼布局
3. CSS 媒体查询
4. CSS 动画、CSS 对网页性能优化
5. 浏览器渲染原理、回流与重绘
6. JS 单线程、EventLoop、宏队列、微队列
7. Go 语言知道吗？ 为什么 Go 效率比较高？ （只是了解，效率高大概是因为多线程？）
8. Ajax 和 Fetch
9. 怎么同时让多个异步请求并行？
10. 跨域问题
11. xss 和 csrf （聊到跨域基本都会聊跨域安全问题，所以这两个知识点可以一起准备）
12. session 和 cookie
13. 服务器怎么知道 session 过期？
14. 怎么设置 cookie 过期时间
15. sessionStorage 和 localStorage
16. 强缓存和协商缓存
17. ES6 数组新增方法
18. ES6 箭头函数和普通函数区别
19. promise、generator、async/await
20. react 父子组件传参
21. PureComponent 知道吗
22. React 性能优化
23. Redux 原理，Redux 源码看过吗？ Redux 中间件呢？

正式批一面了大概1个半小时... 全程没喝一口水... 自我感觉答得还行，面试官也说还不错hh
但是...但是...第二天看官网居然灰了？？？？
当时心里拔凉拔凉的，晚上没吃饭没洗澡躺尸，亏我准备这么久

但是过了两天，突然又接到电话，是正式批一面面试官打来的..........
他说他的部门（IEG）HC不够了..把我调剂到另外的部门（PCG）去了...然后要重新启动流程，所以把我灰了..让我赶紧准备另一个部门的面试

所以又开始了艰难的——走流程..
不得不吐槽鹅厂流程太长了！！ 也有可能是自己太菜...排名比较靠后

正式批补录

一面

官网面试流程回到初试..
5.07（电话面）

1. 自我介绍，看你简历，以前是写Java的？
2. 那你觉得 java 里的继承和 JS 里的继承有什么区别
3. JS 垃圾回收
4. JS EventLoop
5. ES6 新特性
6. 知道装饰器吗
7. 数组方法 map、filter、reduce
8. 新数据结构 Set、Map
9. babel 的编译原理
10. webpack 工作流程和原理，怎么写一个插件
11. JS 基础还行，问问网络相关知识？（好..）
12. 从 url 到页面渲染过程
13. 你刚说到 DNS 解析 能详细说说嘛？ DNS 递归和迭代的区别呢？
14. TCP ？ UDP ？ 区别是什么，你说 TCP 头部很大，具体有哪些报文信息呢？
15. 页面渲染 重绘与重排 页面加载如何优化
16. http1.1 / http2.0 / https
17. 聊聊数据结构的东西吧 算法怎么样？（一般..）
18. 栈、队列、树、图一些基础
19. 最短路径算法能简单聊聊实现吗 （迪杰斯特拉算法）
20. 树的深度优先遍历、广度优先遍历实现和区别
21. 一棵二叉树要用数组存储，这棵树要具备哪种条件？ （完全二叉树）
22. 实现括号匹配用数据结构怎么做？说说思路 （栈）
23. 快速排序原理
24. 有什么想问我的？ （实习在什么事业部，具体做什么？手Q，做手Q新业务）

一面大概1个多小时，面试官比较严肃，也很厉害... 问的问题拓展性很强。
而且非常注重基础， 数据结构、计算机网络...很重要！
虽然感觉答得一般，但面试官评价还行...运气真好

二面

5.13（电话面）

1. 自我介绍，说说你学前端的历程吧
2. 说说项目中遇到的坑，怎么解决的
3. 项目中有考虑到哪些优化的地方？
4. 小程序的富文本为什么选用 wxParse，富文本原理
5. 图片有哪些格式，知道 WebP 格式的图片吗，图片的一些优化手段
6. 图片懒加载原理
7. 跨域
8. 前端常见攻击方式
9. 状态码
10. 强缓存和协商缓存
11. Node 的优势
12. Express 和 Koa 区别
13. react 路由原理
14. react hooks
15. redux 异步中间件实现原理
16. Vue MVVM原理
17. 服务端渲染原理
18. nginx 的配置，反向代理、负载均衡原理
19. 知道 PWA 吗
20. hybrid 技术
21. Flutter 了解吗
22. 看过源码吗？
23. 有什么想问的？

二面聊了一个多小时，面试体验很棒！面试官人超好，不断的引导我回答出答案...
最后还说帮我约三面的面试官，给人感觉很暖！
后来看官网状态从初试变成复试~

三面

5.22（视频面）

1. 自我介绍，说说项目踩坑
2. 使用框架踩到坑时，有没有去看过源码？
3. 在做项目时，有没有从架构层面考虑过？
4. 我现在有个需求，需要实现一个 web 端的微信，你想想该怎么实现
5. 怎么看待前后端分离思想，以及服务端渲染技术
6. 写过脚手架吗？
7. 了解过设计模式吗？
8. 后端的技术栈有了解吗？
9. 平时是怎么学习的，学习习惯，为什么学前端？
10. 你有什么想问的？

三面聊了半个小时，面试官是部门技术总监，看上去很和蔼...一直在安静听我说
面试感觉就像在一起聊天，也没有提前批的那种沉重感...大概是被虐多了，习以为常~
面试完官网状态秒变成 HR 面试！！

HR面

5.27 （电话面）

1. 自我介绍
2. 家庭情况
3. 平时是怎么学习的
4. 说一个你做的最好的项目~
5. 怎么看待现在的互联网趋势 （我说5G可能是第四次工业革命的导火索...）
6. 如果要来深圳的话，方便吗
7. 你有什么想问的吗？

HR 是一个小哥哥，人很好，声音很好听，面试了10分钟左右
最后还说会帮忙催 offer，真的很感谢他！

OC

6.11 （拿到offer）
oc真的等的很着急...好在终于拿到了 offer！！

我的经验

1. 实习并不难，实习不是社招，比起社招难度小得多！基础很重要，面试官基本是看你的基础能力和你的发展潜力。
2. 简历很重要，一个好的简历可以让面试官快速了解你，当然记住不要给自己挖坑。
3. 沟通很重要，不会就说不会，毕竟不可能啥都会，实事求是。然后尽量引导面试官向你会的问题上问，多准备点亮点，例如框架源码，新技术等..
4. 电话面试时，可以录音，回过头听听面试官的问题，慢慢积累面经。

博主期间也面试了阿里、京东、头条... 以后有时间再总结下面经给大家分享
最后祝大家都能顺利拿下心仪 offer！ 我的 github 面经

输入大小写字母、数字、下划线：
<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 

输入小写字母、数字、下划线：
<input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 

输入数字和点
<input type="text" onkeyup="value=value.replace(/[^\d.]/g,'')">

输入中文:   
<input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">  
  
输入数字:   
<input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')">  
  
输入英文:   
<input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">  
  
输入中文、数字、英文:   
<input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">  
  
输入数字和字母：
<input onKeyUp="value=value.replace(/[\W]/g,'')">  

除了英文的标点符号以外，其他的都可以中文，英文字母，数字，中文标点
<input type="text" onkeyup="this.value=this.value.replace(/^[^!@#$%^&*()-=+]/g,'')">

只能输入数字代码(小数点也不能输入)
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

只能输入数字,能输小数点.
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

数字和小数点方法二
<input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">

只能输入字母和汉字
<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">

只能输入英文字母和数字,不能输入中文
<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

只能输入数字和英文
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:
<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

输入大小写字母、数字、下划线：
<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 

输入小写字母、数字、下划线：
<input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 

输入数字和点
<input type="text" onkeyup="value=value.replace(/[^\d.]/g,'')">

输入中文:   
<input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">  
  
输入数字:   
<input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')">  
  
输入英文:   
<input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">  
  
输入中文、数字、英文:   
<input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">  
  
输入数字和字母：
<input onKeyUp="value=value.replace(/[\W]/g,'')">  

除了英文的标点符号以外，其他的都可以中文，英文字母，数字，中文标点
<input type="text" onkeyup="this.value=this.value.replace(/^[^!@#$%^&*()-=+]/g,'')">

只能输入数字代码(小数点也不能输入)
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

只能输入数字,能输小数点.
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

数字和小数点方法二
<input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">

只能输入字母和汉字
<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">

只能输入英文字母和数字,不能输入中文
<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

只能输入数字和英文
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:
<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

<Table border ref="selection" size="small" @on-row-click="onClickRow"></Table>

// table组件点击一行任意位置选中
    onClickRow(row, index) {
        this.$refs.selection.toggleSelect(index)
    }

写上toggleSelect(index)方法即可，iview文档上没有标出。
个人意见，仅供参考