前端小白半年准备,成功进入BAT
brickspert opened this issue · 81 comments
前端小白半年准备进BAT
先介绍下背景
非211,985本科毕业。一年半PHP经验,一年半前端经验,前端一直在做React
开发。
半年之前,我是一个前端小小小白。多么小白呢?
css
调样式全靠试。- 盒模型,好像知道是啥?好像又不知道!
- 看到别人说
BFC
,啥是BFC
?为啥外边距会合并?有些会合并,有些不会合并,这都是啥玩意? z-index
为啥有时候有效果,有时候没效果?为啥有时候小的值还在大的上面?js
就会基础使用,稍微复杂的一脸懵逼。- 看别人的文章,一看到
prototype
,立马头疼,这都是啥!什么原型,继承,离我远点! - 闭包,好像知道是啥。但是说不出来。
arguments
,作用域链等等都是啥?- …...
我都不想去思考这些问题,啊,,,头疼,这都是什么?我都不会啊!
这样的我,怎么出去面试?别人随便问个问题,我都不会!
我又去网上看了别人的面试题,娘的哟,这是啥?这又是啥?好像会点,但是说不出来~~
不行不行,我得赶紧学习了。但是我要怎么去准备呢?好像js,html,css,http
都没系统学过啊?好像react,webpack
这些玩意也没系统整理过啊。好多啊!
废话不多说,我们开始吧~~
吭哧
吭哧
吭哧
…...
经过半年的准备,我成功面试进了BAT
!
所以相信自己,从现在开始!你应该比我厉害吧?
我看到很多像我之前一样迷茫的人,我觉得我的经历是可以复制的。就写下来,共勉!
过程分为:
1. 系统学习基础知识
2. 面试题提高
3. 项目
系统学习基础知识
基础知识通过看书来系统学习。
-
《JavaScript高级程序设计(第3版)》
系统学习一遍js,看这本书是非常痛苦的过程。预计时间在2个月左右。
不要心急,一章一章的过,每个知识点都要去理解,做笔记。
碰到看不懂的,反复去读,去网上查,一定要搞懂!
-
《CSS权威指南(第三版)》
系统学习
css
,预计时间2星期。记得做笔记,不会的点,反复去读,去查。 -
css3教程学习
这个去网上找份教程,过一遍。每个新属性都去写下。
-
《html5与css3权威指南》
这个快速过下前面
html
部分就好了。1个星期左右读完。
-
《图解HTTP》
非常重要!系统学习
HTTP
。半个月时间~ -
《ECMAScript 6 入门》
阮一峰写的。系统学习
ES6
。这个因人而异,时间长短不一,不过真的很重要!
好了,到这里为止,我们已经系统的学习了前端的各种知识了。应该花费了3个多月了。如果你能坚持下来,绝对会有一个质的飞跃。
面试题提高
下面我的策略是,找面试题,把网上能找到的面试都记下来,每个题都去深入研究!
注意,是深入研究,不是浅显的知道答案就行了。
面试题大部分来源于这里https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese,还有很多很多其他的面经,我就不一一贴出来了,反正能搜到的我都看了~
我把我整理的面试题列出来,希望每个题你都能深入去研究。
HTML
-
DOCTYPE
(文档类型)的作用是什么? -
浏览器标准模式 (
standards mode
) 、几乎标准模式(almost standards mode
)和怪异模式 (quirks mode
) 之间的区别是什么?- 产生的历史原因是啥?
- 怪异模式有哪些怪异的行为?
-
使用
data-
属性的好处是什么?可以去实践下
data-*
的使用啦 -
如果把
HTML5
看作做一个开放平台,那它的构建模块有哪些?研究下
HTML5
的所有模块 -
cookies
、sessionStorage
和localStorage
的区别 -
请解释
<script>
、<script async>
和<script defer>
的区别。 -
为什么通常推荐将 CSS
<link>
放置在<head></head>
之间,而将 JS<script>
放置在</body>
之前?你知道有哪些例外吗? -
什么是渐进式渲染 (
progressive rendering
)? -
HTML
和XHTML
有什么区别? -
HMTL5
新标签
CSS
-
CSS
中类 (class
) 和ID
的区别 -
请问 "resetting" 和 "normalizing" CSS 之间的区别?你会如何选择,为什么?
https://github.com/necolas/normalize.css
https://github.com/shannonmoeller/reset-css/blob/master/reset.css
-
请解释浮动 (
Floats
) 及其工作原理这个非常重要,前面读的书上有这个,一定要完全搞懂。
-
清除浮动
重要
-
描述
z-index
和叠加上下文是如何形成的?重要,书上有,先理解。然后我推荐两个文章
https://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
-
请描述 BFC(
Block Formatting Context
) 及其如何工作?理解BFC的特性及如何触发BFC
-
CSS sprites
优点,缺点
-
图片替换文字方案
-
你会如何解决特定浏览器的样式问题?
-
如何为有功能限制的浏览器提供网页?
渐进增强,优雅降级等等等等
-
有哪些的隐藏内容的方法?
-
栅格系统 (
grid system
) -
你用过媒体查询,或针对移动端的布局
CSS
吗? -
如何优化网页的打印样式?
-
在书写高效
CSS
时会有哪些问题需要考虑? -
使用
CSS
预处理器的优缺点有哪些? -
如果设计中使用了非标准的字体,你该如何去实现?
-
请解释浏览器是如何判断元素是否匹配某个
CSS
选择器? -
请描述伪元素 (
pseudo-elements
) 及其用途伪元素,伪类等等都去研究下
-
请解释你对盒模型的理解,以及如何在
CSS
中告诉浏览器使用不同的盒模型来渲染你的布局 -
请罗列出你所知道的
display
属性的全部值 -
请解释
inline
和inline-block
的区别 -
请解释
relative
、fixed
、absolute
和static
元素的区别 -
请问你有尝试过
CSS Flexbox
或者Grid
标准规格吗flex很重要,每个属性都要知道。建议去读阮一峰的flex文章
-
为什么响应式设计 (
responsive design
) 和自适应设计 (adaptive design
) 不同? -
你有兼容
retina
屏幕的经历吗?如果有,在什么地方使用了何种技术?移动端开发必须知道!
-
请问为何要使用
translate()
而非absolute position
,或反之的理由?为什么? -
如果实现一个高性能的
CSS
动画效果? -
IFC
-
css3
动画各种属性熟悉下
-
布局之:左边定宽,右边自适应
-
圣杯布局,双飞翼布局
-
实现垂直居中和水平居中
Javascript
-
事件代理
-
请解释
JavaScript
中this
是如何工作的 -
javascript
继承这个不多说,十分十分重要。建议按照《高程三》的继承那里,仔细理解哦。
-
javascript
模块化理解模块化发展过程,理解
commonJS
,AMD
,CMD
,ES6
模块化 -
IIFE
立即执行函数 -
null undefined
区别 -
闭包 与 作用域
非常重要,书上有!
-
匿名函数
-
你是如何组织自己的代码?是使用模块模式,还是使用经典继承的方法?
-
宿主对象 (
host objects
) 和原生对象 (native objects
) -
请指出以下代码的区别:
function Person(){}
、var person = Person()
、var person = new Person()
? -
apply call bind
深入到源码如何实现这三个功能的。
-
new
源码如何实现的?
-
document.write()
-
特性检测 特性推断 UA字符串嗅探
-
Ajax
工作原理着重理解
XMLHttpRequest
!! -
跨域
图片
ping
,JSONP
,CORS
。这是面试必问的点。注意一定要完全理解,完全!
-
变量声明提升
-
冒泡机制
-
attribute
和property
-
document load
和document DOMContentLoaded
非常重要哦
-
==
和===
有什么不同 -
同源策略 (
same-origin policy
)Cookie
,iframe
,AJAX
同源 -
strict
模式 -
为何通常会认为保留网站现有的全局作用域 (
global scope
) 不去改变它,是较好的选择 -
为何你会使用
load
之类的事件 (event
)?此事件有缺点吗?你是否知道其他替代品,以及为何使用它们? -
请解释什么是单页应用 (
single page app
), 以及如何使其对搜索引擎友好 (SEO-friendly
)相当重要
-
Promise
怎么用?源码如何实现的?
推荐文章:xieranmaya/blog#3
-
使用一种可以编译成
JavaScript
的语言来写JavaScript
代码有哪些优缺点? -
javascript
调试工具 -
对象遍历 和 数组遍历
-
可变对象和不可变对象
-
什么是事件循环 (
event loop
)非常重要,面试必问。
深入原理,宏任务,微任务等等
-
let var const
-
数组的方法
-
web worker
-
柯里化
-
创建对象的三种方法
-
深拷贝和浅拷贝
可以实现手写深拷贝
-
图片懒加载
咋实现的?
-
网页各种高度
这个好难记,我也没记住~
-
实现页面加载进度条
-
箭头函数ES5如何实现
- 箭头函数和普通函数的区别
React
-
虚拟
DOM
是啥?以及diff算法原理 -
react
事件绑定 -
生命周期
-
函数式编程,纯函数
-
React
创建组件的方式 -
组件性能优化
shuouldComponentUpdate
pureComponent
不可变数据
key
等等优化方法,每一点的优点和缺点
-
如何设计一个好组件
-
哪里进行网络请求?为什么
-
调用
setState
之后发生了什么 -
refs
-
react16
新特性尤其理解
time slice
和suspense
-
在
React
当中Element
和Component
有何区别 -
容器组件和展示组件
-
props.children
-
路由实现原理
-
react
的setState
同步还是异步? -
Redux
,react-redux
等原理 -
如何实现异步网络请求的?
-
组件间通信
-
高阶组件是什么和常见的高阶组件
-
React key
是干嘛的?
webpack
-
loader
自己如何写一个
loader
-
plugin
自己如何写一个
plugin
-
webpack
原理之普通打包 -
webpack
原理之多文件打包 -
webpack
原理之提取公共文件 -
webpack
如何做到 tree shaking -
webpack
配置文件基本概念 -
webpack
构建流程 -
前端模块化的理解
-
打包很慢,怎么解决?
-
打包出来的文件很大,怎么解决?
安全问题
xss
csrf
- 等等....
HTTP
-
为什么传统上利用多个域名来提供网站资源会更有效
-
Long-Polling
、Websockets
和Server-Sent Event
-
常见的请求头和响应头
-
和缓存有关的
HTTP
首部字段相当重要。如何应用的?
-
HTTP method
-
HTTP
状态码 -
https
加密过程 -
http2
新特性
性能
-
你会用什么工具来查找代码中的性能问题?
-
增强网站的页面滚动效能
-
重排,重绘,合成
相当相当重要
-
合成层
我在这里理解了一个多星期,静下心来去理解。
-
前端优化方法
-
css3
动画和js
动画对比
其他问题
- 常见排序算法
babel
原理- 实现一个幻灯片功能
- 你最近遇到过什么技术挑战?你是如何解决的?
- 浏览器输入网址后做了什么?
项目
面试问的最多的,除了基础知道,就是项目了。
必须对自己做的项目,有十足的掌握。做项目的时候,有主人翁意识~
项目业务理解,性能优化等等~
行了,到这里就结束了。如果你能坚持下来,我觉得你自己就有很足的自信了!
从一个弱鸡,成长为一个合格的前端菜鸟啦!
路漫漫其修远兮~加油!
一堆胡言乱语,希望对你有帮助。
我再强调一下:基础很重要!项目很重要!
❤️感谢大家
关注公众号「前端技术砖家」,拉你进交流群,大家一起共同交流和进步。
有句废话还是要讲:良心文章。高质量文章。
很有帮助
砖家,厉害的很呐!
mark
半年成长了这么多 好厉害啊
mark
赞啊,我也跟作者差不多得经历。
@xuya227939 你也进bat了吗 哈哈
@tony1990atgz 其实静下心来做,6个月,真的可以。
坚持就是胜利,半年时间都没工作还是?
@guoao2016 晚上,周末学。
好奇,没有问 Nodo 方面的问题吗?
@KngZhi 我没怎么用过Node,简历就没写。 不写一般就不问的。
请问是在哪里看见的招聘信息的呢
@heavenYJJ 朋友内推的呢。如果你需要,可以帮你内推。
可以方便加一下微信吗?我感觉现在水平不够,以后水平够了找你
@heavenYJJ 你感觉可以了,直接这里面喊我就可以的。
好的,谢谢喽~~
到时候,你真的进入BAT了,记得发篇文章,加油!
@thereisnowinter 已经进了。。。。。。。。
那是厉害了,期待你的更多文章。
mark,你学东西很扎实,向你学习!!!
看了楼主的文章,感觉要重头再来了。谢谢楼主了。
有句废话还是要讲:良心文章。高质量文章。
社会你龙哥,人狠话不多
大公司对于前端的算法要求咋样,除了常见的排序算法外。。。
@deepred5 我面试好几家,没有一个问算法的。都是问基础,问业务~
厉害了,你上面推荐的书 我都有可惜没认真看过,现在要好好看了,不能浪费了书钱~~ ^_^
先占个坑,做好准备加油干!
厉害了。向你学习!
楼主,我是大三学生。
没工作经验,找工作应该自己写点什么项目,才好拿出手?
我在学react全家桶
typescript也有学
@weblzf 写项目不是很重要,关键就是基础。别人问的问题,你都能答上来。
但是好像没写过项目,肯定好多坑不知道。可以去仿个网站~
大佬,我想问一下,毕业五年的普通二本理工大学,面前端岗位,有机会吗
是非计算机专业转行
@l511407563 我觉得能力够,肯定就可以。 关键自己要有信心,喜欢这行,然后下功夫去学。
如果能力够,面试机会多的是。
总结的非常不错,半年能学这么多真的厉害。不过我自己就准备过一遍前端好吹嘘下full stack也满足下自己好奇心,后面还是专注于后端吧
很好的文章啊 赞一个👍
感谢分享!共同努力!
想知道学会这些并有一定的工作经验对标是p几
@JourneyL 看你每个问题学到什么程度了。
同样一个问题,每个级别的理解深度都不一样。
普通本科可以吗?因为社招一般都是3年工作经验。文章很好,可以查漏补缺。
@zzx0106 当然可以。加油。需要内推可以联系我。
前辈 请问您是通过春招秋招校招进入的还是社招啊
@JoseyDon 社招
2年asp.net、1年iOS、 6年Unity3D游戏开发 转web前端ing
@fuss228 你这9年工作经验,转前端干嘛~~~~
@fuss228 你这9年工作经验,转前端干嘛~~~~
手游行业 已成红海,网易 腾讯市场占有率 差不多占了70 80 剩下一点小公司 分口汤喝喝
付费玩家就那么点 大家都在抢
之前有过2年网站开发经验 所以就转了Web了 必定现在JS、H5那么火 做啥都不是一样敲代码 思路差不多的
关键看产品 看运营层面 过了黄金期 项目没起来 身心疲惫
手游行业普遍996 上线前 几乎凌晨 3、 4点到家 实在太累
我想问下webpack那些是怎么入手学习的呢
我想问下webpack那些是怎么入手学习的呢
@candyHH 先做项目,先用起来,用起来后慢慢熟悉。
我是tencent客户端工程师jinqianli,有联系方式吗?
@larack8 QQ群 572071150
在这立个flag,六个月后我也要进BAT。要是没进我就把这条评论删了。
点个赞,正好需要这样的学习经历来引导下我
本来想问题主去了哪家的,一看杭州,A无疑了。正在进步中,目前在T,希望后面能帮忙内推。
很赞。向楼主学习
闯过江湖卖过稿,熬过寂寞终成屌
黑眼圈难挡你眼中那一抹灵光、唏嘘的胡须掩不住你久经沧桑的身子
你轻轻一推鼻梁上的眼镜片,默默的点上了一支烟,帅气斜仰一口烟圈,天若有情天亦老,没有bug好不好
从此,和视觉拼刺刀,刀光剑影;和产品撕需求,变幻莫测;开阔的脑洞,敏锐的的洞察,问题在瞬间就被你的慧眼捕捉到...
你是谁?
段子手、键盘侠、吃瓜群众,亦或才华横溢、轻舞飞扬,混迹于各大贴吧、论坛,脚印遍布微博、头条、朋友圈,亦或整天幻想老子拆迁分了十套房......
没关系,工作不顺利、创业失败、公司裁员、穿小鞋、小白领、老司机、...Who care!!!
我只知道我要找的你,怀揣梦想,蓄势待发,敏锐察觉身边的人、事、物的变化;又或者有丰富的工作经验和生活阅历,满腹经纶,却无人共鸣,一腔热血,无处发泄;你有洋洋洒洒的感受和故事,我有酒,你请客,我买单,一起把酒言欢...
俗,或许这是时运不济、亦或者是孤掌难鸣;
不俗,只因有人懂你,给了你一个腾飞的机会...
不要再埋没你的才华、别再形同路人,来吧,加入支付宝吧,不俗的你!!!
蚂蚁金服(支付宝)急招前端,北京杭州上海,技术P6、P7+,,等待牛人加入。
巨头公司名额有限,条件也是越来越高,成功后,你请客,我买单,带上你的故事,我们一起把酒言欢。
考虑工作机会的请发简历至 youmo.lt@antfin.com
哇,,,榜样!!!
大佬,明灯啊
不说半年,一年后在下进了A,一定回来请楼主喝咖啡
有句废话还是要讲:良心文章。高质量文章。
还行吧,一般般
脚踏实地,撸起袖子敲起来!
基本都学了,就是项目经验不太行,还有这些东西有的看过然后又忘了。
请问大佬,3个月是全天学习吗,还是工作期间
请问大佬,3个月是全天学习吗,还是工作期间
工作期间....
great 謝謝
想请教一下楼主,像react 虚拟dom, diff算法这些知识,是在网上看别人的讲解,还是自己去看源码学习呢?4年菜鸟面试阿里,一直过不了框架原理这一关,愁。
想请教一下楼主,像react 虚拟dom, diff算法这些知识,是在网上看别人的讲解,还是自己去看源码学习呢?4年菜鸟面试阿里,一直过不了框架原理这一关,愁。
我之前是看了非常多的文章,没看源码。 只要自己能理解,能讲清就行,不要求你看过源码的。不过最好是根据想法,能实现一个 tiny 版本。
请教一下,php到前端这步是怎么走的呢
太励志了,共勉
砖家,你贴的那篇关于合成层的网址访问不了了,有没有什么其他推荐的文章啊,看了好多博文了,但还是感觉没有完全理解。
阿里是react用的多吗,之前一直用vue,是否一定必要把react学一下
阿里是react用的多吗,之前一直用vue,是否一定必要把react学一下
不用,用啥会啥就行。
应届生,阿里前端18k/月,属于啥水平啊?
又一个成功案例
mark一下 23届前端小白也尽量按照这个知识储备去学习(同样的前端布局贼拉跨 JS深入了就懵逼 全中了也太令人难过了!)春招要来了orz 慌起来了
4,5年了,我还是菜鸡,2022还能按照这个办法进大厂吗