Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

前端小白半年准备，成功进入BAT #16

Open
brickspert opened this issue Apr 9, 2018 · 81 comments
Open

前端小白半年准备，成功进入BAT #16

brickspert opened this issue Apr 9, 2018 · 81 comments

Comments

@brickspert
Copy link
Owner

brickspert commented Apr 9, 2018 •
edited
Loading

前端小白半年准备进BAT

先介绍下背景

非211，985本科毕业。一年半PHP经验，一年半前端经验，前端一直在做React开发。

半年之前，我是一个前端小小小白。多么小白呢？

  1. css调样式全靠试。
  2. 盒模型，好像知道是啥？好像又不知道！
  3. 看到别人说BFC，啥是BFC？为啥外边距会合并？有些会合并，有些不会合并，这都是啥玩意？
  4. z-index为啥有时候有效果，有时候没效果？为啥有时候小的值还在大的上面？
  5. js就会基础使用，稍微复杂的一脸懵逼。
  6. 看别人的文章，一看到prototype，立马头疼，这都是啥！什么原型，继承，离我远点！
  7. 闭包，好像知道是啥。但是说不出来。
  8. arguments，作用域链等等都是啥？
  9. …...

我都不想去思考这些问题，啊，，，头疼，这都是什么？我都不会啊！

这样的我，怎么出去面试？别人随便问个问题，我都不会！

我又去网上看了别人的面试题，娘的哟，这是啥？这又是啥？好像会点，但是说不出来~~

不行不行，我得赶紧学习了。但是我要怎么去准备呢？好像js，html，css，http都没系统学过啊？好像react，webpack这些玩意也没系统整理过啊。好多啊！

废话不多说，我们开始吧~~

吭哧

吭哧

吭哧

…...

经过半年的准备，我成功面试进了BAT！

所以相信自己，从现在开始！你应该比我厉害吧？

我看到很多像我之前一样迷茫的人，我觉得我的经历是可以复制的。就写下来，共勉！

过程分为：

1. 系统学习基础知识
2. 面试题提高
3. 项目

系统学习基础知识

基础知识通过看书来系统学习。

  1. 《JavaScript高级程序设计（第3版）》

    系统学习一遍js，看这本书是非常痛苦的过程。预计时间在2个月左右。

    不要心急，一章一章的过，每个知识点都要去理解，做笔记。

    碰到看不懂的，反复去读，去网上查，一定要搞懂！

  2. 《CSS权威指南（第三版）》

    系统学习css，预计时间2星期。记得做笔记，不会的点，反复去读，去查。

  3. css3教程学习

    这个去网上找份教程，过一遍。每个新属性都去写下。

  4. 《html5与css3权威指南》

    这个快速过下前面html部分就好了。

    1个星期左右读完。

  5. 《图解HTTP》

    非常重要！系统学习HTTP。半个月时间~

  6. 《ECMAScript 6 入门》

    阮一峰写的。系统学习ES6。这个因人而异，时间长短不一，不过真的很重要！

​ 好了，到这里为止，我们已经系统的学习了前端的各种知识了。应该花费了3个多月了。如果你能坚持下来，绝对会有一个质的飞跃。

面试题提高

下面我的策略是，找面试题，把网上能找到的面试都记下来，每个题都去深入研究！

注意，是深入研究，不是浅显的知道答案就行了。

面试题大部分来源于这里https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese，还有很多很多其他的面经，我就不一一贴出来了，反正能搜到的我都看了~

我把我整理的面试题列出来，希望每个题你都能深入去研究。

HTML

  1. DOCTYPE（文档类型）的作用是什么？

    参考https://witcher42.github.io/2014/05/28/doctype/

  2. 浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？

    • 产生的历史原因是啥？
    • 怪异模式有哪些怪异的行为？

  3. 使用 data- 属性的好处是什么？

    可以去实践下data-*的使用啦

  4. 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？

    研究下HTML5的所有模块

  5. cookies、sessionStorage 和 localStorage 的区别

  6. 请解释 <script>、<script async> 和 <script defer> 的区别。

  7. 为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道有哪些例外吗？

  8. 什么是渐进式渲染 (progressive rendering)？

  9. HTML 和 XHTML 有什么区别？

  10. HMTL5新标签

CSS

  1. CSS 中类 (class) 和 ID 的区别

  2. 请问 "resetting" 和 "normalizing" CSS 之间的区别？你会如何选择，为什么？

    https://github.com/necolas/normalize.css

    https://github.com/shannonmoeller/reset-css/blob/master/reset.css

  3. 请解释浮动 (Floats) 及其工作原理

    这个非常重要，前面读的书上有这个，一定要完全搞懂。

  4. 清除浮动

    重要

  5. 描述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/

  6. 请描述 BFC(Block Formatting Context) 及其如何工作？

    理解BFC的特性及如何触发BFC

  7. CSS sprites

    优点，缺点

  8. 图片替换文字方案

  9. 你会如何解决特定浏览器的样式问题？

  10. 如何为有功能限制的浏览器提供网页？

    渐进增强，优雅降级等等等等

  11. 有哪些的隐藏内容的方法？

  12. 栅格系统 (grid system)

  13. 你用过媒体查询，或针对移动端的布局CSS 吗？

  14. 如何优化网页的打印样式？

  15. 在书写高效 CSS 时会有哪些问题需要考虑？

  16. 使用 CSS 预处理器的优缺点有哪些？

  17. 如果设计中使用了非标准的字体，你该如何去实现？

  18. 请解释浏览器是如何判断元素是否匹配某个 CSS 选择器？

  19. 请描述伪元素 (pseudo-elements) 及其用途

    伪元素，伪类等等都去研究下

  20. 请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局

  21. 请罗列出你所知道的 display 属性的全部值

  22. 请解释 inline 和 inline-block 的区别

  23. 请解释 relative、fixed、absolute 和 static 元素的区别

  24. 请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗

    flex很重要，每个属性都要知道。建议去读阮一峰的flex文章

  25. 为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？

  26. 你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？

    移动端开发必须知道！

  27. 请问为何要使用 translate() 而非 absolute position，或反之的理由？为什么？

  28. 如果实现一个高性能的CSS动画效果？

  29. IFC

  30. css3动画

    各种属性熟悉下

  31. 布局之：左边定宽，右边自适应

  32. 圣杯布局，双飞翼布局

  33. 实现垂直居中和水平居中

Javascript

  1. 事件代理

  2. 请解释 JavaScript 中 this 是如何工作的

  3. javascript继承

    这个不多说，十分十分重要。建议按照《高程三》的继承那里，仔细理解哦。

  4. javascript模块化

    理解模块化发展过程，理解 commonJS，AMD，CMD，ES6模块化

  5. IIFE 立即执行函数

  6. null undefined区别

  7. 闭包 与 作用域

    非常重要，书上有！

  8. 匿名函数

  9. 你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？

  10. 宿主对象 (host objects) 和原生对象 (native objects)

  11. 请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？

  12. apply call bind

    深入到源码如何实现这三个功能的。

  13. new

    源码如何实现的？

  14. document.write()

  15. 特性检测 特性推断 UA字符串嗅探

  16. Ajax工作原理

    着重理解XMLHttpRequest！！

  17. 跨域

    图片ping, JSONP, CORS。

    这是面试必问的点。注意一定要完全理解，完全！

  18. 变量声明提升

  19. 冒泡机制

  20. attribute 和 property

  21. document load 和 document DOMContentLoaded

    非常重要哦

  22. == 和 === 有什么不同

  23. 同源策略 (same-origin policy)

    Cookie，iframe，AJAX同源

  24. strict模式

  25. 为何通常会认为保留网站现有的全局作用域 (global scope) 不去改变它，是较好的选择

  26. 为何你会使用 load 之类的事件 (event)？此事件有缺点吗？你是否知道其他替代品，以及为何使用它们？

  27. 请解释什么是单页应用 (single page app), 以及如何使其对搜索引擎友好 (SEO-friendly)

    相当重要

  28. Promise

    怎么用？源码如何实现的？

    推荐文章：剖析Promise内部结构，一步一步实现一个完整的、能通过所有Test case的Promise类 xieranmaya/blog#3

  29. 使用一种可以编译成 JavaScript 的语言来写 JavaScript 代码有哪些优缺点？

  30. javascript调试工具

  31. 对象遍历 和 数组遍历

  32. 可变对象和不可变对象

  33. 什么是事件循环 (event loop)

    非常重要，面试必问。

    深入原理，宏任务，微任务等等

  34. let var const

  35. 数组的方法

  36. web worker

  37. 柯里化

  38. 创建对象的三种方法

  39. 深拷贝和浅拷贝

    可以实现手写深拷贝

  40. 图片懒加载

    咋实现的？

  41. 网页各种高度

    这个好难记，我也没记住~

  42. 实现页面加载进度条

  43. 箭头函数ES5如何实现

    • 箭头函数和普通函数的区别

React

  1. 虚拟DOM是啥？以及diff算法原理

  2. react 事件绑定

  3. 生命周期

  4. 函数式编程，纯函数

  5. React创建组件的方式

  6. 组件性能优化

    shuouldComponentUpdate

    pureComponent

    不可变数据

    key

    等等优化方法，每一点的优点和缺点

  7. 如何设计一个好组件

  8. 哪里进行网络请求？为什么

  9. 调用setState之后发生了什么

  10. refs

  11. react16新特性

    尤其理解time slice和suspense

  12. 在 React 当中 Element 和 Component 有何区别

  13. 容器组件和展示组件

  14. props.children

  15. 路由实现原理

  16. react的setState同步还是异步？

  17. Redux，react-redux等原理

  18. 如何实现异步网络请求的？

  19. 组件间通信

  20. 高阶组件是什么和常见的高阶组件

  21. React key是干嘛的？

webpack

  1. loader

    自己如何写一个loader

  2. plugin

    自己如何写一个plugin

  3. webpack原理之普通打包

  4. webpack原理之多文件打包

  5. webpack原理之提取公共文件

  6. webpack 如何做到 tree shaking

  7. webpack配置文件基本概念

  8. webpack构建流程

  9. 前端模块化的理解

  10. 打包很慢，怎么解决？

  11. 打包出来的文件很大，怎么解决？

安全问题

  1. xss
  2. csrf
  3. 等等....

HTTP

  1. 为什么传统上利用多个域名来提供网站资源会更有效

  2. Long-Polling、Websockets 和 Server-Sent Event

  3. 常见的请求头和响应头

  4. 和缓存有关的HTTP首部字段

    相当重要。如何应用的？

  5. HTTP method

  6. HTTP状态码

  7. https 加密过程

  8. http2新特性

性能

  1. 你会用什么工具来查找代码中的性能问题？

  2. 增强网站的页面滚动效能

  3. 重排，重绘，合成

    相当相当重要

  4. 合成层

    我在这里理解了一个多星期，静下心来去理解。

    http://taobaofed.org/blog/2016/04/25/performance-composite/

  5. 前端优化方法

  6. css3动画和js动画对比

其他问题

  1. 常见排序算法
  2. babel原理
  3. 实现一个幻灯片功能
  4. 你最近遇到过什么技术挑战？你是如何解决的？
  5. 浏览器输入网址后做了什么？

项目

面试问的最多的，除了基础知道，就是项目了。

必须对自己做的项目，有十足的掌握。做项目的时候，有主人翁意识~

项目业务理解，性能优化等等~

行了，到这里就结束了。如果你能坚持下来，我觉得你自己就有很足的自信了！

从一个弱鸡，成长为一个合格的前端菜鸟啦！

路漫漫其修远兮~加油！

一堆胡言乱语，希望对你有帮助。

我再强调一下：基础很重要！项目很重要！

❤️感谢大家

关注公众号「前端技术砖家」，拉你进交流群，大家一起共同交流和进步。

image
@brickspert brickspert changed the title 前端小白半年准备进BAT 前端小白半年准备，成功进入BAT Apr 9, 2018
@pcy8939
Copy link

pcy8939 commented Apr 9, 2018

有句废话还是要讲：良心文章。高质量文章。

@zeyueguo
Copy link

很有帮助

@sanshuiwang
Copy link

砖家，厉害的很呐!

@yf4n
Copy link

yf4n commented Apr 10, 2018

mark

@tony1990atgz
Copy link

半年成长了这么多 好厉害啊

@gaowei1012
Copy link

mark

@xuya227939
Copy link

赞啊，我也跟作者差不多得经历。

@brickspert
Copy link
Owner Author

@xuya227939 你也进bat了吗 哈哈

@brickspert
Copy link
Owner Author

@tony1990atgz 其实静下心来做，6个月，真的可以。

@guoao2016
Copy link

guoao2016 commented Apr 12, 2018 •
edited
Loading

坚持就是胜利，半年时间都没工作还是？

@brickspert
Copy link
Owner Author

@guoao2016 晚上，周末学。

@KngZhi
Copy link

KngZhi commented Apr 12, 2018

好奇，没有问 Nodo 方面的问题吗？

@brickspert
Copy link
Owner Author

@KngZhi 我没怎么用过Node，简历就没写。 不写一般就不问的。

@iamouyang21
Copy link

请问是在哪里看见的招聘信息的呢

@brickspert
Copy link
Owner Author

@heavenYJJ 朋友内推的呢。如果你需要，可以帮你内推。

@iamouyang21
Copy link

可以方便加一下微信吗？我感觉现在水平不够，以后水平够了找你

@brickspert
Copy link
Owner Author

@heavenYJJ 你感觉可以了，直接这里面喊我就可以的。

@iamouyang21
Copy link

好的，谢谢喽~~

@thereisnowinter
Copy link

到时候，你真的进入BAT了，记得发篇文章，加油！

@brickspert
Copy link
Owner Author

@thereisnowinter 已经进了。。。。。。。。

@thereisnowinter
Copy link

那是厉害了，期待你的更多文章。

@GayeChen
Copy link

mark，你学东西很扎实，向你学习！！！

@YingXiaoMing
Copy link

看了楼主的文章，感觉要重头再来了。谢谢楼主了。

@Tyetao
Copy link

Tyetao commented May 10, 2018

有句废话还是要讲：良心文章。高质量文章。

@brookMixian
Copy link

社会你龙哥，人狠话不多

@deepred5
Copy link

deepred5 commented Jun 5, 2018

大公司对于前端的算法要求咋样，除了常见的排序算法外。。。

@brickspert
Copy link
Owner Author

@deepred5 我面试好几家，没有一个问算法的。都是问基础，问业务~

@Johnnylee1992
Copy link

厉害了，你上面推荐的书 我都有可惜没认真看过，现在要好好看了，不能浪费了书钱~~ ^_^

@oNexiaoyao
Copy link

先占个坑，做好准备加油干！

@JerryYuanJ
Copy link

在这立个flag，六个月后我也要进BAT。要是没进我就把这条评论删了。

@xlszzck
Copy link

xlszzck commented Jan 15, 2019

点个赞，正好需要这样的学习经历来引导下我

@Lishanming
Copy link

本来想问题主去了哪家的，一看杭州，A无疑了。正在进步中，目前在T，希望后面能帮忙内推。

@plainnany
Copy link

很赞。向楼主学习

@HeavenSky
Copy link

闯过江湖卖过稿，熬过寂寞终成屌
黑眼圈难挡你眼中那一抹灵光、唏嘘的胡须掩不住你久经沧桑的身子
你轻轻一推鼻梁上的眼镜片，默默的点上了一支烟，帅气斜仰一口烟圈，天若有情天亦老，没有bug好不好

从此，和视觉拼刺刀，刀光剑影；和产品撕需求，变幻莫测；开阔的脑洞，敏锐的的洞察，问题在瞬间就被你的慧眼捕捉到...
你是谁？
段子手、键盘侠、吃瓜群众，亦或才华横溢、轻舞飞扬，混迹于各大贴吧、论坛，脚印遍布微博、头条、朋友圈，亦或整天幻想老子拆迁分了十套房......

没关系，工作不顺利、创业失败、公司裁员、穿小鞋、小白领、老司机、...Who care!!!
我只知道我要找的你，怀揣梦想，蓄势待发，敏锐察觉身边的人、事、物的变化；又或者有丰富的工作经验和生活阅历，满腹经纶，却无人共鸣，一腔热血，无处发泄；你有洋洋洒洒的感受和故事，我有酒，你请客，我买单，一起把酒言欢...

俗，或许这是时运不济、亦或者是孤掌难鸣；
不俗，只因有人懂你，给了你一个腾飞的机会...
不要再埋没你的才华、别再形同路人，来吧，加入支付宝吧，不俗的你!!!

蚂蚁金服(支付宝)急招前端，北京杭州上海，技术P6、P7+，,等待牛人加入。
巨头公司名额有限，条件也是越来越高，成功后，你请客，我买单，带上你的故事，我们一起把酒言欢。
考虑工作机会的请发简历至 youmo.lt@antfin.com

@brickspert brickspert mentioned this issue May 1, 2019
Open
@imjinbo
Copy link

imjinbo commented May 22, 2019

哇，，，榜样！！！

@qaz6237326
Copy link

大佬，明灯啊

@youstde youstde mentioned this issue Aug 1, 2019
Open
@xlkang
Copy link

xlkang commented Aug 15, 2019

不说半年，一年后在下进了A，一定回来请楼主喝咖啡

@heyguojing
Copy link

有句废话还是要讲：良心文章。高质量文章。

还行吧，一般般

@ylucky
Copy link

ylucky commented Aug 29, 2019

脚踏实地，撸起袖子敲起来！

@5201314999
Copy link

基本都学了，就是项目经验不太行，还有这些东西有的看过然后又忘了。

@damonare
Copy link

面试题集中文链接：https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/translations/chinese/README.md

@andyyxw
Copy link

andyyxw commented Oct 24, 2019

请问大佬，3个月是全天学习吗，还是工作期间

@brickspert
Copy link
Owner Author

请问大佬，3个月是全天学习吗，还是工作期间

工作期间....

@camelG
Copy link

camelG commented Nov 6, 2019

great 謝謝

@yangguansen
Copy link

想请教一下楼主，像react 虚拟dom, diff算法这些知识，是在网上看别人的讲解，还是自己去看源码学习呢？4年菜鸟面试阿里，一直过不了框架原理这一关，愁。

@brickspert
Copy link
Owner Author

想请教一下楼主，像react 虚拟dom, diff算法这些知识，是在网上看别人的讲解，还是自己去看源码学习呢？4年菜鸟面试阿里，一直过不了框架原理这一关，愁。

我之前是看了非常多的文章，没看源码。 只要自己能理解，能讲清就行，不要求你看过源码的。不过最好是根据想法，能实现一个 tiny 版本。

@LLwanran LLwanran mentioned this issue Mar 10, 2020
Open
@wenlongzhou
Copy link

请教一下，php到前端这步是怎么走的呢

@ProfBramble
Copy link

太励志了，共勉

@DrakeYL
Copy link

DrakeYL commented Sep 13, 2020

砖家，你贴的那篇关于合成层的网址访问不了了，有没有什么其他推荐的文章啊，看了好多博文了，但还是感觉没有完全理解。

@wqk183
Copy link

wqk183 commented Sep 28, 2020

阿里是react用的多吗，之前一直用vue，是否一定必要把react学一下

@brickspert
Copy link
Owner Author

阿里是react用的多吗，之前一直用vue，是否一定必要把react学一下

不用，用啥会啥就行。

@wqk183
Copy link

wqk183 commented Sep 29, 2020 via email

@wqk183
Copy link

wqk183 commented Oct 26, 2020

应届生,阿里前端18k/月,属于啥水平啊？

@darkhorse007
Copy link

又一个成功案例

@FangzhouSu
Copy link

mark一下 23届前端小白也尽量按照这个知识储备去学习（同样的前端布局贼拉跨 JS深入了就懵逼 全中了也太令人难过了！）春招要来了orz 慌起来了

@qiaoqiao10001
Copy link

4,5年了，我还是菜鸡，2022还能按照这个办法进大厂吗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests