收获阿里，腾讯，网易三家前端实习offer，学习方法分享

当你看到标题，便有一种本能点进来瞅瞅的时候，你可能是初涉前端，想在找工作前夕尽快地丰富自己的技能；也可能已经是前端经验非常丰富的人，来瞧瞧这个小子会写一些什么奇怪的文字；当然，你也可能是涉及任何一个领域，和我一样想在毕业后写代码挣钱养家的程序员，无论角色怎样，如果你身边有在前端路上稍微迷茫的童鞋的话，或许小小切图仔的一点心得能够帮上一些忙，下面是仔仔的一些感悟，水平有限，所以还请多多包涵。

小仔今年大三，大一下学期开始接触前端，在一波波春季实习生招聘的浪花里，收获了阿里，腾讯，网易三家的前端实习生offer，结果也出乎我的意料，但是真心觉得js是世界上最好的语言这感觉一点也没错！（玩笑话）

撇开具体细节来讲，前端相对于后端，直接摆在了用户面前，如果说后端面向的主要是业务逻辑，数据库，操作系统，那么前端面对的是用户交互和体验。不妨这么理解，为了提高用户的体验，我们需要使用CSS去做样式美化，需要使用JavaScript去完成一些如轮播图，模态框之类的交互组件，同样为了提高用户的体验，我们需要去做SEO优化，需要去考虑性能优化，去做脚本压缩，去做缓存控制，同时也为了我们自己开发方便，我们需要去学习使用一些自动化工具来解放我们的双手…
如果再有人问你前端是什么，就告诉他们 这是一个使用一大堆技术，用以提高用户体验的领域。

或许现在有仔仔们正在入门前端，内心颇感焦虑， 其实只要坚定了这条路，那么一定可以学好，并且找到心仪的工作的。下图是我总结的一套学习流程。

从一些简单的书籍入手， 多进行些广而浅的学习，后进行精而深的学习，在有限的时间内，应尽可能多地掌握一些基本知识，然后更多地进行实践。在学习中遇到了解决不了的问题，就去查，随后就及时做记录，然后再回过头去实践，往复这样的过程，提升会很快，下面小仔会根据个人的一些理解写上一些参考的学习经过，毕竟这是一个工程量很大的问题，所以会把平常参考的一些资料放在末尾，供大家更加细致的了解。

• 可以选择在W3school，这里有非常全而且基础的教程，完全足够我们入门，学过之后，我们应该对整个前端开发用的技术有初步的了解。（效果可以达到：我可能不太懂太多，但是我知道这个名词，懂这个API，知道简单的使用。）
• 可以在慕课网结合着视频进行学习，但是小仔觉得视频仅仅只能陪伴我们走到入门阶段，随后需要自己去养成一套学习方法去自主学习，所以不太建议一连串地全部学完之后再去手敲代码，而是学一点，敲一点，照着谁敲呢？可以是上述的W3school。

• 另外一本书便是大名鼎鼎的JavaScript高级程序设计了，建议买正版，这本书适合新手读，更适合老手读，比如可以在看完慕课网的视频之后来照着此书敲一敲学一学，感觉很酸爽，有句话是学得快，忘得快，所以得经常来回翻一翻，每次读完都会有新的感受。
• 当然W3school肯定满足不了聪明的你，所以再次奉上杀手锏MDN，中文的就不要看了，强迫自己去看英文的吧，你所需要的一切的解释，应有尽有。
• 光看文档太枯燥，想去看看别人的理解怎么办，可以去博客园进行海搜，遇见大牛的几率很大，然后就毫不犹豫地收藏到你的收藏夹里去吧。
• 也可以去伯乐在线去瞅瞅收集过的好的文章，一可以答疑解惑，二可以了解些前沿知识。
• 更有针对性的就可以去了解一下BAT，360有哪些了不起的前端团队吧，关注他们，或许未来就在其中了。
• 小仔目前推荐的东西都有个先决条件，就是需要联网，可是爱学的你或许在熄灯后上床也要看书，在教室听着Java课，心里却想着JavaScript，所以特意为你推荐GitBook，里面有高质量的文档，国内的有看云KanCloud，可以更好接收一些，它们都可以下载，一定要下载epub格式，随时随地装入你的手机和平板。
• 除了一些直接的知识，我们也需要社区文化，自豪地拥抱SegmentFault,StackOverflow吧，程序员的百度知道。
• GitHub是我们每一个人都需要常去的地儿，你需要知道，一切代码的来源，99%都在这儿，所以想知道些最新动态，花点时间泡在这儿准没错。

HTML并不是一门编程语言，它只是一些简单的标记罢了，也不需要花太多功夫去记住全部的标签，按需使用便可，入门后我们也大概清楚了CSS是一些标记对，通过描述样式来一层层叠加在诸如id和class之类的标签上，清楚了JavaScript在写法上的随意，但是随意会带来一些陷阱，诸如变量声明提升,函数作用域。具体地可以自己体会一下：

var name = 'webLearner';
function f(){
console.log('1:'+name);
var name = 'LuckyJing';
console.log('2:'+name);
}
f();
# result
1: undefined
2: LuckyJing

前端可以说是离命令行最远的一个角色了，不过，我们应该离命令行越近越好

• 在linux环境下工作吧，至少是在shell下工作吧，使用windows的仔仔去下载git吧，它会携带git bash，它是shell的一种，然后用它替换掉自带的命令行吧，目前windows 10 有了bash on Ubuntu on Windows，可以去试试看。
• 离命令行近了以后，我们就必须需要去下载Node.js，这是我们使用以下工具的基础，不用担心不会，目前只是提供一个运行环境而已，不需要去深入了解内部的东西。
• 了解npm，学习package.json，这会极大程度上提高前端编写规范和合理性，简单的理解npm install --save和npm install --save-dev便可。

• 在入门后，发现前端跟“玩具”似的，引入个<link/>,<script/>就算引入模块了，就可以用了，或许你现在是这样的：需要bootstrap，去百度搜，找到了官网，然后下载下来，然后复制到工作目录之下，然后引入，需要jquery的时候亦是如此，好的工作流可以无形中提升工作效率和编码信心，所以就此拥有模块的概念吧，试着去npm install -g bower，它很简单，毕竟它只是一个工具，没有人会喜欢复杂的工具的，具体的信息你都可以在npm网站上去找到。
• 或许你一直很好奇，输入网址服务器是怎么返回页面给客户端的，这其实是在服务器端那儿它一定运行着一个服务器程序，它来分发资源。所以在本地我们也需要一套服务器端程序，使用更加轻量的nginx吧，它足够钻研很久，但是对于初级学习来说的话，你只需要知道，我可以通过localhost访问到如下图所示的html文件夹，然后以后将项目放入其中，通过诸如localhost/demo/1.html之类的方式进行访问即可，有的时候我们想更换端口号，那么就去了解conf文件夹里面的配置信息吧，下载下来后，双击nginx.exe便会有一个一闪而过的命令窗口，这个时候其实nginx服务已经启动了，在浏览器输入localhost便能看到了。

• 作为切图仔，我们能够使用的编辑器也非常多，推荐Visual Studio Code,atom,WebStorm，前两个是简而美的编辑器，启动速度非常快，能够满足大部分要求，不过在做大项目的时候，还是得用WebStorm,某宝上可以买激活码，不推荐Sublime的原因是，配置起来比较麻烦，而且更新速度和维护质量没有前几个高，当然这只是我个人想法啦~

整理知识篇

如果光一味地嗖嗖地学习，那么遗忘率会非常高，而且经常会有一种感觉自己啥也没学到的错觉，所以现在开始记录博客吧，写点文字，提醒自己，原来我会这么多。

• markdown，它就是一些标记，5分钟入门，10分钟熟练绰绰有余，它可以尽量帮助我们摆脱鼠标，去百度搜索马克飞象吧，照着敲敲，感悟一下神奇。
• 方便的协作平台-简书，起初简书的本意是容纳一些真正的爱写文字的一群用户，谁知道还招来了一大批程序员，包括仔仔在内,所以不妨选择它作为你的博客起点吧，只需要在设置里切换为markdown格式便可以，而且它支持导出所有博文为md格式，方便迁移。

• 会了markdown，了解了GitHub，不妨去了解下静态博客搭建吧，使用hexo和免费的GitHub托管，轻松拥有github.io高逼格域名。
• 不太喜欢每次静态博客怎么办，推荐使用leanote，如果你用过wordpress，那么它们在形式上更加相似，不过wordpress历史包袱过多，所以使用原汁原味的markdown去书写leanote吧，更值得推崇的是，它拥有全平台客户端，完全可以做到随写随更，比如仔仔就喜欢在本地客户端书写，它会在有网络情况下自动同步到web端，不过需要你有一些简单的linux服务器知识，你可以在后期再折腾，现在，简书完全足够。

学习不是一味地学，积累和分享更快乐。

效率篇

仔仔是处女座，所以不论做什么时候，总喜欢打理清晰，所以给大家推荐一些高效率的工具。

• 思维导图工具-XMind，免费，Windows/Mac平台都有,当我们学习知识的时候，仔仔一直坚信理解并梳理清楚才能够算真学会了。所以我会结合博客和XMind，让知识体系更为清晰。

• 图形类工具-PowerPoint，Mac平台OmniGraffle，可能你也发现了，仔仔在这篇文章里面的配图很多都是用Omni制作的，但是在仔仔没有买Mac之前，一直都是用PownerPoint的啦，它不光可以做PPT，还可以做一些代码思路的梳理，快快用起来吧。

• 不会休息的程序员不是好的切图仔，所以使用Pomodoro管理我们自己的节奏吧，写上20分钟，休息上5分钟，在5分钟的时候思考那些没解决的bug，保证会比坐在电脑前想着要舒服，值得高兴的是，它又是一个全平台产品。
• 

面经篇

从16年3月到4月底，也接触过十几次面试了，腾讯和网易的为现场面试，一对一的。大概就像下面酱紫。

但是同时也有许多是电话面试，一般不会提前通知，做好随打随面的准备，我们无论如何也不懂面试官的世界，所以饭点打来是常有的事情，更有同学晚上11点接到面试电话， 与此同时，请随身携带耳机，好的通话效果一定得保证。

不管是哪一种面试，都要尽可能把面试官当做朋友看，没什么好紧张的，毕竟以后就是同事了（要有这个自信~），跟聊八卦一样聊技术而已，自我介绍不用刻意去背，自己简单的理一下，分为 基本信息，项目经验及技能，生活情趣就好啦，不宜过多，一般3分钟差不多，还有就是面试官在打电话时并不一定仔细看你的简历，所以最好不要说XX已经在简历上写了，反而可以引导面试官去阅读你的简历，抓住主动的机会，能够让自己内心快速平静下来，自信感爆棚。
面试中最会有不会的问题，不知道知识点的就果断说不知道吧，没什么不好意思的，如果是一些开放性的问题的话，比如算法，可以本着层层深入的原则，一点一点地把想法告诉面试官， 思路是最重要的，细节可以不完全对，但是要让面试官感受到你拥有独立思考，解决问题的能力。
面了这么多次，其实发现考察的问题的点其实大同小异，所以 技术面试的确可以准备，恶补上来，下面我简单列一下常问的大点，具体的可以看参考资料，也可以自己去搜索别人的面经，总的来说，现在面试的时候重心越来越偏靠js了，对于前端（全栈）的要求也逐渐凸显，见下图自己体会：

• HTML部分
  
  • 对HTML5的理解，Web语义化，SEO
  • 页面加载的过程
  • 结构组织
  • 新增API 如本地存储、Canvas
• CSS部分
  
  • 经典的圣杯布局
  • CSS3 transition transform animate
  • w3c盒子模型 和 IE盒子模型，box-sizing属性
  • BFC
  • 优先级
  • less 与 sass
  • background-*系列属性，这个不要忽视了，还是很重要的
• JS部分
  
  • 原型 闭包
  • 声明提升
  • 基本数据类型
  • 高阶函数
  • JSON
  • JSONP 跨域 iframe 通信
  • Ajax
  • 原生DOM操作（比如 逆序DOM节点）
  • 事件捕捉，捕获，冒泡，***
  • Array常用函数
  • String常用函数
  • ES5 + ES6
• 框架部分（大部分按照简历来）
  
  • Angular脏检查机制
  • 手写Angular指令，知道其生命周期
  • 手动实现MVC（考察）
• 衍生部分
  
  • HTTP1/2 理解、状态码、优化、缓存控制（必考）
  • TCP三次握手，四次挥手
  • XSS与CSRF（必考）
  • 学习经历和方法
  • 性能优化
  • 单元测试

参考资料：

• 前端零基础学习提纲
• 零基础如何系统地学习前端开发？
• Front-end Handbook
• TCP的建立与释放
• 2016十家公司前端面试小记
• 浏览器的渲染原理简介
• 前端开发面试题
• 一次完整的HTTP事务是怎样一个过程？
• 我是如何同时拿到阿里和腾讯offer的

寄语

这是小仔的创刊号，小仔一直是一个喜欢记录文字，学习过程的切图er，希望能够得到大家的支持，小仔会持续写下去。