{"action":"created","issue":{"url":"https://api.github.com/repos/brickspert/blog/issues/16","repository_url":"https://api.github.com/repos/brickspert/blog","labels_url":"https://api.github.com/repos/brickspert/blog/issues/16/labels{/name}","comments_url":"https://api.github.com/repos/brickspert/blog/issues/16/comments","events_url":"https://api.github.com/repos/brickspert/blog/issues/16/events","html_url":"https://github.com/brickspert/blog/issues/16","id":312502041,"node_id":"MDU6SXNzdWUzMTI1MDIwNDE=","number":16,"title":"前端小白半年准备，成功进入BAT","user":{"login":"brickspert","id":12526493,"node_id":"MDQ6VXNlcjEyNTI2NDkz","avatar_url":"https://avatars0.githubusercontent.com/u/12526493?v=4","gravatar_id":"","url":"https://api.github.com/users/brickspert","html_url":"https://github.com/brickspert","followers_url":"https://api.github.com/users/brickspert/followers","following_url":"https://api.github.com/users/brickspert/following{/other_user}","gists_url":"https://api.github.com/users/brickspert/gists{/gist_id}","starred_url":"https://api.github.com/users/brickspert/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brickspert/subscriptions","organizations_url":"https://api.github.com/users/brickspert/orgs","repos_url":"https://api.github.com/users/brickspert/repos","events_url":"https://api.github.com/users/brickspert/events{/privacy}","received_events_url":"https://api.github.com/users/brickspert/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":43,"created_at":"2018-04-09T11:59:07Z","updated_at":"2018-09-04T01:31:07Z","closed_at":null,"author_association":"OWNER","body":"# 前端小白半年准备进BAT\r\n\r\n先介绍下背景\r\n\r\n非211，985本科毕业。一年半PHP经验，一年半前端经验，前端一直在做`React`开发。\r\n\r\n半年之前，我是一个前端小小小白。多么小白呢？\r\n\r\n1. `css`调样式全靠试。\r\n2. 盒模型，好像知道是啥？好像又不知道！\r\n3. 看到别人说`BFC`，啥是`BFC`？为啥外边距会合并？有些会合并，有些不会合并，这都是啥玩意？\r\n4. `z-index`为啥有时候有效果，有时候没效果？为啥有时候小的值还在大的上面？\r\n5. `js`就会基础使用，稍微复杂的一脸懵逼。\r\n6. 看别人的文章，一看到`prototype`，立马头疼，这都是啥！什么原型，继承，离我远点！\r\n7. 闭包，好像知道是啥。但是说不出来。\r\n8. `arguments`，作用域链等等都是啥？\r\n9. …...\r\n\r\n我都不想去思考这些问题，啊，，，头疼，这都是什么？我都不会啊！\r\n\r\n这样的我，怎么出去面试？别人随便问个问题，我都不会！\r\n\r\n我又去网上看了别人的面试题，娘的哟，这是啥？这又是啥？好像会点，但是说不出来~~\r\n\r\n不行不行，我得赶紧学习了。但是我要怎么去准备呢？好像`js，html，css，http`都没系统学过啊？好像`react，webpack`这些玩意也没系统整理过啊。好多啊！\r\n\r\n废话不多说，我们开始吧~~\r\n\r\n吭哧\r\n\r\n吭哧\r\n\r\n吭哧\r\n\r\n…...\r\n\r\n经过半年的准备，我成功面试进了`BAT`！\r\n\r\n所以相信自己，从现在开始！你应该比我厉害吧？\r\n\r\n我看到很多像我之前一样迷茫的人，我觉得我的经历是可以复制的。就写下来，共勉！\r\n\r\n过程分为：\r\n\r\n```\r\n1. 系统学习基础知识\r\n2. 面试题提高\r\n3. 项目\r\n```\r\n\r\n## 系统学习基础知识\r\n\r\n基础知识通过看书来系统学习。\r\n\r\n1. 《JavaScript高级程序设计（第3版）》\r\n\r\n   系统学习一遍js，看这本书是非常痛苦的过程。预计时间在2个月左右。\r\n\r\n   不要心急，一章一章的过，每个知识点都要去理解，做笔记。\r\n\r\n   碰到看不懂的，反复去读，去网上查，一定要搞懂！\r\n\r\n2. 《CSS权威指南（第三版）》\r\n\r\n   系统学习`css`，预计时间2星期。记得做笔记，不会的点，反复去读，去查。\r\n\r\n3. css3教程学习\r\n\r\n   这个去网上找份教程，过一遍。每个新属性都去写下。\r\n\r\n4. 《html5与css3权威指南》\r\n\r\n   这个快速过下前面`html`部分就好了。\r\n\r\n   1个星期左右读完。\r\n\r\n5. 《图解HTTP》\r\n\r\n   非常重要！系统学习`HTTP`。半个月时间~\r\n\r\n6. 《ECMAScript 6 入门》\r\n\r\n   阮一峰写的。系统学习`ES6`。这个因人而异，时间长短不一，不过真的很重要！\r\n\r\n​\t好了，到这里为止，我们已经系统的学习了前端的各种知识了。应该花费了3个多月了。如果你能坚持下来，绝对会有一个质的飞跃。\r\n\r\n\r\n\r\n## 面试题提高\r\n\r\n下面我的策略是，找面试题，把网上能找到的面试都记下来，每个题都去深入研究！\r\n\r\n注意，**是深入研究，不是浅显的知道答案就行了**。\r\n\r\n面试题大部分来源于这里[https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese](https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese)，还有很多很多其他的面经，我就不一一贴出来了，反正能搜到的我都看了~\r\n\r\n我把我整理的面试题列出来，希望**每个题你都能深入去研究**。\r\n\r\n### HTML\r\n\r\n1. `DOCTYPE`（文档类型）的作用是什么？\r\n\r\n   参考https://witcher42.github.io/2014/05/28/doctype/\r\n\r\n2. 浏览器标准模式 (`standards mode`) 、几乎标准模式（`almost standards mode`）和怪异模式 (`quirks mode`) 之间的区别是什么？\r\n\r\n   - 产生的历史原因是啥？\r\n   - 怪异模式有哪些怪异的行为？\r\n\r\n3. 使用 `data-` 属性的好处是什么？\r\n\r\n   可以去时间下`data-*`的使用啦\r\n\r\n4. 如果把 `HTML5` 看作做一个开放平台，那它的构建模块有哪些？\r\n\r\n   研究下`HTML5`的所有模块\r\n\r\n5. `cookies`、`sessionStorage` 和` localStorage` 的区别\r\n\r\n6. 请解释 `<script>`、`<script async>` 和 `<script defer>` 的区别。\r\n\r\n7. 为什么通常推荐将 CSS `<link>` 放置在 `<head></head>` 之间，而将 JS `<script>` 放置在 `</body>` 之前？你知道有哪些例外吗？\r\n\r\n8. 什么是渐进式渲染 (`progressive rendering`)？\r\n\r\n9. `HTML` 和 `XHTML` 有什么区别？\r\n\r\n10. `HMTL5`新标签\r\n\r\n### CSS\r\n\r\n1. `CSS` 中类 (`class`) 和` ID` 的区别\r\n\r\n2. 请问 \"resetting\" 和 \"normalizing\" CSS 之间的区别？你会如何选择，为什么？\r\n\r\n   <https://github.com/necolas/normalize.css>\r\n\r\n   <https://github.com/shannonmoeller/reset-css/blob/master/reset.css>\r\n\r\n3. 请解释浮动 (`Floats`) 及其工作原理\r\n\r\n   这个非常重要，前面读的书上有这个，一定要完全搞懂。\r\n\r\n4. 清除浮动\r\n\r\n   重要\r\n\r\n5. 描述`z-index`和叠加上下文是如何形成的？\r\n\r\n   重要，书上有，先理解。然后我推荐两个文章\r\n\r\n   https://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html\r\n\r\n   http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/\r\n\r\n6. 请描述 BFC(`Block Formatting Context`) 及其如何工作？\r\n\r\n   理解BFC的特性及如何触发BFC\r\n\r\n7. CSS sprites\r\n\r\n   优点，缺点\r\n\r\n8. 图片替换文字方案\r\n\r\n9. 你会如何解决特定浏览器的样式问题？\r\n\r\n10. 如何为有功能限制的浏览器提供网页？\r\n\r\n    渐进增强，优雅降级等等等等\r\n\r\n11. 有哪些的隐藏内容的方法？\r\n\r\n12. 栅格系统 (`grid system`)\r\n\r\n13. 你用过媒体查询，或针对移动端的布局`CSS` 吗？\r\n\r\n14. 如何优化网页的打印样式？\r\n\r\n15. 在书写高效 `CSS` 时会有哪些问题需要考虑？\r\n\r\n16. 使用 `CSS` 预处理器的优缺点有哪些？\r\n\r\n17. 如果设计中使用了非标准的字体，你该如何去实现？\r\n\r\n18. 请解释浏览器是如何判断元素是否匹配某个 `CSS` 选择器？\r\n\r\n19. 请描述伪元素 (`pseudo-elements`) 及其用途\r\n\r\n    伪元素，伪类等等都去研究下\r\n\r\n20. 请解释你对盒模型的理解，以及如何在 `CSS` 中告诉浏览器使用不同的盒模型来渲染你的布局\r\n\r\n21. 请罗列出你所知道的 `display` 属性的全部值\r\n\r\n22. 请解释` inline` 和` inline-block` 的区别\r\n\r\n23. 请解释` relative`、`fixed`、`absolute` 和 `static` 元素的区别\r\n\r\n24. 请问你有尝试过 `CSS Flexbox` 或者 `Grid` 标准规格吗\r\n\r\n    flex很重要，每个属性都要知道。建议去读阮一峰的flex文章\r\n\r\n25. 为什么响应式设计 (`responsive design`) 和自适应设计 (`adaptive design`) 不同？\r\n\r\n26. 你有兼容 `retina` 屏幕的经历吗？如果有，在什么地方使用了何种技术？\r\n\r\n    移动端开发必须知道！\r\n\r\n27. 请问为何要使用 `translate()` 而非 `absolute position`，或反之的理由？为什么？\r\n\r\n28. 如果实现一个高性能的`CSS`动画效果？\r\n\r\n29. `IFC`\r\n\r\n30. `css3`动画\r\n\r\n    各种属性熟悉下\r\n\r\n31. 布局之：左边定宽，右边自适应\r\n\r\n32. 圣杯布局，双飞翼布局\r\n\r\n33. 实现垂直居中和水平居中\r\n\r\n### Javascript\r\n\r\n1. 事件代理\r\n\r\n2. 请解释` JavaScript` 中` this` 是如何工作的\r\n\r\n3. `javascript`继承\r\n\r\n   这个不多说，十分十分重要。建议按照《高程三》的继承那里，仔细理解哦。\r\n\r\n4. `javascript`模块化\r\n\r\n   理解模块化发展过程，理解 `commonJS`，`AMD`，`CMD`，`ES6`模块化\r\n\r\n5. `IIFE` 立即执行函数\r\n\r\n6. `null undefined`区别\r\n\r\n7. 闭包 与 作用域\r\n\r\n   非常重要，书上有！\r\n\r\n8. 匿名函数\r\n\r\n9. 你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？\r\n\r\n10. 宿主对象 (`host objects`) 和原生对象 (`native objects`) \r\n\r\n11. 请指出以下代码的区别：`function Person(){}`、`var person = Person()`、`var person = new Person()`？\r\n\r\n12. `apply call bind`\r\n\r\n    **深入到源码**如何实现这三个功能的。\r\n\r\n13. `new`\r\n\r\n    源码如何实现的？\r\n\r\n14. `document.write()`\r\n\r\n15. 特性检测 特性推断 UA字符串嗅探\r\n\r\n16. `Ajax`工作原理\r\n\r\n    着重理解`XMLHttpRequest`！！\r\n\r\n17. 跨域\r\n\r\n    图片`ping`,` JSONP`,` CORS`。\r\n\r\n    这是面试必问的点。注意一定要完全理解，完全！\r\n\r\n18. 变量声明提升\r\n\r\n19. 冒泡机制\r\n\r\n20. `attribute` 和 `property`\r\n\r\n21. `document load` 和 `document DOMContentLoaded`\r\n\r\n    非常重要哦\r\n\r\n22. `==` 和 `===` 有什么不同\r\n\r\n23. 同源策略 (`same-origin policy`)\r\n\r\n    `Cookie`，`iframe`，`AJAX`同源\r\n\r\n24. `strict`模式\r\n\r\n25. 为何通常会认为保留网站现有的全局作用域 (`global scope`) 不去改变它，是较好的选择\r\n\r\n26. 为何你会使用 `load` 之类的事件 (`event`)？此事件有缺点吗？你是否知道其他替代品，以及为何使用它们？\r\n\r\n27. 请解释什么是单页应用 (`single page app`), 以及如何使其对搜索引擎友好 (`SEO-friendly`)\r\n\r\n    相当重要\r\n\r\n28. `Promise`\r\n\r\n    怎么用？源码如何实现的？\r\n\r\n    推荐文章：https://github.com/xieranmaya/blog/issues/3\r\n\r\n29. 使用一种可以编译成 `JavaScript` 的语言来写` JavaScript` 代码有哪些优缺点？\r\n\r\n30. `javascript`调试工具\r\n\r\n31. 对象遍历 和 数组遍历\r\n\r\n32. 可变对象和不可变对象\r\n\r\n33. 什么是事件循环 (`event loop`)\r\n\r\n    非常重要，面试必问。\r\n\r\n    深入原理，宏任务，微任务等等\r\n\r\n34. `let var const`\r\n\r\n35. 数组的方法\r\n\r\n36. `web worker`\r\n\r\n37. 柯里化\r\n\r\n38. 创建对象的三种方法\r\n\r\n39. 深拷贝和浅拷贝\r\n\r\n    可以实现手写深拷贝\r\n\r\n40. 图片懒加载\r\n\r\n    咋实现的？\r\n\r\n41. 网页各种高度\r\n\r\n    这个好难记，我也没记住~\r\n\r\n42. 实现页面加载进度条\r\n\r\n43. 箭头函数ES5如何实现\r\n\r\n    - 箭头函数和普通函数的区别\r\n\r\n### React\r\n\r\n1. 虚拟`DOM`是啥？以及diff算法原理\r\n\r\n2. `react` 事件绑定\r\n\r\n3. 生命周期\r\n\r\n4. 函数式编程，纯函数\r\n\r\n5. `React`创建组件的方式\r\n\r\n6. 组件性能优化\r\n\r\n   `shuouldComponentUpdate`\r\n\r\n   `pureComponent`\r\n\r\n   不可变数据\r\n\r\n   `key`\r\n\r\n   等等优化方法，每一点的优点和缺点\r\n\r\n7. 如何设计一个好组件\r\n\r\n8. 哪里进行网络请求？为什么\r\n\r\n9. 调用`setState`之后发生了什么\r\n\r\n10. `refs`\r\n\r\n11. `react16`新特性\r\n\r\n    尤其理解`time slice`和`suspense`\r\n\r\n12. 在 `React` 当中 `Element` 和 `Component` 有何区别\r\n\r\n13. 容器组件和展示组件\r\n\r\n14. `props.children`\r\n\r\n15. 路由实现原理\r\n\r\n16. `react`的`setState`同步还是异步？\r\n\r\n17. `Redux`，`react-redux`等原理\r\n\r\n18. 如何实现异步网络请求的？\r\n\r\n19. 组件间通信\r\n\r\n20. 高阶组件是什么和常见的高阶组件\r\n\r\n21. `React key`是干嘛的？\r\n\r\n### webpack\r\n\r\n1. `loader`\r\n\r\n   自己如何写一个`loader`\r\n\r\n2. `plugin`\r\n\r\n   自己如何写一个`plugin`\r\n\r\n3. `webpack`原理之普通打包\r\n\r\n4. `webpack`原理之多文件打包\r\n\r\n5. `webpack`原理之提取公共文件\r\n\r\n6. `webpack` 如何做到 tree shaking\r\n\r\n7. `webpack`配置文件基本概念\r\n\r\n8. `webpack`构建流程\r\n\r\n9. 前端模块化的理解\r\n\r\n10. 打包很慢，怎么解决？\r\n\r\n11. 打包出来的文件很大，怎么解决？\r\n\r\n### 安全问题\r\n\r\n1. `xss`\r\n2. `csrf`\r\n3. 等等....\r\n\r\n### HTTP\r\n\r\n1. 为什么传统上利用多个域名来提供网站资源会更有效\r\n\r\n2. `Long-Polling`、`Websockets` 和 `Server-Sent Event`\r\n\r\n3. 常见的请求头和响应头\r\n\r\n4. 和缓存有关的`HTTP`首部字段\r\n\r\n   相当重要。如何应用的？\r\n\r\n5. `HTTP method`\r\n\r\n6. `HTTP`状态码\r\n\r\n7. `https` 加密过程\r\n\r\n8. `http2`新特性\r\n\r\n### 性能\r\n\r\n1. 你会用什么工具来查找代码中的性能问题？\r\n\r\n2. 增强网站的页面滚动效能\r\n\r\n3. 重排，重绘，合成\r\n\r\n   相当相当重要\r\n\r\n4. 合成层\r\n\r\n   我在这里理解了一个多星期，静下心来去理解。\r\n\r\n   http://taobaofed.org/blog/2016/04/25/performance-composite/\r\n\r\n5. 前端优化方法\r\n\r\n6. `css3`动画和`js`动画对比\r\n\r\n### 其他问题\r\n\r\n1. 常见排序算法\r\n2. `babel`原理\r\n3. 实现一个幻灯片功能\r\n4. 你最近遇到过什么技术挑战？你是如何解决的？\r\n5. 浏览器输入网址后做了什么？\r\n\r\n## 项目\r\n\r\n面试问的最多的，除了基础知道，就是项目了。\r\n\r\n必须对自己做的项目，有十足的掌握。做项目的时候，有主人翁意识~\r\n\r\n项目业务理解，性能优化等等~\r\n\r\n\r\n\r\n行了，到这里就结束了。如果你能坚持下来，我觉得你自己就有很足的自信了！\r\n\r\n从一个弱鸡，成长为一个合格的前端菜鸟啦！\r\n\r\n路漫漫其修远兮~加油！\r\n\r\n一堆胡言乱语，希望对你有帮助。\r\n\r\n我再强调一下：基础很重要！项目很重要！\r\n\r\n等你找到工作就可以请我喝咖啡啦！\r\n\r\n![mm_reward_qrcode_1523185969073](https://user-images.githubusercontent.com/12526493/38496459-36500cd0-3c30-11e8-9134-a75be7eb3a68.png)\r\n"},"comment":{"url":"https://api.github.com/repos/brickspert/blog/issues/comments/418215607","html_url":"https://github.com/brickspert/blog/issues/16#issuecomment-418215607","issue_url":"https://api.github.com/repos/brickspert/blog/issues/16","id":418215607,"node_id":"MDEyOklzc3VlQ29tbWVudDQxODIxNTYwNw==","user":{"login":"brickspert","id":12526493,"node_id":"MDQ6VXNlcjEyNTI2NDkz","avatar_url":"https://avatars0.githubusercontent.com/u/12526493?v=4","gravatar_id":"","url":"https://api.github.com/users/brickspert","html_url":"https://github.com/brickspert","followers_url":"https://api.github.com/users/brickspert/followers","following_url":"https://api.github.com/users/brickspert/following{/other_user}","gists_url":"https://api.github.com/users/brickspert/gists{/gist_id}","starred_url":"https://api.github.com/users/brickspert/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brickspert/subscriptions","organizations_url":"https://api.github.com/users/brickspert/orgs","repos_url":"https://api.github.com/users/brickspert/repos","events_url":"https://api.github.com/users/brickspert/events{/privacy}","received_events_url":"https://api.github.com/users/brickspert/received_events","type":"User","site_admin":false},"created_at":"2018-09-04T01:31:07Z","updated_at":"2018-09-04T01:31:07Z","author_association":"OWNER","body":"@JoseyDon 社招"}}
{"actor":{"display_login":"brickspert"}}