从0到1，小白的前端摸索之路

时间 2019-11-06

标签白的前端摸索之路繁體版

原文原文链接

0基础，一年自学经验，8个offer，包括头条、去哪儿、猫眼、斗鱼、趣店、趣头条等，总价值180W前端

掘金的朋友们，你们好！ios

我是白小白，目前是一名电子科技大学信通学院的大四学生。回想起本身正式涉足前端的学习，已然过去一年又几。这一年里，有困惑、迷茫，也有坚持、不弃，既收获成长，亦收获一点小成绩。于此于文，将本身这一年来在前端上的摸索和历程记录下来。受惠前人，饮水思源。此篇心得若是可以给到您些许的帮助，那将是对小白莫大的鼓励。git

邂逅篇——为何选择前端？

先介绍下小白学前端以前的状况：学业成绩通常，有一点C的基础，了解一点Linux的皮毛，英语六级程序员

大三学年伊始，我面临一个选择：考研仍是就业（成绩太差留学没戏）。和同窗室友闲聊一通，他们的答案基本一致，又寒暄了高中的老同窗，获得的回复仍是一致：“考研” 。我并不惊讶，咱们学校深造率一直比较高（报名考研和选择留学合计85%左右），要知道秋招时在咱们班加上我选择就业的才3个，其中一个仍是国防生工做包分配，加上现实就业压力大，岗位竞争激烈，读研是最显而易见的选择。可是当时的我并无选择和你们同行，由于我不喜欢抽象又枯燥的编程。研究生成天都在教研室看论文，写代码，作项目，一想到这种场景我就头晕。github

肯定就业以后，我就着手作准备，由于本身性格比较外向健谈（话多嘴碎），我但愿从事一份与人打交道（唠嗑）的工做，加上本身高中有开淘宝店的经历，我首先把目光放在了销售，正好新学期校园迎新活动如火如荼的进行中，我报名了中国移动的校园直销队。第一次作销售，心情仍是很激动的。三天半的活动结束，咱们队的业绩其实还不错，可是我肯定销售不会是个人归宿：天天都要保持微笑不厌其烦跟别人介绍产品，有时获得的只是一个冷眼旁光，还获得处跑处处看，太累并且价值（工资）不大。web

第一次对前端有正式的认识，来自于学校工做室的招新宣讲，当时台上的同窗介绍前端的话语我还依稀记得：“学好JavaScript，走遍世界都不怕，既能先后端，又能桌面移动端，上天下海，无所不能”，当时的本身听不太懂，可是感受很厉害的样子。今后，前端在我脑海造成了初步印象，回去简单Google一下，发现对前端还有 “简单易学”“门槛低” “工资高”等形容，愈来愈感兴趣（本身零基础），在逼乎大神的推荐下，我从imooc前端路径和FCC前端学习路径开始了个人前端入门。面试

由于有C语言的编程基础，跟着路径学习阻力不大。一个月断断续续，把基础部分都学完了（过一遍），初步了解了前端三剑客HTML、CSS和JavaScript，路径刷完以后，我开始尝试脱离路径教学独立写一个页面，从结构、样式到逻辑。好了，问题来了，我发现本身根本写不出来（更准确来讲根本不理解），HTML标签为啥这么用？CSS盒子模型怎么写？JavaScript面向对象咋理解? 越写越不理解，越写疑问越多，越写越崩溃。。。写了三天放弃了，以为本身智商不够，可能真不适合编程，不适合作技术。ajax

双十一临近，本着体验生活和了解工做的初衷，我报名了京东临时工的招聘。先在成都京东总部进行了初步的培训后，咱们被分到各个站点进行工做，工做内容单调又无聊：卸货、分拣、派单、客服、退件和查询（我基本都在站点不用出去）。问了一下身边的小哥哥，他说天天工做就是这样，来车的时候忙一点，其余时候很闲，工资的话在成都能吃能喝。了解到京东配送的大概流程还算有点收获，我发现京东ERP系统（系统很复杂）都是用Firefox打开，我好奇他们为啥必须用Firefox（其余浏览器不行吗），他们回答我他们也不知道，只是公司培训他们要这么作。正则表达式

双11结束以后，我又陷入迷茫了，我到底能作啥？销售是不可能销售的，运营公关又嫌单调，编程又很难理解学不下去。心想，本身毕业只能找个不喜欢的工做糊口，要不放弃就业，回去跟着你们考研。当时看了几篇文章，再一次感知到技术的重要性和必要性，又去请教了学长学姐，告诉我不要轻易放弃，要相信本身。思来想去，再次把目光聚焦到以前没写完的页面。算法

学习篇——怎样学习和作了哪些准备

17年双十一以后，我正式下定决心走技术这条路，总结以前的学习教训，从新思考如何学习前端

我必须从新去思考，去检讨本身的学习方法和方式。这一次我花在检索和收集信息的时间更多了，除此以外，我还试着去看前人的学习心得和经验，最后获取到比较一致的建议，那就是必须以基础知识为核心，系统性、辐射性的进行学习与积累；在多数前辈的推荐下，我去图书馆借了一本《JavaScript高级程序设计》（第三版），此后的时间，不管是在课堂仍是在宿舍，一有时间我就坚持看。

刚开始看高程三的时候，被这本书的厚度吓到了（毕竟我都不咋爱看书），并且专业性较强，对此有必定的心理负担。大概花了三个星期的时间，天天看20，30页，而后去理解其中的内容，整书看了个十有八九，看完以后真正对JS、对前端有了一个宏观的认识，以前不理解的知识点也经过系统学习后联系了起来，对比以前的路径学习，我认为路径学习并不适合初学者，由于知识点相对分散、零碎，先后知识点逻辑性关联性不强，学习过程当中很难造成总体性认识和理解，事后容易忘记，书籍是人类最好的朋友。我以后的收获离不开这本书的启蒙，这是每个FEer都应该首先阅读的书。

继续个人前端之旅，当时的本身因为实践较少，感受CSS甚至比JS还要难以掌握及运用，不知道你们是咋学CSS的，我一直找不到好的方法去学。CSS有大量零散的、须要记忆的特性、属性和属性值，不常用很快就会忘记。从学JS的思路切入，先理解原理先掌握大局观，虽然有不少属性（还在一直增长），可是基本原理和框架不变，小白认为：CSS选择器与权重、盒子模型与BFC、经常使用属性（display、position、float等）、块级元素和内联元素、层叠上下文和常见布局是须要重点掌握和熟练的。看过张鑫旭大神写的《CSS世界》，以为还不错，可以帮助你构建起对CSS的大局观，可是我的感受整书在逻辑性上稍稍欠缺一些，读起来有些费劲（大神原谅我这么说）。

在以后的学习中，我了解到微信小程序，那时候正好是小程序大火的时候，开发者数量急剧增加，因而我也凑了一波热闹。可是苦于没有什么实战经验，我在慕课网购买了一门小程序的实战课程（149元，感受挺值的），此后便跟着视频和老师进行本身第一个demo的实践。每节视频我都仔细看，看完就亲自手写每一行代码，跟上老师的进度，遇到不会的或者出错的我会从新回去看视频，一遍看不懂就多看几遍，而后对比出错的地方，进行总结和学习 , 也正是这门课的契机，我开始学着去看文档，去查文档，用文档解决问题。除此以外就是老师讲授的调试技巧和经验，学到了不少只有在项目中才能体会的东西。个人第一个真正的实战demo也完成了。

寒假临近，我深知不能闲着，因而我申请了学院的P2P项目《搭建基于LNMP的学生论坛系统》。一方面回顾一下Linux的相关知识和操做，一方面锻炼下本身的项目能力。整个项目花的时间很少，我使用了Discuz框架，主要难点是在Linux环境中安装和配置Nginx、MySQL、PHP环境，最后使用ngrok服务作了内网穿透，申请了免费域名作CNAME解析，让公网也能经过域名访问。目中途由于本身装错不兼容版本的软件，在穷举了全部网络给出的解决方案后仍不能解决错误，我绝望了，最后选择了推翻重作。第二遍有了教训以后轻车熟路，但仍是遇到了很多新问题（好比环境搭好以后没法解析CSS，致使页面没有样式），不过都没能阻挡我，一一解决。下图是本身参考了ZUK社区作出来的前端重构页面（我以为挺好看的哈哈）

18年，开学已是第六个学期，正值金三银四的春招季。小白原本也想着去投递找实习，看了几家公司的JD，无奈本身的技术栈（前端框架还没接触过，后端也不了解）还没有成形放弃了。仍是先着力如今，把基础打好。当时本身正在看《图解HTTP》补补网络基础知识。

不久后便迎来了个人第二个项目，这是一个外包项目，一位研究生学姐联系上咱们，须要咱们组成一个小团队实现一个基于微信小程序，专一于成都户籍政策信息汇总和加工输出，解决用户相关信息获取成本高、质量低的痛点的产品。这也是我第一次参与到团队形式的开发实践中，咱们从产品调研->需求分析->商业策划->团队分工->项目排期->开发工做。在整个项目活动中，我接触到钉钉、Tower等团队协做软件，认识到git/github、码云等代码托管工具，更亲身经历到团队中FEer的工做流和报告流，须要和设计师沟通原型和UI，须要和后端交流接口和业务，须要和PM讨论需求和功能。整个项目的时间持续了将近俩月，最后因为其余缘由被迫中断，非常遗憾😭，只留下一些页面。。。

在小程序的学习和开发过程当中，愈来愈体会到ES6的重要性和必要性，不管从代码简洁上仍是开发效率上（亦或是市场需求上），其效果和做用愈来愈凸显，当时在你们的推荐下，我买了一本《JavaScript忍者秘籍》（第二版），这本由jQuery之父撰笔的备受好评的工具书，成了我JS（ES6）启蒙的第二本书，在书中了解到ES6诸多新特性、优缺点及其适用场景，每一章后面都有针对的习题，可以检验和巩固本身的理解。

转眼已经是4月底，当时腾讯正在举办第一届大学生微信小程序应用开发赛，看到进入总决赛的队伍将有机会进入到腾讯微信总部实习，小白立刻找了搭档报名。一开始咱们准备作小游戏（当时小游戏已经红红火火），无奈被告知小游戏类目不归入这次比赛范围。咱们临时调转了方向，搭档是游戏的技术栈，无法帮我分担小程序的开发需求，后来干脆开发我来，文档他作。时间不等人，咱们必须抓紧，没有PM，没有UI，没有后端，怎么办？那本身来作PM，作UI，作后端！咱们作了一个大学生校园闲置平台IoS（灵感就是校园版的闲鱼），旨在简化交易流程，下降交易成本，让同一所学校的同窗能够更加省心快捷的流通本身的闲置物品，从立项讨论到最后做品提交（完成），咱们只用了15天，并且仍是两个小白。这个比赛项目让我第一次接触到先后端联调开发流程，为了写接口CRUD，我学了一点Node，配合Koa和MongoDB勉强知足业务需求。咱们的做品在校园选拔赛中得到前十（60只队伍）的成绩，被推荐进入西南赛区分赛。

进入5月份，我正式接触到前端框架，选的Vue，跟着官方文档和一些教程，我也写了一个todoList的Demo入门，了解到基本的模板指令、语法、框架特性和组织结构（当时第一反应就是和原生小程序好像啊，后来才知道，应该是微信的Developer借鉴了Vue思想，Vue又借鉴了React的思想）。配套的全家桶也入门了一点，Vue-router、Vuex、Vue-cli和Axios。因为没有更加深入拓展地实践和学习，对Vue的理解只停留在皮毛和表面。先无论，我得去找找暑期实习。

实习篇——我与公司不得不说的秘密

无面试经验，暑期实习投递10家公司，收到2家offer、1家意向书，第一次有工资领真开心

正值学校举办双选会实习生专场和 ‘实习僧’ 科大线下活动，我带着简历去试试，第一次参加双选会的记忆至今难忘（成都的小伙伴要是感兴趣19年春招能够来科大致验一下哈哈）：车水马龙，鳞次栉比，如遇赶集的闹市，明星公司的“摊位”前纷纷排起了长队，招呼声、交谈声不绝于耳，真是好不热闹！我打印了10份记录着上文经历的简历，循着本身的感受分别投了10家公司，有些公司当场笔试面试，有些则是另做安排，太多公司不认识，当时只想找一家愿意收留个人去实习，也没什么动力去提早了解。当场收到一家公司的意向书，并且离学校还挺近（后来了解到，那家公司就是本校校友创办的，正在孵化中），本身不太想去初创公司，婉拒了，回去继续等其余的通知。

几天后我接到一个HR小姐姐的电话，表示个人笔试已经经过，须要约一个时间进行面试，这是我第一次接到正式的面试通知（心想这家公司应该不错，流程正规）。几天后，面试如约而至，一面技术面，是一位稍显文艺、面相友善的面试官（后来入职才知道是经验十分丰富的前端老司机，个人mentor，真是缘分），大体总结一下当时被问到的内容：

事件委托与事件模型（捕获->触发->冒泡）
HTML语义化和规范标准
Event Loop和消息队列
CSS盒子模型和BFC理解
闭包的理解和做用域
原型与继承（有几种继承方式）
浏览器缓存和相关API
0.1 + 0.2 不等于 0.3？电商项目中涉及小数咋处理？
用过哪些ES6语法，介绍一下
跨域产生的缘由和处理方式

由于是实习生，问的都是比较基础的知识点（这些基础题你们确定都会），也没有让手写代码实现的要求，但这是我第一次面试，当时仍是挺紧张的，有些题答得很差。在忐忑的心情中，被告知一面经过，二面是另外一个身材魁梧，表情严肃的面试官（这是个人leader，UED老大）。看着挺有距离感的，其实交流起来很和善，我觉得他会问我更深刻的题目和知识，结果没有，问了一些个人大体状况：学什么专业？上过什么课？老家是哪的？能实习多久？20分钟结束以后就跟着小姐姐进入HR面了，HR们问的问题具备共通性，好比咋学前端的？为啥选择前端？有什么兴趣爱好？大学作过什么印象深入的事情？等等，这里就不浪费篇幅仔细描述了，以后就是和另外一个HR小姐姐肯定入职和实习的细节。小白也是在这小姐姐那里第一次了解到头条及其“可怕”的薪资（如今回想起来，这难道是冥冥之中的神秘力量？）

另外一家公司是电话面试，面试官主要问了JS基础知识（就是常问的那些，没有印象深入的）和简单的算法题（一个数组中如何查找重复出现2次及以上的元素），还有一道常问的题：进程和线程的区别？本身答得都还不错，40分钟的面试很快过去。而后是和HR的交流，薪酬、实习时间和地点的细节肯定。

一周后我收到了两家公司的offer邮件，一家是G7（成都）智慧物联网，一家是上海牵趣网络科技公司，我选择了留成都，毕竟方便又熟悉嘛。拿到offer就安心准备各科的期末考试了，学业可不能掉链子鸭。

暑期开始的第一天，我到公司报道入职，今后开始了为期三个月的实习生活。正式了解到公司在全国四个城市有base，成都是主要的研发中心，公司规模在1500+，主营业务以商用车车联网解决方案和数字化业务为主，客户包括京东、顺丰等，在这个垂直细分领域是一家独角兽（个人眼光果真不错）。

UED总共有30+人，我被分到车队运营产品中心，这个部门主要负责三个产品，一个Web端车队运营系统，一个给司机用的hybrid APP（包括小程序端），还有一个炫酷的大屏监控项目，极大地丰富了个人眼界。实习的过程当中，我认识到不少厉害又谦虚的前辈，特别是个人mentor（启蒙导师），老是耐心地为我讲解知识点、帮我解决问题。小白在公司不只了解到详细严谨的立项->研讨->排期->开发->测试->上线流程，还在mentor那里学习到经常使用的开发工具和开发经验，好比用抓包工具Charles代理资源。因为部门负责的产品和业务比较丰富，本身有幸接触到不一样形态和平台的开发工做，好比Web端项目迭代（SPA等），Hybrid开发与native端进行协做联调，小程序端的发布，最刺激的就是大屏项目（虽然我没怎么参与到新迭代的开发），炫酷吊炸天，使用WebGL和ECharts进行渲染，基于GIS的车队数据可视化。

由于是实习生，mentor分配给个人任务都不难且合理，一边熟悉工做环境，一边上手项目代码，工做强度也不大，我是标准的965（只加过两次班），公司天天加班的人也很少。刚开始不是很熟悉流程和代码，我回到租房还得继续coding，后来渐渐熟悉了，节奏就比较稳定。公司氛围不错，UED的同事们天天都会一块儿吃饭，互通有无，一派和谐景象。天天晚上我都会抽出时间自我充电，每周六周日我也会坚持去公司学习，由于公司比较温馨，有显示器、空调、微波炉和人体工学椅，哈哈哈哈哈哈。也是在实习的这段时间，我抓紧时间把个人基础补上。

开发工做之余，我总结概括了常考知识点，包括前端部分，浏览器部分，网络协议部分，算法和数据结构部分等，这里我要强调一下：算法很重要！算法很重要！算法很重要！一直以来FEer写业务逻辑看似不涉及过多算法，从而忽略了算法的重要性，可是若是你的目标是大厂，算法是必定逃不过的（我在后面的秋招中深入体会到这点），本身算法基础很弱，我就从最简单的《算法图解》看起，一边刷LeetCode，一边看书和博客。这里把本身学算法的步骤介绍一下：

阅读算法入门书籍，理解和记忆基础知识。好比时间复杂度、空间复杂度，基础的数据结构等
将基础算法用JavaScript描述和实现出来。好比常见的排序查找算法，链表二叉树结构等
刷LeetCode，先本身尝试解决，不能解决看别人的解析，本身再用JS实现。强烈建议刷算法题去LeetCode等专业平台进行，由于除了有大量优质经典的习题，这里又是面试题的素材来源，还有严谨的测试用例供你验证本身的代码，切忌本身随性刷题！
测试经过的题，要尝试去思考其余方法从时间和空间两个维度进行优化，面试的一大考点就是先问你实现，再问你优化，好比下面这道题：

暴力循环的思路O(N*logN)你们都能想到，可是你能想到时间复杂度更低的方法吗？（腾讯面试题）

给定一个整数 n，计算全部小于等于 n 的非负整数中数字 1 出现的个数。示例: 输入: 13 输出: 6 解释: 数字 1 出如今如下数字中: 1, 10, 11, 12, 13 。

一转眼到了9月份，金九银十的秋招拉开帷幕。随着和同事们的相处、了解加深，我愈来愈喜欢G7，mentor、leader以及前辈同事们都对我很好，公司的发展也颇有前景，工做不累还能学到不少东西，漂亮的小姐姐也不少。当时我甚至想过放弃秋招，放弃本身大厂的目标，留在G7。但是生活就是这么妙趣横生，当时正值公司新一轮的融资，公司上下都锁hc，没办法走转正和三方流程。思考良久，在国庆节前夕和leader提了离职，当时leader说：“先让我去秋招，职位给我留着，想回来的时候再回来”。感谢G7，感谢前辈们，秋招拿不到好成绩没脸回去见大家。（愈来愈以为，最后去头条就是注定的）

秋招篇——个人180W面经

16场笔试，12场面试，8个offer，总价值180W+，平均offer价值22W+

小白回到学校已是9月底，正式加入秋招队伍。时间上已经晚了，错过了很多公司的网申投递，有些公司（阿里8月中旬就截止网申了）8月中旬就开启秋招行程了，校招的同窗必定要注意时间，尽早作准备哦。来学校宣讲的公司不少，那段时间还真是挺忙的，天天跑宣讲会、作笔试、跑酒店、作面试、回宿舍、作线上。。。接下来小白将会把本身的面试心得写下来，但愿能给屏幕面前的你些许帮助。

首先假设咱们基于一个共识和三个约定：

共识：题是刷不完的，题背后的知识点（网）才是核心，无限的东西就不必去学习记忆，有限的东西才有学习记忆的价值

如下面试题不只有我在面试中遇到的，更有为了面试发掘于各个渠道的
如下心得体会面向校招偏向基础，但愿能给同仁们和同窗们一些参考
若是看官大佬们以为写得还不错愿意转载，必定要注明出处和署名哦

一. 面试到底在考察什么？

面试是一种考核候选者综合素质的考核形式，说白了就是考核四个方面：听、说、读、写

先来讲说 “听”

面试官发问经常不会直接问你某个知识点，而是经过一些实例和问题来间接考察你相关知识点的掌握状况。好比如下两个例子：

问：JS中异步任务既有setTimeout，又有setInterval，还有Promise等等，那这些任务的执行顺序是怎么肯定的呢？（Event Loop 和任务队列）

问：事件委托中为何父级元素可以监听到子级元素的事件呢？（事件模型和发布订阅模式）

面试过程当中准确解析出面试官的发问意图十分重要，一旦解读出现误差，回答的内容可能会偏离面试官的指望，为你的面试结果埋下隐患。

如何提升“听”的能力呢？

方法就是仔细听多交流，遇到不理解或者不肯定的问题时，大胆询问面试官，进一步缩小范围、锁定方向再完成做答，不要有太多内心包袱，该问就问。

再来聊聊 “说”

有时候回答问题咱们知道是那个意思，可是就是表达不出来或者表述不清楚，没办法让面试官明白本身的思路和意图。这个问题是不少候选者的通病，问题我听懂了，知识点我也会可是我说不出来。

为何会出现这种状况呢？答案是：对知识点只了解个概念和表面，原理和本质不了解

咱们常常去看别人的面经和解析，面试题都是大同小异的，可是一千个面试者就有一千份解读，很多人看面经每每只关注个题目、结果和结论，内心想着背下来面试的时候把结果一说完事。而忽略了过程和原理，别人解读得再好再详细，你看不进去不理解都是无用功。

我想你们小时候都有这种经历：

考试的时候，把 “+” 当作 “-”，亦或是把题目看错（题目让你选不正确的，你看漏了一个“不”）等等马虎粗心的表现让你和100分失之交臂，只能拿个9八、99分。并且相似的事还多次发生，过后的检讨就是“此次粗心了，下次细心点，知识点都会”。其实不少人（家长和孩子）根本不理解这件事的实质，一次两次的偶然尚能够解释为“粗心”，可是常常发生那就不得不思考其缘由了。实质是啥？实质就是你对知识的熟练程度或者对考试的理解程度还达不到100%，只有98%、99%，因此你才会一而再再而三的“粗心”，别小看这一两分的差距，这是要花充分的努力才能填补的差距（对于不少人来讲就多是一辈子的差距）！

如何解决“说”不出来的问题呢？

你能说出多少取决于你有多少“东西”，立足基础，拓展知识的广度和深度才是最好最根本的解决方案，而紧张和情绪上的问题，每每多面两轮就能克服。

接下来看看 “读”

这个比较简单，就是阅读能力、理解能力和审题能力；面试官有时会抛出一个命题或问题，你不只须要对问题自己作出判断，还要对答案作一个全面的分析。你对题目的理解将直接影响你这道题的完成质量。请看下面这道题：

如下用来隐藏DOM的方法，哪个更好？A. display:none B. visibility:hidden

我想一些人会选B，理由显而易见。

①由于visibility:hidden不会销毁dom，只是视觉上隐藏，只会引起重绘而不会引起回流，性能上占优；而display:none会销毁dom引起回流。

这个答案没错，但不全面，只能拿60分；你看看下面这个回答会不会更好一些呢：

②display和visibility哪一个更好取决于不一样的场景，若是须要隐藏效果的dom在页面初始渲染时是隐藏的，那使用display更好，由于visibility会将dom渲染出来再隐藏，增长渲染成本；可是若是须要隐藏效果的dom在初始渲染时是显示的，那使用visibility更佳，缘由如①

“读”的能力创建在你充分的思考和丰富的实践上，不断实践不断总结经验，学会甄别面试官设下的坑。（记一次面试官问：一个无序数组怎么实现二分查找？）

最后来谈谈 “写”

面试题中一大环节就是让你手写代码实现（包括用笔，用键盘等），并且这一个环节每每又是难度最大、价值最高的部分，将直接决定你的整场面试质量！这个环节发挥好了甚至能挽救你以前问答题答得很差的颓势，实现弯道超车。

纸上得来终觉浅，绝知此事要躬行

前端知识多而杂，有些知识点理解起来简单，优缺点和应用场景也能轻松掌握，甚至还常常出如今咱们平常工做学习中，可是面试的时候让你手写出来，你不必定能写出来，你还别不信这个邪，如今咱们来作个测试，给你几分钟，拿出一张纸，在不借助外界资源的状况下，尝试手写原生ajax请求（高频考点）

几分钟过去了，是否是发现本身连实例的构造函数名都忘了？监听事件名是onreadystatechange仍是onreadystatuschange？status和readyStatus分别是啥？都有哪些值？分别表明什么意思？POST请求是否是忘了设置请求头？写完是否是发现忘了作IE6的兼容判断（window.ActiveXObject）？

再问一个只有1%的前端能回答上来的问题，咱们天天都在使用双击，你知道双击事件名是啥吗？

程序员的编程能力直接影响其编程寿命，手写代码就是你编程能力最好体现。“写”的能力只能经过常常写和每天写来提升。熟能生巧，勤能补拙，这是我本身感悟出来的秘籍。

二. 面试要考那些知识？

前端涉及到的知识点实在是太多，面试题也是层出不穷，别说刷题了，题看都看不过来。小白认为那些须要死记硬背的API、属性名等并不重要，不能把前端学成文科。应该把注意力放在核心的基础知识上，在理解的基础上分别在横向、纵向去拓展知识网络，我总结了一下面试常考的题型和内容。

题型主要是两类：问答题和编程题

问答包括通常问答题和场景设计题，主要涉及到：
- JS基础知识
  - 基本类型与对象（typeof判断，内存位置和类型转换）
  - 数组与高阶函数（经常使用API，哪些改变原数组哪些不改变？）
  - 闭包与柯里化（解释、应用场景和优缺点）
  - this与做用域（改变this的几种状况、做用域链）
  - 原型与继承（原型链与四种经典继承方式）
  - 异步与单线程（event loop和任务队列，setTimeout等）
  - ES6新语法和特性（let、const、箭头函数、模板字符串、Promise、模块化、class等）
  - 设计模式（常考单例、工厂和观察者模式）
- HTML与CSS基础
  - HTML语义化与标签（优势，常考标签meta、link、img等）
  - HTML5新特性（postMessage、语义化标签、webStorage和Canvas等）
  - CSS选择器与权重（伪类伪元素，种类与计算方式、样式覆盖）
  - BFC和层叠上下文（解释、生成与应用场景）
  - display、position参数（默认值，各类属性值之间的区别，sticky知道吗？）
  - 盒子模型与文档流（IE盒子模型、块级元素与内联元素等）
  - CSS3新特性与动画（border画三角形，box-sizing，animation等）
  - 水平垂直居中布局和两栏布局（传统方案）
  - flex布局（属性与值的解释）
- 前端框架（Vue举例，我是Vue栈）
  - 基本语法、指令（v-if、v-for、ref等, 知道自定义指令吗?）
  - 父子组件间通讯（属性传值和事件emit）
  - Vue-router 和 Vuex（解决了什么问题？原理、优缺点）
  - 双向数据绑定原理（最好能手写一个简易实现）
  - Vdom与diff算法（遍历细节与AST）
  - v-model原理（语法糖）
  - SPA与SSR优缺点对比（SEO、重定向等）
  - Vue与React比较
- 浏览器基础知识
  - DOM操做（基础API要熟练）
  - 事件委托与事件模型（要能手写代码）
  - 浏览器渲染机制与过程（常和性能的问题挂钩）
  - 垃圾回收算法（新旧两种算法的区别）
  - 内存泄漏与回收（场景与解决方案）
  - 跨域（原理和方法、跨域预检）
  - 浏览器缓存（cookie与session区别、webStorage）
  - 前端性能优化（白屏问题、首屏加载、CDN、优化方案）
- 计算机网络协议知识
  - DNS协议与查询方式（基于UDP）
  - http1.0、http1.一、SPDY 与 http2.0对比（发展和特性）
  - http常见状态码（常考30一、30二、40一、403和503）
  - http缓存与304（强制缓存和协商缓存）
  - 请求响应报文头（知道的越多越好）
  - https 与加密方式（https握手过程与优缺点）
  - 长短轮询与 WebSocket（解释与比较）
  - TCP与UDP对比（优缺点与适用场景）
  - TCP协议（三握四挥、超时重传、滑动窗口等，大厂考得很细）
  - XSS和CSRF（解释与如何防范）
- 算法与数据结构和操做系统
  - 基础数据结构（链表、堆栈和二叉树）
  - 时间复杂度与空间复杂度（可以分析出一个算法的复杂度）
  - 排序算法与查找算法（常考插入、快速排序和二分查找）
  - 线程与进程（联系与区别）
  - 内存死锁（理解与避免）
  - 各类LeetCode、剑指Offer算法题（多刷多看）
场景设计题是最能考察候选者综合素质的题型，记一道本身遇到的场景题：

要实现一个搜索组件，要求可以根据输入的关键字实时检索，将检索结果显示在下方，若是让你来作这个组件，你以为有哪些设计要点与难点，又有哪些可能的坑须要注意？（猫眼面试题）
编程主要分为算法题和业务原理题

准备算法题最好的办法就是多作，首推LeetCode，给你们推荐一个笔记，里面有解析 CS-Notes

这里小白也把本身遇到过的算法题大体列举一下：
- 如何实现一个随机字符串？
- 将数组随机打乱，有什么方法？
- 有两个变量a和b分别储存一个数值，不借助第三个变量交换a和b的值，你有几种方法？
- 不使用Set一行代码实现数组去重
- 如何查找数组中重复的元素（出现2次及以上）？
- 写一个计算字符串中每一个字符出现次数的函数
- 快速排序、插入排序和冒泡排序
- 二分查找及优化
- 怎么判断链表是否有环？
- 返回二叉树的最大深度
- 实现两个超出Number范围表示的“大数”的加法
- 返回一个字符串中出现次数最多的尽量长的子串和这个子串出现的次数
- 用两个数组及其API实现一个队列
- 一个整数数组，求子数组的最大和
- 等等
编程题另一类须要手写实现的是业务原理题，主要包括如下这些：
- 手写setTimeout
- 手写instanceof
- 手写一个闭包函数
- 手写new
- 手写bind
- 手写Promise
- 手写 ajax（包括用Promise封装ajax）
- 手写 jsonp 封装
- 手写事件委托
- 使用reduce实现一个map
- 手写实现一个模板字符串
- 手写实现一个箭头函数
- 柯里化：实现一个知足sum(1)(2)(3).value(), sum(1, 2)(3).value(), sum(1, 2, 3).value()的函数
- 解析URL的参数（正则或者String API）
- 数据扁平化、降维处理（好比给你一个有多层嵌套的数组，让你解析出来）
- 正则表达式：连字符命名转驼峰式命名（互转）
- 分别使用深度优先和广度优先实现对象深拷贝
- 防抖和节流的实现

小白在秋招中遇到的题目和知识点大体如上。接下来补充一下能为你的面试加分的知识点或技能：

Canvas
WebGL
PWA
React Native
WebSocket
Node.js
其余新颖的技术

三. 大厂面试有什么不同？

小白面过头条腾讯美团这些大厂，也面过去哪儿猫眼有赞这种明星公司，还面过趣店斗鱼趣头条此类独角兽，更有几家名不见经传的小公司和初创公司。做为一个有理想有抱负的好青年，相信你们心中确定都有一份大厂的情怀吧（小白是这样的😆），那么大厂的面试和其余公司有什么不同呢？小白来聊聊本身的感觉和体会。

1. 面试轮次多

大厂的面试区别于其余公司最明显的一个特色就是面试的轮次与周期比较长，技术面最少都是三轮（头条3轮，腾讯3.5轮，美团3轮）。而其余公司技术面多为2轮甚至1.5轮面试，成功经过后进入HR面。因此面大厂以前，必定要作好能量和水分的补充，保持良好的心理状态和精神状态。

2. 知识考察细

虽然面试的公司不一样，可是出的题老是大同小异，有些经典题甚至屡试不爽。在知识考察上大厂和其余公司最大的区别就是考察粒度细，考察范围广。好比下面这道你们见的最多的题：

从输入URL到页面呈如今眼前，都经历了哪些过程？

这道题很能考察FEer的基础知识和综合素质，因此无论大小公司都会考，但大厂的考察细节和考察范围很广，我拿腾讯的面试举例，在你回答的过程当中，面试官会问你：“ DNS查询有几种方式？怎么肯定使用哪一种查询方式？TCP为啥须要三次握手，两次握手不行吗？TCP每次握手发送的报文类型分别是啥？了解TCP的超时重传机制吗？滑动窗口怎么用？服务器返回的报文丢了会发生什么？MAC层了解吗？有IP地址了为啥还须要MAC地址？路由器缓存了解吗？”

再举另一道几乎每家必考的题：

MVVM的实现原理谈一下你的理解。（对Vue来讲就是双向数据绑定原理）

Vue技术栈的朋友确定都知道是使用Object.defineProperty()重写setter和getter来监听属性变化，配合观察者模式，通知变化，最后渲染变化（固然这是2.0的原理，3.0已经用Proxy重构了）。一样的题头条会这么问你：“ 你知道defineProperty有什么缺点吗？你了解defineProperty的基础用法吗？能不能利用它实现一个简易的双向绑定呢？发布订阅模式和观察者模式有什么不一样？”（若是过年后去面头条，就是换成Proxy问你了）

从新回顾一下你所了解的基础知识，其原理、细节、优缺点和应用场景你都了解吗？

3. 看重算法、看重手写代码

小白在上文中提到过大厂对算法是必考的，并且难度和要求只会更高。在这里我再次强调一遍：无论你认为算法对前端有没有用，进大厂先得过算法这道坎。对于其余公司算法通常就考你简单的排序和查找（插入快排等）。大厂可不会就这么简单放过你，对复杂度的判断与优化，排序的稳定性与应用场景，各类LeetCode的原题变题（头条是特例，算法考得很难，可是阿里腾讯也不简单）

除了算法，大厂面试很看重手写代码这个环节，每家必有这个环节（不止一轮）；一些小公司可能没有让你手写代码的环节，整场面试用嘴说就够了。若是你正在准备大厂的面试，那必定要去熟练本身的代码速度和精度（有赞当时看我写代码写得慢直接挂了），不光是要关注正确率，细节也不能忽视，好比缩进、命名和注释等。常考的业务题必定要熟练，多写多练，理解原理后测测本身能不能手写实现一个。

4. 不一样的公司，不一样的灵魂

不一样的公司文化不同，价值观不同，固然面试也就不尽相同。我mentor以前跟我说：面试就像找对象，彼此都在找合适的对方。互联网公司这么多，总有你青睐的吧，毕竟，一个有趣的灵魂会渴望另一个有趣的灵魂。

在全部小白面过的公司里面，面试体验最好的是猫眼，其次是腾讯，最差的是头条。

猫眼的面试是互动式面试。面试官手写题目，候选者手写代码，你一问我一答，舒适的小提示和不经意设下的坑都让你的大脑与舌头迅速升温。四轮面完不以为累居然有点享受，思索回味。小姐姐说他们公司标准的965，嗯，你没看错。。。
腾讯面试官都很健谈，从语气中你能感受到这个公司充满了欢乐与活力。腾讯最喜欢考的就是网络，3轮电面，每轮如一，网络相关的知识占比60%，其余33%，再加一道逻辑题结尾，哎玩得就是这么刺激！请听题：

一个班里有60%的同窗喜欢足球，70%的同窗喜欢篮球，80%的同窗喜欢排球。请问同时喜欢篮球和足球的同窗有多少？

去哪儿的面试效率极高，面试经过当场谈薪资发offer（我两个小时就拿offer了）。我想在大陆无公司出其右，面试难度中等，面试流程简化，公司新人培训方案全面且合理，是一家能够放心的公司。
趣头条，2018崛起的新秀，你能够看出他们求贤若渴，面试偏基础偏应用，HR小姐姐全力以赴。公司充满对校招生的善意（去实习的同窗说对校招生很好），还有，每一轮结尾的情商题也是他们的特色：

你和你的同事发生争执，你怎么处理？ leader的决策出现失误，意见不合，你怎么处理？照着leader说的作仍是对着干？

头条的面试简直就是“地狱”，时间长题目难不说，都在预料之中。可是面试官不屑的面孔与冷漠的眼神能让屏幕外的空气凝固，他们故意为之，传说中的压力测试，题难不死你我用表情杀死你。另外，他们很喜欢考手写代码，没有HR面。
其余公司的印象就不深入了，平平淡淡，此刻我想起一种修辞手法——白描。

四. 简单聊聊VP面和HR面

VP，指副总裁。我这里只是借用这个词引伸技术面的最后一轮（通常是你的leader或者部门直系领导面你）。虽然说是技术面试，可是面试内容已经不是具体的知识点和题目了，而是想要了解你的大体状况，通常会问你项目作了什么？为何想作这个项目？在公司实习的过程当中学到了什么？聊聊你认为有前景的前端技术等等（斗鱼竟然问我支教的经历，作了什么事？有什么收获？）。总体比较轻松，不要有太多心理压力，天然表达就好。固然有些公司技术最后一轮照样问你大量的知识点，还很难，这种操做通常是大厂才会有！

HR，人力资源。通常到了HR面挂的可能性就不大了，但这不是说你就能够掉以轻心，马马虎虎。HR面主要干两件事：①了解你的性格三观 ②肯定你的薪资待遇你正常表达本身便可，HR都很擅长沟通，交流体验很好。若是你在HR面不幸挂了不要过多责怪HR，他们的权力不大。多是HC（人员编制）满了或者是你的面试排序较低，只能说你的运气稍稍欠缺一些。在大部分的公司里，HR的工做就是：在规定周期内招到知足公司要求的候选者，而且尽量压低人力成本。

五. 心态决定一切

作了这么多场笔试，面了这么多公司，小白有一些话必须得跟你说。在我刚刚参加秋招的时候，由于时间上已经晚了将近一个月，错过了很多大厂的网申，加上准备不充分，一开始接连碰壁和失败，阿里百词斩笔试就挂了，美团有赞面试没经过，知乎YY没消息没后续。那段时间我情绪很失落，开始怀疑本身，否认本身，以为本身一无可取，可能找不到工做。但是虽然我天天都在失败，每晚都会惆怅和迷茫，但我并无选择放弃 , 次日又象个没事人同样面对新的公司、新的挑战。终于形势触底反弹，本身作的多了面的多了，有经验有成长了，开始收获了。

直挂云帆济沧海 , 长风破浪会有时

越是艰难和挫折，越不能放弃本身和怀疑本身，坚持下去才会有但愿有可能。马云爸爸说：今天很残酷，明天更残酷，可是后天就很美好，而不少人死在明天晚上。相信本身，你其实比你想象的还要强大，若是本身尚未认输，那就不叫真正的失败。愿各位在追寻的路上都能找到本身的灯塔和光明！最后晒一下头条给小白的offer，付出会有回报的！

附录：推荐一下小白以为不错的书籍和资源

书籍：

《JavaScript高级程序设计》（第三版）、《JavaScript忍者秘籍》（第二版）、《你不知道的JavaScript》（上中下三卷）、《CSS世界》、《图解HTTP》、《图解TCP/IP》、《算法图解》、《算法》（第四版）、《大话数据结构》、《如何高效学习》、《将来世界的幸存者》

刷题刷面经：

LeetCode 和《剑指Offer》：面试题、算法题的取材地，开拓思惟，开拓眼界。

牛客网：刷面经的第一选择，超多大佬大厂第一手面经新鲜出炉，墙裂推荐！

Github：绝对是程序员的最大福利，学会搜索（例如前文提到的CS-Notes）

技术社区与工具：

掘金、思否、InfoQ、Google、Wikipedia

收获篇——快乐才是最重要的

从正式开始学习到最后收获offer，正好一年。但当我回头看，我发现本身真正的收获并非什么offer，也不是什么高薪。我开头说过我不喜欢编程和写代码，确实，大学的前两个学年，我历来没想过本身会进入程序员这个行列，我以为人生就应该去作本身喜欢的事情（其实我就是给本身不想学习找个借口），那两年本身确实参加了很多社团活动与社会实践。

小时候的我对世界充满了好奇，很想知道到底有没有UFO，有没有外星人，尼斯湖真的有水怪吗？水怪长啥样？每晚看完《走近科学》，我都会裹紧小被子，惧怕野人把我抓走，那是一段充满了未知与神秘的难忘时光。后来上了大学，我开始厌倦学习，逃避学习，渐渐地失去最宝贵的东西——好奇心和求知欲。对生活没有什么指望和方向，天天沉迷网络和游戏，考试能及格就行，对学习这件事彻底提不起兴趣。

在前端学习的过程当中，我渐渐喜欢上了编程和代码，再也不反感它，甚至喜欢上了看书，对电子游戏的兴趣愈来愈小 ( 甚至会反感 ) 。你如今让我去学一门新框架新技术甚至新语言，我没有心理负担，反而以为很新鲜。渐渐的我找回了最初对学习的感动和兴趣，找回了好奇心，又一次感受到这个世界充满了美妙和乐趣。知识就是力量，学习让我快乐！

涉足程序员这个行列以来，接触到不少厉害的大佬和前辈。我发现他们身上有一种特别的魅力是其余人群少有的，那就是他们老是在不断学习前进，不断提升本身的认知，不断探寻这个世界的奥秘（有次看见大佬说：二进制就是世界的本源）。反而对物质没太多追求，毕竟收入这么高哈哈，而是注重精神上的追求，构建本身的精神世界，提升精神境界。这一特质深深吸引了我，我也想像他们同样，去享受知识与探索的乐趣。

程序员最广泛的目标是：“作一个有趣的人”，这是在其余人群所看不到的景象。程序员是一群尊重知识、追求知识和热爱知识的人，他们理性、友善、宽容，他们不会主动伤害别人，伤害世界，只是单纯的热爱知识，热爱生活。在小白看来这是群可爱的人，可以和他们为伍，很开心很激动！

写在最后的话：

这是我第一次尝试写做发表文章，每个字都是手码出来的，也是受大佬们的影响。小白水平有限，阅历尚浅，文中不可避免会有错误和不许确的地方，恳请大佬们可以指出，不吝赐教，十分感谢😆。本篇文章是小白这一年对前端的摸索和历程，若是可以给到您些许的帮助，那将是对小白莫大的鼓励和承认。