(附前端面试)如果你也正在焦虑,请你看看这篇文章
-
心态调整
-
你需要正反馈
去年因为情感、保研、奖学金、找工作不顺利等一系列的原因,我开始对自己失望,然后陷入了情绪困境和抑郁状态,就是我明明是个沾床就睡的人,却躺在床上睡不着直到两三点;我会突然出现莫名的情绪低落,脑子中出现一些不好的想法,比如我好差劲啊、我这样的人有什么意义;我必须戴着手环才安心,如果我丢了手坏,我的手部会很痒,然后心里很不舒服,就像听到别人划玻璃的那种不舒服感。
因为这样的心理状态,我开始畏惧,害怕和外人接触,学习地点从图书馆搬回了寝室,然后不怎么出门,情绪越来越差,不敢投简历,恐惧面试,因为怕被面试官否定,渐渐越来越消极,想去的公司从大厂放到了中小厂,然后退步到小公司,最后退到像我这样的人,有人要就行。
一次偶然的机会,我状态还算好的时候在某招聘网站上投了几份简历,有一个家公司很快给了我回应,我鼓起勇气把简历给了他,没想到发给他不到五分钟就给我打来了电话,我们聊了十几分钟(没有聊技术,大概就是对一些事情的看法),然后他说他那边ok了,不需要二面了,可以给我发offer,我很诧异,问他没有技术面嘛,他说本来是有的,但和我聊的比较好,觉得不用面试了,我问为什么,他说第一,从简历上看,我学校还可以,成绩也还可以,说明学习能力不错,第二,大学学了两个专业,说明自驱力也挺好的,第三,聊了几分钟,感觉我是个比较踏实稳重的人,有自己的想法,看上去也比较负责任。然后他说校招也不要求有很强的项目经验,前端嘛上手也不难,框架啥的进来再学也ok,公司可以给我成长的机会,我愣了几秒,当时真的很想哭。这是我拿的第一个offer,虽然薪资不高,但对我有莫大的意义,在一直自我否定的时候得到一些正面的评价,就像有人给了你一个救命稻草,我很感谢面试我的这个人,他给了我一些动力,能让我继续投,继续面,最终结果其实是我投的几家基本上都过了(虽然没有大厂,但我也觉得我的状态不适合继续面下去了,就选择了一个965的中小公司)
我后来在写这段经历的时候,想起了人格心理学老师的一句话,他说在当今社会,失败是成功之母这个说法并不可靠,很多时候,成功是成功之母,失败是失败他爹。所有当你情况比较糟糕的时候,不妨把目标设低一点,给自己一点鼓励,结果会慢慢好起来的。
如果你情况也比较糟糕,想找个人聊天的话,我愿意做您的倾听者,竭尽所能的为你提供一些帮助。
- 小马过河
面试到底难不难?考研到底难不难?进大厂到底难不难?这些都是小马过河的问题,别人的经验真的不一定有用,你不能只听人家讲,你要做的是根据自己的实际情况,选择一个适合自己的具体目标,做一个详细的学习计划,然后严格要求自己,按照这个计划去学习,一点点的进步。
别人的经验真的不一定有用,因为你不知道别人有没有什么其他的突出点,我有一个直系学姐,大三暑假成绩出来,知道自己保研没有希望了,才开始学前端,最后在10月中旬拿到了大厂(BATTMD中的一两家)的offer,时间差不多才两三个月,我知道这个事情后很惊奇,向她询问经验,然后她说就看了红宝书和es6两本书,框架都没怎么学,然后出去面试,把面试遇到的问题记录下来,面的多了,就知道面试哪些题了,然后把这些题记录下来,一个个解决。我很诧异,只会三件套简历都不一定能过吧,后来我向她要了简历才知道原委,整个简历上和前端相关的就三行,一行是熟练html,css,javascript,一行是了解ES6及http/https协议,还有一行是说参与过一个小程序项目。然后剩下的内容全都是竞赛奖项,科研论文,荣誉称号。整个简历给我的感觉就是这个人好厉害。
网上真的很多面试经验贴,包括考研、考公也是,一个不太恰当的比喻是一个人一边做俯卧撑,一边乘电梯到了高楼,然后他说自己是靠做俯卧撑上去的,那么你只靠做俯卧撑能上楼嘛。考研择校类似,有的人说这个学校好难考,400分都未必能进,劝你换一个学校,但有的人说自己复习了几个月就考上了。很多事不去做,就只能靠幻想,然后越来越虚幻,虚无,与其想这些,不妨去试试,尤其是面试这种低成本的事情。
- 时间的力量
你觉得多长时间能改变一个人?一个月够吗?
如果你是一个校招生,你大概率每天是能抽出来几个小时学习的,至少一天刷三道至五道的时间是有的,按平均值四道来说,一个月就是120道,top100可以刷完了,这太有意思了,一个月刷一百道算法题,这是一个你觉得自己能做到,但是实际上做不到的事情,这也是一个你以为你做不到,却可以做到的事情。
面对时间的雕刻,滴水穿石,枯木腐朽。
经常有人这么说,校招的时候拿出高考努力的劲头,有很大的机率能进大厂,说是这么说,但做到的有几个呢;还有一次我和一个已经工作的朋友聊天,当时我情绪还处在一个糟糕的状态,就说能进一个小公司找份工作就可以了,我还年轻,用时间换能力嘛,他没有像往常一样鼓励我,他说时间换能力,可能不一定会如你想的这样,他说他很多同学毕业两年多了,感觉能力一直没什么进步,一直在吃老本。真的是这样,当今天的自己和昨天的自己没有丝毫变化的时候,可能明年的自己也和今年的自己没啥变化。
我很喜欢《天才基本法》里面的两句话
一以贯之的努力,不得懈怠的人生。每天的微小积累会决定最终结果,这就是答案。
做你想做的那个人和那件事,无论什么时候,都不算晚。
- 学习的本质
教我教育心理学的老师是个很有意思的人,说了一些概念仅供参考
学习是指记住某件东西的能力,这项能力靠重复
记住后没有应用的学习是无效的
教别人能帮你更好的学会某样东西
如果学习像游戏一样有个进度条,那想学习的人就会多了
快速学习需要五个东西:合适清晰的目标、毫不懈怠的行动、动脑子的重复、及时的反馈、以及这四个过程中的专注
我补充一点,如果可以的话,学习过程中找个同伴吧,一是因为他律比自律有用,二是刚好两个人相互提问,能很好的应用费曼学习法,三是单打独斗太痛苦了
- 面试时间节点的问题
面试招聘常有金三银四(金二银三)和金九银十的说法,但这都是一个理想状态,在你实力没那么强的情况下,求职可能是一个比较长期的过程,不要给自己设置deadline,不是说十月之后就没有招聘,十月十一月,十二月,可能一家公司结束了招聘,又会有另外一家开始招聘,有人五月份六月份才拿到实习offer,而也有人在临近毕业五月甚至六月的时候才拿到自己满意的offer,一直面下去,多复盘,会有好结果的。
- 最后留两句话
第一句话是我在offershow上看到的,一个女生写给自己的男朋友
你一定可以看到这条吧。快放下吧,每天感觉你花很多时间在这玩意上,时不时给我截图。比较是无止境的,永远有比你高的大佬,人生是长跑,一份工作而已,多几千少几千又能本质改变什么呢?何况offershow上样本偏差也很大啊,不具有代表性和普适性的,何况你已经很优秀了啊,美好的事物很多,别被这东西蒙蔽了。
第二句话是北大中文男足的公众号,Just Lose It在去年9月28号发送的一篇推文,那一天我的朋友圈上铺天盖地的保研消息。
看着今天刷屏的保研截图,胡老师一个都没有点赞。
因为它不知道,今天的成功,究竟会让人明天继续成功,还是失败。他也不知道,今天失败的人,等待他们的会是成功,还是继续失败。生活嘛,本就不是线性的,起伏曲折,大多是命运。
而就算你的曲线是最差那个,失败完了又失败,那又能如何呢?还是那句话,退一步有退一步的欢喜。Just lose it.
好吧,其实我想说的是:人生广阔,并非只有大厂。
-
应对前端面试
-
以终为始,用JD去写你的简历专业技能
前端的专业技能怎么写,我觉得最好的办法是根据招聘网站上的jd去写,校招生的要求就是基础布局(html/css) + JS核心概念清楚 + 框架 + 一定的项目经验 + 计算机基础(主要是计算机网络和算法),这几个可以各占据一行作为专业技能嘛
所以你完全可以根据JD去决定你要学什么,简历上的专业技能写什么
注:下面的链接是一个校招简历修改的过程,内含广告,请注意辨别
https://mp.weixin.qq.com/s/Nd_U9hB5uRlCdMyxWpBVBQ
- 面试的本质就是考试
面试是一种考试,你只要把知识点掌握,然后合理的表达即可
HTML
-
html语义化标签(对语义化的理解)
-
文档声明的作用?
-
meta标签
-
html5新特性
-
src和href的区别?
-
行内元素,块级元素的区别?
-
link和@import导入样式的区别?
-
常用的图片格式和应用场景
-
常见的浏览器内核
-
srcipt中defer和async的区别?
-
需要注意哪些SEO
CSS
-
css选择器
-
css选择器权重
-
盒子模型(标准盒子模型和怪异盒子模型)
-
margin塌陷和margin重叠现象
-
如何清除浮动
-
css定位属性position(文档流)
-
flex布局(grid布局) (必问,可以看阮一峰老师的那篇文档)
-
css单位的区别?(px, em, rem, vw, vh)
9: display相关属性
10: BFC(高频)
- 常见布局方式 【 重点 】
-
居中的实现方式(必问)
-
三栏布局:圣杯布局和双飞翼布局
-
css画三角形
-
媒体查询
-
移动端响应式布局方式
-
less和scss/sass的基本使用
-
回流和重绘
-
z-index压盖顺序
-
过渡与动画
-
伪类和伪元素的区别
-
before和after双冒号和单冒号有什么区别?
20:css3新增了哪些特性?
21: css雪碧图的作用?
22: display:none和visibility:hidden、opacity: 0的区别
23: opacity和rgba区别
24: line-height如何继承?
- 如何脱离文档流
26: 怎么让chrome支持12px以下的文字
- 怎么画宽度为0.5px的线
Javascript(全都是重点)
-
数据类型(原始数据类型和引用数据类型,堆栈内存),数据类型检测和数据类型转换
-
数组常用方法、对象常用方法
-
类数组和数组的区别和转换,数组的检测方式,数组去重和排序
-
函数执行机制和执行上下文,执行上下文栈(普通函数,立即执行函数,箭头函数、构造函数)
-
闭包作用域(变量提升,arguments, 作用域与作用域链,闭包的应用场景,闭包优缺点)
-
内存泄漏和垃圾回收机制
-
this指向的规则(call/bind/apply的使用)
-
new和构造函数
-
原型与原型链的理解
-
继承实现的方式和区别?
-
深拷贝与浅拷贝
-
事件循环机制(任务队列,微任务,宏任务,同步,异步,进程和线程,浏览器线程)
-
JS异步解决方案(回调函数、Promise、Generator、async、定时器)
-
DOM选择器
-
常见DOM操作(增,删,改)
-
事件流的过程(事件冒泡和事件捕获)、事件处理程序(DOM0级事件处理程序和DOM2级事件处理程序)、事件对象、事件委托
ES6
-
let、const、var的区别
-
块级作用域
-
暂时性死区
-
解构赋值
-
箭头函数和普通函数的区别(this的指向)
-
Symbol概念和作用
下面几个的要求可以适当放松
-
Set和Map数据结构
-
WeaSet和WeakMap
-
Proxy
-
Reflect对象
10.Promise(Promise的链式调用,Promise的状态、Promise的方法)【必考】
11.Generator及其异步方面的应用
12.async函数和await
-
class基本语法及继承
-
模块加载方案比较(CommonJS和ES6的Module)
-
Iterator和for…of(Iterator遍历器的实现)
js具体面试题补充
-
addEventListener和onClick()的区别
-
new和Object.create()的区别
-
DOM的location对象
-
Object.defineProperty()的使用
-
Array.sort()方法与实现机制
-
函数柯里化、组合函数
-
BOM属性对象方法(scroll/client/offset)
-
null和undefined的区别
-
==数据类型转换的规则
-
数组高阶函数、some、every、filter、map、reduce
-
mouseenter和mouseover的区别?
-
伪数组转为数组的方式
-
遍历对象属性的方法
判断是否是对象的私有属性:obj.hasOwnProperty()
获取对象的所有实例属性和函数,不包含原型链继承的属性和函数 Object.getOwnPropertyNames()
获取对象可枚举的属性,不包含继承属性 Object.keys()
-
合并数组的方法
-
document和window的区别
-
Object.is和===的区别
-
isNaN和Number.isNaN()的区别?
-
0.1 + 0.2 !== 0.3
-
判断一个变量是数组还是对象
-
属性访问时点操作符和[]中括号操作符的区别
-
严格模式
-
扩展运算符与rest运算符的区别
-
Object.assign()
-
Map和普通对象、WeakMap的区别?
-
循环语法比较及使用场景(for、forEach、map的区别/ for…in、for…of的区别)
-
forEach可以中断吗
-
forEach和map方法的区别?
-
e.target和e.currentTarget的区别?
-
阻止事件冒泡event.stopPropagation()
-
event.stopPropagation()和stopImmediatePropagation()
-
HTMLCollection和NodeList的区别?
Ajax
-
Ajax的请求过程(手写ajax)
-
POST请求格式
-
跨域、同源策略及跨域实现方式和原理
-
JSONP, CORS
-
JSON序列化和反序列化
-
Axios的使用
-
Ajax和Fetch,Axios有什么区别
手写
-
new 【高频 】
-
call/bind/apply
-
Promise.all 【 大厂高频 】
-
instanceof
-
柯里化函数,组合函数
-
防抖和节流【必考】
-
Ajax [必考]
-
深拷贝与浅拷贝【必考】
-
继承 【必考】
-
数组去重,数组排序 [小公司必会]
-
数组扁平化
-
字符串中出现最多次数的字符
-
字符串反转
-
字符串驼峰转换
-
实现trim过滤字符串空格
-
事件委托
-
解析url中的key
-
正则匹配手机号
Vue
- vue生命周期(父子组件)
created和mounted的区别
在那个生命周期中获取数据
-
computed/methods/watch的区别
-
v-show和v-if的区别
-
v-if和v-for优先级
-
v-for为什么要用key
-
组件通信
-
插槽的使用
-
nextTick的使用和原理
-
常用的指令
-
scoped的作用
-
常用的修饰符
-
keep-alive的作用?keep-alive中的生命周期钩子
-
vue如何监听对象或者数组属性的变化
-
说说你对vue的理解?
-
v-model的实现原理
-
双向数据绑定的原理
-
MVVM和MVC的区别?
-
虚拟DOM和diff算法
-
Proxy和defineProperty的区别
-
Vue3.0为什么要使用proxy
-
Composition API
-
hash和history模式的区别?
-
SPA单页面应用的优缺点
-
params和query传递参数的区别
-
路由钩子函数/路由守卫
-
路由懒加载
-
router和route的区别
-
编程式导航和声明式导航
-
vuex的作用?
-
state/mutation/action/getter/module的作用
-
mutation和action的区别?
React
React我刚学没多久,下面只提供一些重点
-
生命周期
-
类组件和函数式组件的区别
-
setState是同步更新还是异步更新
-
高阶组件
-
虚拟DOM和diff算法
-
key的作用
-
React Hook
-
Redux工作流程
Webpack
-
webpack的基础配置和基本概念
-
loader和plugin的不同
-
常用的loader和plugin?
-
webpack的proxy配置解决跨域问题
网络/浏览器
-
TCP/IP网络分层
-
tcp和udp的区别和使用场景
-
三次握手和四次挥手
-
HTTP请求方法
-
GET和POST的区别
-
HTTP请求报文和响应报文、请求头和响应头
-
HTTP状态码 【 高频 】
-
HTTP缓存 【 高频 】
-
HTTP1.0/1.1/2.0/3.0之间的区别?
10.HTTPS和HTTP之间的区别?
对称加密和非对称加密
11.对Keep-Alive的理解
12.DNS查询过程
13.CDN
-
XSS攻击及防御
-
CSRF攻击及防御
-
浏览器页面渲染过程
-
浏览器缓存 (强缓存和协商缓存)
-
浏览器存储
localStorage、sessionStorage、cookie之间的区别?
-
从url输入到界面展示,发生了什么?
-
重排和重绘
-
浏览器进程
-
浏览器同源策略
-
进程和线程之间的区别
-
进程通信
-
死锁
其他
- 项目性能优化方案
CDN
懒加载
防抖和节流
回流与重绘
图片优化
webpack优化
代码优化
-
发布-订阅设计模式
-
函数式编程
-
git的使用 [重要]
-
代码规范:eslint
非技术性面试
-
自我介绍
-
你的职业和技术规划?【 每家公司都会问 】
-
为什么学习前端而不是其他方向?【大概率会问 】
-
你是怎么学习前端的?
-
项目的重点和难点?【必问】
-
对于工作地点的考虑
-
对于我们公司你还有什么想问的嘛?
-
实习经历
-
期望薪资
-
你的优缺点
-
offer情况
-
如何准备面试
-
根据知识体系分模块、逐个解决
校招前端面试通常就是 基础布局(html/css) + JS核心概念清楚 + 框架+ 一定的项目经验 + 计算机基础(主要是计算机网络和算法)。对于每一个知识点,你可以尝试进行自我回答,然后在掘金,知乎等平台上搜索对于这个知识点的详细解析(比如BFC、闭包这些难懂的概念),最终形成一个比较完善的回答。
- 一定要记录(这里推荐语雀或者飞书的知识库,真的很好用)
记录会形成一个进度条一样的东西(反馈很重要),比如说我前面提到的那些知识点,你可以打印出来(就几张纸),你可以学完一条,打个对勾,这样你就知道自己复习了什么,还有什么没学。
- 对于不懂的知识点多看多复习
有一些概念就是很容易忘记的,或者很难的,不然也不会有“js三座大山”的说法,对于这些比较难懂的知识点或者经常忘记的知识点(比如布局、手写),最好的办法就是多看多写。概念可以通过看不同的文章去帮助你理解概念,手写则是每几天写一遍(可以尝试白纸默写)
- 积极面试
以面带学,人吧有的时候会很自信,觉得自己对于某一个方面复习好了,很主动的说自己这个方面很了解,但面试官一往深里问,整个人都傻了,有的时候则是觉得自己啥都没准备好,这也不会,那也不会。不去面试是没有发言权的,不去面试一下你都不知道自己有多菜(🐶)。所以多去面试,对于面试结果不要过分在意,即便面的不好也要学会快速调整过来(你答的不好,隔着屏幕呢,面试官又不会吃了你,不行下一家呗,下一个福利更好,下一个待遇更高,下一个还965),及时复盘,因为下一家可能问的东西是一样的。
- 面试技巧
讲概念:用一句话描述是什么
说用途:结合具体场景,说你的应用
理原理:梳理该技术是怎么实现的(根据自我能力回答吧)
优缺点:横向对比其他技术解决方案(可以作为引导面试官的重要手段)
- 前端学习资料分享
由于本人水平有限,内容只是讲到基础的应用层面,可能也只是能帮你应对前端八股文的一些内容,请多多包容。
每个人的学习能力不同,有的喜欢看视频学习,有的觉得看视频比较浪费时间,习惯于看文档或者书籍,我尽量给出两种方式,仅供参考。但无论哪种学习方式,最核心的仍然是多动手,多动脑,多实践练习。(下面我提供的框架的视频有很多,都是讲的很好的老师,选择一个快速了解语法就可以)
Javascript
如果你现在时间很充裕,比如大一大二,并且喜欢看视频学习的话,那你完全可以花比较长的时间去学js,我个人比较推荐周啸天老师的js视频(神三元也推荐过),周老师把js的数据类型,闭包作用域,函数执行机制,面向对象,同步异步编程这些核心的概念讲的偏僻入里,另外coderwhy老师的js高级语法课也是不错的。
书籍的话,《JavaScript高级程序设计》第四版和阮一峰老师的ES6教程(有电子版)这两本书是必备的(初开始的时候不必全部啃完,可以先看我下面推荐的这本,等把一些重点概念搞清楚后再回来查漏补缺),除此之外我还推荐《Javascript重难点实例精讲》这本书(微信读书上有电子版),这本书把js一些核心内容捋了一遍(也是面试经常问的基础点),缺点是没有讲到同步异步这块。
至于大家经常说的“小黄书”《你不知道的javascript》,我个人是不推荐的,这套书只有第一本算是比较易读的,其他两本读起来就很困难,可以看浪里行舟或者伢羽的博客,作为小黄书的替代品,基本上是对小黄书的归纳
周啸天老师的js视频:
https://www.bilibili.com/video/BV1rV411n72v?share_source=copy_web
https://www.bilibili.com/video/BV1cZ4y1F7ry?share_source=copy_web
coderwhy老师的js课:我会把coderwhy老师的js/vue3/react/node/webpack视频课统一放在一个百度网盘里,链接放在文章最后(请录友们仅作学习使用)
阮一峰ES6教程
浪里行舟的博客
https://github.com/ljianshu/Blog
伢羽js全解析
https://github.com/mqyqingfeng/Blog
现代javascript教程:https://zh.javascript.info/
Vue
很多人入门vue应该看的是coderwhy(现在看有点过时了)或者尚硅谷张老师的vue课
尚硅谷:https://www.bilibili.com/video/BV1Zy4y1K7SH?share_source=copy_web
coderwhy:https://www.bilibili.com/video/BV15741177Eh?share_source=copy_web (这个时间比较久了)
千锋:https://www.bilibili.com/video/BV1GL4y1v79M?share_source=copy_web
项目1
https://www.bilibili.com/video/BV1Vf4y1T7bw?share_source=copy_web
项目2
https://space.bilibili.com/13625996/channel/seriesdetail?sid=291695
Vue3 + Ts
https://www.bilibili.com/video/BV1ra4y1H7ih?share_source=copy_web
coderwhy老师的视频课(放在结尾链接)
书籍的话没有合适的,感兴趣的可以看被删-深入理解Vue.js实战(godbasin.com)
算法
算法嘛,跟着代码随想录就够了,面试前可以看一看CodeTop企业题库,上面汇集了一些大厂经常考的题目。
如果说你确实需要js版本的算法指南,下面三个可以作为参考
- awesome-coding-js,除了算法,还有一些比较常见的js手写代码题
- ssh的刷题指南
https://github.com/sl1673495/leetcode-javascript
- 前端瓶子君的算法小书
https://www.pzijun.cn/algorithms/
网络和浏览器
大一大二学习网络可以看b站湖科大教书匠的计算机网络微课堂(学校考试也可以看)
https://www.bilibili.com/video/BV1c4411d7jb?share_source=copy_web
着急面试的不推荐看视频,因为性价比较低,看书、博客背面试题是最快的方式,实在有看视频需求的可以看李明杰老师讲的网络协议课(b站链接失效了,放在下面网盘)
博客
小林coding的图解计算机网络 https://xiaolincoding.com/network/
极客时间专栏
浏览器工作原理与实践
趣谈网络协议
透视HTTP协议
图解Google V8
Webpack
https://www.bilibili.com/video/BV1YU4y1g745?share_source=copy_web
React
张天禹: https://www.bilibili.com/video/BV1wy4y1D7JT?share_source=copy_web
kerwin: https://www.bilibili.com/video/BV1dP4y1c7qd?share_source=copy_web
八股文推荐
-
浪里行舟的博客已经在前面推荐过,是比较核心的要点,所以需要全都掌握
-
CUGGZ:(基本上包含了所有的八股文,很强,根据自己的能力看)
https://juejin.cn/post/6964779204462247950
- 前端面试必读文章 (文章收集系列)
https://juejin.cn/post/6844904116339261447
- 前端进阶之道(一些比较重要的知识点,还是比较推荐的)
- 前端复习课(给所有对应的考点提供了一个链接,相当于有参考答案,推荐,pdf在飞书文档中无法导出,放公众号链接了)
https://mp.weixin.qq.com/s/a-6ck3i6b5OLhEAgxRHkDA
最低要求:掌握浪里行舟的博客
进阶:前端复习课 + 前端进阶之道
全面:GUGGZ的面试题