前22年的Loser，后4年和本身赛跑的人 | 最惨前端面经

跳槽缘由

前东家部门是作旅游的，在此次疫情打击下，基本玩完。

因而我半休半远程三个月后，在4月底领了裁人便当。至今，差很少找了两个月的工做。

本篇不是标准的面经，想从中获取大厂跳槽经验的能够歇一歇。

更多的是想讲一下绝大多数如你如我，学历渣技术差，没大厂经验的前端如何走。

1. Offer状况

我的比较懒，一周可能就面2～3家，只约下午。部分星期没有面试邀约。

囿于学历+公司，两招聘软件都被我用成“Boss直拒”和“拉钩上吊”

粗略算了下，面了约12家大中小型公司，仅4家Offer，状况分别为：

• 某游戏公司
• 某小公司
• 风变编程
• 金山系某司

做为一个社交孤儿，在本次跳槽历程中也是发现本身很多的问题，且听我慢慢道来。

本篇虽然有点丧，但大家能够从中找到对应的问题（我几乎犯了全部面试的低级错误）

部分的公司有：360奇舞团，某上市游戏公司，风变编程，金山系某司，阿里。

2. 高频面试题汇总

面过的公司有点多，一并说了吧。

1. 从“在浏览器输入域名”到“页面静态资源彻底加载”的整个流程

见于：某游戏公司、小鹅通、阿里一面、另外三家小公司

这问题的答案，我结合了yck《前端面试之道》和 浏览器原理专栏：

整个过程能够分为几步：

1. 用户输入

   当用户输入关键字并键入回车以后，这意味着当前页面即将要被替换成新的页面，不过在这个流程继续以前，浏览器还给了当前页面一次执行 beforeunload 事件的机会，beforeunload 事件容许页面在退出以前执行一些数据清理操做，还能够询问用户是否要离开当前页面。

2. URL 请求过程

   首先，网络进程会查找本地缓存是否缓存了该资源。

   若是有缓存资源，那么直接返回资源给浏览器进程；若是在缓存中没有查找到资源，那么直接进入网络请求流程。这请求前的第一步是要进行 DNS 解析，以获取请求域名的服务器 IP 地址。若是请求协议是 HTTPS，那么还须要创建 TLS 链接。

   • 其中，DNS也有几步缓存：浏览器缓存，hosts文件，
   • 若是本地域名解析服务器也没有该域名的记录，则开始递归+迭代解析
   • TCP三次握手，HTTP。TLS握手，HTTPS。

   接下来就是利用 IP 地址和服务器创建 TCP 链接。链接创建以后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，而后向服务器发送构建的请求信息。

   数据在进入服务端以前，可能还会先通过负责负载均衡的服务器，它的做用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 HTML 文件。

   首先浏览器会判断状态码是什么，若是是 200 那就继续解析，若是 400 或 500 的话就会报错，若是 300 的话会进行重定向，这里会有个重定向计数器，避免过屡次的重定向，超过次数也会报错。

   浏览器开始解析文件，若是是 gzip 格式的话会先解压一下，而后经过文件的编码格式知道该如何去解码文件。

3. 准备渲染进程

   默认状况下，Chrome 会为每一个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套建立一个新的渲染进程。

4. 渲染阶段

   文件解码成功后会正式开始渲染流程，先会根据 HTML 构建 DOM 树，有CSS的话会去构建 CSSOM 树。若是遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS，后者会先下载文件，而后等待 HTML 解析完成后顺序执行。

   若是以上都没有，就会阻塞住渲染流程直到 JS 执行完毕。

CSSOM 树和 DOM 树构建完成后会开始生成 Render 树，这一步就是肯定页面元素的布局、样式等等诸多方面的东西

在生成 Render 树的过程当中，浏览器就开始调用GPU 绘制，合成图层，将内容显示在屏幕上了。

2. eventloop机制，promise的实现和静态方法、async实现。

这题聊起来可就大了，进程，线程，协程。部分还会配以那道最经典的eventloop题目。

见于：阿里一面、小鹅通、头条一面、360一面、风变编程、以及其它四家公司，必考。

Event Loop 是什么？

JavaScript的事件分两种，宏任务(macro-task)和微任务(micro-task)

• 宏任务：包括总体代码script，setTimeout，setInterval
• 微任务：Promise.then(非new Promise)，process.nextTick(node中)
• 事件的执行顺序，是先执行宏任务，而后执行微任务，这个是基础，任务能够有同步任务和异步任务，同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放入Event Queue中(宏任务和微任务是不一样的Event Queue)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不一样的任务，所以会循环执行上述操做。

Promise 的含义

Promise是一个异步编程的解决方案，简单来说，Promise相似一个盒子，里面保存着在将来某个时间点才会结束的事件。

三种状态：

• pending：进行中
• fulfilled ：已经成功
• rejected ：已经失败 状态改变，只能从 pending 变成 fulfilled 或者 rejected，状态不可逆。

async实现和经常使用方法

async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。

Generator 函数是协程在 ES6 的实现，最大特色就是能够交出函数的执行权（即暂停执行）。

协程是一种用户态的轻量级线程， 协程的调度彻底由用户控制。协程拥有本身的寄存器上下文和栈。协程调度切换时，将寄存器上下文和栈保存到其余地方，在切回来的时候，恢复先前保存的寄存器上下文和栈，直接操做栈则基本没有内核切换的开销，能够不加锁的访问全局变量，因此上下文的切换很是快。

3. Vue 和 React 之间的区别

摘自yck《前端面试之道》

1. Vue 的表单可使用 v-model 支持双向绑定，相比于 React 来讲开发上更加方便，固然了 v-model 其实就是个语法糖，本质上和 React 写表单的方式没什么区别。

2. 改变数据方式不一样，Vue 修改状态相比来讲要简单许多，React 须要使用 setState 来改变状态，而且使用这个 API 也有一些坑点。而且 Vue 的底层使用了依赖追踪，页面更新渲染已是最优的了，可是 React 仍是须要用户手动去优化这方面的问题。

3. React 16之后，有些钩子函数会执行屡次，这是由于引入 Fiber 的缘由，这在后续的章节中会讲到。

4. React 须要使用 JSX，有必定的上手成本，而且须要一整套的工具链支持，可是彻底能够经过 JS 来控制页面，更加的灵活。Vue 使用了模板语法，相比于 JSX 来讲没有那么灵活，可是彻底能够脱离工具链，经过直接编写 render 函数就能在浏览器中运行。

5. 在生态上来讲，二者其实没多大的差距，固然 React 的用户是远远高于 Vue 的。

6. 在上手成本上来讲，Vue 一开始的定位就是尽量的下降前端开发的门槛，然而 React 更多的是去改变用户去接受它的概念和思想，相较于 Vue 来讲上手成本略高。

4. Vue 3.0面试题

见于：360一面、风变编程，预计下半年必考。

1. Vue3.0都有哪些重要新特性？

• 建议往Composition API和Tree-shaking方面答，对应比较React Hooks和webpack 的Tree-shaking

2. Vue3.0 对比Vue2.0的优点在哪？

3. Vue3.0和React 16.X 都有哪些区别和类似处？

• 能够更新下你的横比答案了，重点突出二者开始相互借鉴，互有优势。记得夸夸Vue3.0抄过来，却作得更好的部分。

4. Vue3.0是如何实现代码逻辑复用的？

• 能够先对比Composition API和mixin的差别，并凸显出Vue2.0那种代码上下反复横跳的缺点。

以上答案基本能够在下面两篇博客里找到：

《抄笔记：尤雨溪在Vue3.0 Beta直播里聊到了这些…》

《Vue3 究竟好在哪里？（和 React Hook 的详细对比）》

5. React高频面试题

1. React 16.X 的Fiber原理

2. setState原理，何时是同步的？

3. React Hooks相对高阶组件和Class组件有什么优点/缺点？

4. React 16.X的生命周期，以及为什么要替换掉之前的？

5. React跨平台的实现原理。

6. 说一说redux，以及比flux先进的缘由。

平心而论，若是面试前未要求技术栈，建议往Vue方向引。React的面试题要高一两个难度....

6. HTTP高频面试题

见于：阿里一面、头条一面、360一面、风变编程、以及其它四家公司，必考。

1. 讲一讲强缓存和协议缓存？

2. HTTP/2.0 都有哪些特性？头部压缩的原理？

3. TCP三次握手和四次挥手？以其存在乎义。

4. 状态码。302.304.301.401.403的区别？

5. 状态码。204和304分别有什么做用？

6. HTTP和HTTPS握手差别？

7. CSRF 跨站请求伪造和XSS 跨站脚本攻击是什么？

8. 你是如何解决跨域的？都有几种？

9. nginx 了解吗？你都用来作什么？

10. 有了【Last-Modified，If-Modified-Since】为什么还要有【ETag、If-None-Match】

我总结过一张xmind图，欢迎到我公众号里自取。

7. JS/CSS高频基础问题

见于：阿里一面、头条一面、风变编程、以及其它多家公司，很是高频。

1. 弹性盒子中 flex: 0 1 auto 表示什么意思？

2. 箭头函数能够用new实例化吗？聊聊this的指向问题。

3. 聊一聊原型链。

4. 垃圾回收中的堆和栈的区别。

5. 0.1 + 0.2 != 0.3背后的原理？

6. TypeScript用过吗？聊聊你对TypeScript的理解？

7. 图片懒加载的原理。

8. call、apply和bind方法的用法以及区别

9. Webpack原理，以及经常使用插件

8. 项目及优化相关

1. 项目中遇到的难点，以及解决思路。

2. 你是如何作Web性能优化的？首屏渲染如何处理？

这个问题很大，我有个简略版，回答思路引自专栏《 浏览器工做原理与实践》：

主要围绕着两个阶段：加载阶段 和 交互阶段

加载阶段：

1. 减小关键资源的个数和大小（Webpack拆/合包，懒加载等）
2. 减小关键资源RTT的时间（Gzip压缩，边缘节点CDN）

交互阶段：

1. JS代码不可占用主线程过久，与首屏无关的脚本加上延后处理（aysnc/defer）属性，与DOM无关的交给Web Worker。
2. CSS用对选择器（尽量绑定Class或Id）,不然会遍历屡次。
3. 首屏渲染中若是有动画，加上will-change属性，浏览器会开辟新的层处理（触发合成机制）
4. 避免强制同步布局，避免布局抖动。
5. 图片懒加载（有四种方式）

3. 埋点数据上报的方案作过吗？

4. 前端架构思考，你是如何考量部门的技术栈的？

5. 前端重构思考，老项目在新业务紧急与重构技术债务间如何衡量轻重？

9. 全链路以及DevOps认知

因为我第二家公司部门是作DevOps平台，有些与前端无关的面试题。

1. 单元测试作过吗？你是怎么作的?

2. docker 准备流程？

3. DevOps平台关键功能点？

4. 自动化测试，CI/CD 的关键核心都有哪些？

5. 如何保障DevOps推进？

6. 接口如何作优化？Mock平台搭建方案？

3. 面试感觉

今年，太难太难了。 @木易杨 大佬的这段话很对：

先来讲下大环境，感受很是很差，就一二线互联网来讲招人的没几家公司，裁人的、内部调整的、锁 HC 的确是一大堆，因此你们在换工做的时候必定不要裸辞，风险太大。

今年面试和往年感觉有些不一样，对于项目的重难点、亮点、我的在团队中作的贡献、对项目的 Owner 意识等比较关注，还有就是编程能力的考察会更多一些。

简单讲，就是学历是第一竞争力，你靠APP投简历几乎没反馈，内推最靠谱。

其次，若是你仅有大专，能力非高得不可替代（或有大佬愿作信任背书），不建议在今年频繁投大厂（白白浪费宝贵的机会），我就经历过各类各样简历面挂和HR面挂，部分缘由：

1. 跳槽频繁（我四年三家，其中两家是部门解散/倒闭）
2. 博客写太多，专一力不够，英语不够好。
3. 过往项目没亮点，直接否认。

平心而论，过往跳槽都不是很顺利，但今年是真感觉到了天花板：

1. 大公司投简历投不进。
2. 小公司薪资知足不了。

充分体会到一句话：

你日后的日子里，都在为高中不努力买单。

4. 面试技巧

严格说，本面渣不配给一些面试技巧，但有些是我没作好却很不错的东西。建议大家看一看：

1. 付费找人包装简历

若是你一没学历，二没大厂简历，简历写得稀烂。

相信我，投递以前，付个几十块找业内大佬帮你改改简历，你必定会有更多的投递反馈。

2. 优秀的自我介绍模版

面试官您好!

1. 我叫***，很开心今天来应聘** 岗位，我有*年***岗位工做经验，工做内容包括**、*** **等，曾参与***项目/工做，完成**业绩，这些经验锻炼了我***能力。除了平常业务开发外，我还在***方面.....

2. 面试以前，我了解到我们公司主要从事***业务、***类产

品，属于行业排名***的企业，我对这个行业很是看好，也想在这行 长期发展！这个岗位要求的** ***能力和经验，与个人工做经历很 匹配，相信我可以胜任这个岗位，谢谢！

3. 项目问题提早备好草稿

在我面试一个月左右，发现常常挂在二/三面后，开始审视本身的问题：

1. 回答项目难点，解决方案时太草率，只描述作了什么，并没体现方案给项目带来的进步。
2. 缺少断点，一个劲儿说不停，缺少对语句的掌控。

说实话，挺难述说的，特别是我这种没啥大项目经验，前三年都在作中后台系统居多，只能从一些细节入手，如下是个人草稿（虽然很烂），供大家参考一下。：

Vue后台细颗粒权限控制与防多人操做：

1. 通常简单的权限控制会以角色区别，但开发/运维们想本身设成员，需求1

2. 给他们作了一个权限管理的模块，但由于DevOps的功能模块太多，记不住，开发/运维们想要直观的修改权限，需求2。

3. 考虑到这个痛点，我设计了一个“受权模式”，高权限的拥有切换功能。

   切换后，该模块下全部的按钮都会先拦截左键点击，并拦截默认右键，多了一个自定义属性。以及受权/冻结 菜单。受权功能，直接拥有选择成员的树控件弹窗。

   使用后会上传 成员数组 + 自定义属性。下一次访问后台便返回 该自定义属性 对象 ，以肯定新的权限。

   权限问题解决后，开发/运维们又发现，一个部署/发布 点击模块存在同时操做的人不少。会冲突。需求4。

4. 在多人频繁触发模块，加入了WebSocket管理，实现相似在线文档的显示功能，显示当前操做人，并设屏蔽（同时操做会有显示姓名，并锁住）。

   • 简单版本：当前按钮 点击后，后台设个时间阀值，该段时间内其余人点击了就弹出提醒当前有人操做。

   • 复杂版本：多人WebSocket维护一个值。

对应场景：DevOps平台

5. 和本身赛跑的人

去年写过一篇年度总结：

我叫“笑妄”，16年地理信息系统专业专科毕业，自学的前端。 目前三年半的经验，先后工做过几家中小公司，作过Python爬虫，也曾在运维开发部混过。前两年的工做，都在为生计挣扎，作码农仅因自身一无所长，看这行工资高，就挤进来了。--- 《前端废材的自我劝退之路 》

y1s1，我底子不好。1年时才搞懂布局，2年不会函数return，3年才熟悉React。

入这行以来，一路虽有伯乐，但于前端领域仍单打独斗居多。

却得益于这行，让我知“井外方觉天地大”。认识优秀的人越多，越想努力，精进。

因此这段时间也没闲着，看了一些还不错的书/专栏：

1. 《网络是怎样链接的》，难，建议笔记。
2. 《DevOps实战笔记》，有趣，但需有必定的基础。
3. 《透视HTTP协议》，还不错，值二刷。
4. 《图解Google V8》，相对第一本《浏览器原理》，水了很多，部分值二刷。
5. 《Nginx核心知识100讲》，目前正在看。

如何提升本身的技术竞争力（或收入）？

1. 写技术博客。“从某种意义上说，博客是我最好的学习笔记和我的名片。在IT行业内，技术博客是了解一个开发者最好的方式之一，特别是当你没有一张足够份量的文凭或者一段出彩的工做经历时，你就应该沉下心来好好打磨本身技术，打造本身的博客。往者不可谏，来者犹可追。” ---@浪里行舟 《写技术博客那点事》
2. 立足于前端，放眼全链路。今年我原觉得的弱势DevOps，帮助我搞掂了很多2/3面技术面。
3. 跟对人，这可说是收入涨幅最大的依靠（也是最可遇不可求）。我曾见过某友，从17年9K，到现在50k+的飞跃。不说了，我真的酸。。。

这一路上，个人能力，学历，背景样样不如人，也曾懒惰曾迷茫，但一直都在和本身赛跑，我不服输：

虽然在你离开学校的时候

全部的人都认为你不会有出息

你却没有所以怨天尤人自暴自弃

....

在那时侯咱们身边都有一卡车的难题

不知道成功的意义就在超越本身

咱们都是和本身赛跑的人

为了更好的将来拼命努力

争取一种意义非凡的胜利

为了更好的明天拼命努力

前方没有终点

咱们永不停息

❤️ 看完三件事

若是你以为这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1. 点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
2. 关注「前端劝退师」，不按期分享原创知识。
3. 也看看其它文章

劝退师我的微信：huab119（加不到的能够加小号：luob119，或公众号留言，我加大家）

也能够来个人GitHub博客里拿全部文章的源文件：

前端劝退指南：github.com/roger-hiro/… 一块儿玩耍呀。~