如何在有限时间内尽可能高效率地学习前端？

关注“重度前端”

助力前端深度学习

━━━━ 

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

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

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

如果再有人问你前端是什么，就告诉他们这是一个使用一大堆技术，用以提高用户体验的领域。

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

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

---

灌输知识篇

• 可以选择在W3school，这里有非常全而且基础的教程，完全足够我们入门，学过之后，我们应该对整个前端开发用的技术有初步的了解。最终效果可以达到：我可能不太懂太多，但是我知道这个名词，懂这个API，知道简单的使用。

• 可以在慕课网结合着视频进行学习，但是我觉得视频仅仅只能陪伴我们走到入门阶段，随后需要自己去养成一套学习方法去自主学习，所以不太建议一连串地全部学完之后再去手敲代码，而是学一点，敲一点， 照着谁敲呢？可以是上述的W3school。

• 另外一本书便是大名鼎鼎的JavaScript高级程序设计了，建议买正版， 这本书适合新手读，更适合老手读，比如可以在看完慕课网的视频之后来照着此书敲一敲学一学，感觉很酸爽，有句话是学得快，忘得快，所以得经常来回翻一翻，每次读完都会有新的感受。

• 当然W3school肯定满足不了聪明的你，所以再次奉上杀手锏MDN，中文的就不要看了，强迫自己去看英文的吧，你所需要的一切的解释，应有尽有。

• 在线文档平台也不能错过，极力推荐浏览器版本http://devdocs.io，Mac上推荐Dash。

• 光看文档太枯燥，想去看看别人的理解怎么办，可以去博客园，掘金进行海搜，遇见大牛的几率很大，然后就毫不犹豫地收藏到你的收藏夹里去吧。

• 更有针对性的就可以去了解一下BAT，360有哪些了不起的前端团队吧，关注他们，或许未来就在其中了。

• 目前推荐的东西都有个先决条件，就是需要联网，可是爱学的你或许在熄灯后上床也要看书，在教室听着Java课，心里却想着JavaScript，所以特意为你推荐GitBook，里面有高质量的文档，国内的有看云KanCloud，可以更好接收一些，它们都可以下载，一定要下载epub格式，随时随地装入你的手机和平板，iPhone里的iBooks，其他平台里推荐iReader。

• 除了一些直接的知识，我们也需要社区文化，自豪地拥抱SegmentFault,StackOverflow吧，程序员的百度知道。

• GitHub是我们每一个人都需要常去的地儿，你需要知道，一切代码的来源，99%都在这儿， 所以想知道些最新动态，花点时间泡在这儿准没错。

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

环境搭建篇

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

• 翻墙，以下大部分都建立在翻墙的基础上，目前常用的工具是Shadowsocks，我目前使用的是飞讯v*n，它的配置也简单一些，费用个人使用的话是28元/月。

• 在Linux环境下工作吧，至少是在shell下工作吧，使用windows的同学们去下载git吧，它会携带git bash，它是shell的一种，然后用它替换掉自带的命令行吧。

• 离命令行近了以后，我们就必须需要去下载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托管。

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

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

效率篇

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

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

• 图形类工具-PowerPoint，Mac平台OmniGraffle，可能你也发现了，这篇文章里面的配图很多都是用Omni制作的。

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

面经篇

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

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

不管是哪一种面试，都要尽可能把面试官当做朋友看，没什么好紧张的，毕竟以后就是同事了，跟聊八卦一样聊技术而已，自我介绍不用刻意去背，自己简单的理一下，分为基本信息，项目经验及技能，生活兴趣就好啦，不宜过多，一般3分钟差不多，还有就是面试官在打电话时并不一定仔细看你的简历，所以最好不要说XX已经在简历上写了，反而可以引导面试官去阅读你的简历，抓住主动的机会，能够让自己内心快速平静下来，自信感爆棚。

面试中最会有不会的问题，不知道知识点的就果断说不知道吧，没什么不好意思的，如果是一些开放性的问题的话，比如算法，可以本着层层深入的原则，一点一点地把想法告诉面试官，思路是最重要的，细节可以不完全对，但是要让面试官感受到你拥有独立思考，解决问题的能力。

面了这么多次，其实发现考察的问题的点其实大同小异，所以技术面试的确可以准备，恶补上来，下面我简单列一下常问的大点，具体的可以看参考资料，也可以自己去搜索别人的面经，总的来说，现在面试的时候重心越来越偏靠javascript了，对于前端（全栈）的要求也逐渐凸显，见下图自己体会。

HTML部分

1. 对HTML5的理解，Web语义化，SEO

2. 页面加载的过程

3. 结构组织

4. 新增API 如本地存储、Canvas

CSS部分

1. 经典的圣杯布局

2. CSS3 transition transform animate

3. w3c盒子模型 和 IE盒子模型，box-sizing属性

4. BFC

5. 优先级

6. less 与 sass

7. background-* 系列属性，这个不要忽视了，还是很重要的

JS部分

1. 原型 闭包

2. 声明提升

3. 基本数据类型

4. 高阶函数

5. JSON

6. JSONP 跨域 iframe 通信

7. Ajax

8. 原生DOM操作（比如 逆序DOM节点）

9. 事件捕捉，捕获，冒泡，代理

10. Array常用函数

11. String常用函数

12. ES5 + ES6

13. 框架部分（大部分按照简历来）

14. Angular脏检查机制

15. 手写Angular指令，知道其生命周期

16. 手动实现MVC（考察

17. 衍生部分

18. HTTP1/2 理解、状态码、优化、缓存控制（必考）

19. TCP三次握手，四次挥手

20. XSS与CSRF（必考）

21. 学习经历和方法

22. 性能优化

23. 单元测试

24. React + Redux

寄语

好的学习方法比什么都重要，虽然这篇文章是在讨论前端，但是绝对不局限于前端，掌握好的学习方式，可以无形中减少我们的学习成本，努力不是用耗时多少来衡量的，我们需要学好，当然也需要玩好，开心才是最重要的。

共勉~

作者：LuckyJing 

源自：http://www.jianshu.com/p/5746b11ff650

 关注-重度前端--助力深度学习

为web前端同行提供有价值、有深度的技术内容

理解 | 分享 | 启发