根据自身实践归纳的前端学习路径，梳理从入门到掌握基础知识的进程、途径及资源，因水平所限无法涵盖所有方面，仅作初学者借鉴，旨在帮助新人减少摸索时间。

网络技术迅猛进步，市场竞争日益白热化，用户感受变得格外关键，使得精通网页开发的人才变得抢手，众多机构对这类技术人员的渴求持续增长，标准也不断提高，卓越的网页开发专家更是难得一见。虽然个人觉得网页开发入门门槛不高，但依然需要系统性地钻研，在夯实根基之后持续进修，成为出色的网页开发专家只是时间早晚的事。

掌握任何学问最关键的要素是志趣，倘若持续一段时间钻研后发觉不感兴趣，那么勉力去学将会非常煎熬，成效也必定不佳，因为很可能这会变成未来数年必需掌握的能力。然而互联网领域持续进步，网页设计成为相关从业者必须掌握的内容，偶尔会缺少专职的前端技术人员配合，因此即便不担任专门的前端职位，具备基础的前端能力也能让工作更加顺利。

后期邀请了一些同学分享学习经历。

必备基础技能

这个项目全面梳理了前端工程师需要掌握的各项领域知识。拥有基础能力后，可以从中明确提升路径，逐步拓展个人能力圈和认知范畴。

-dev-是外国友人归纳的前端开发资料库。范围十分宽泛。囊括了各类理论要点、实用工具以及先进方法，内容极为丰富。

以下是个人觉得入门阶段应该熟练掌握的基础技能：

在掌握以上基础技能之后，工作中遇到需要的技术也能快速学习。

基本开发工具

合适的手段能够显著增强学习成效，将注意力集中于知识内容，一旦遇到难题，能够迅速找到症结并加以处理，以下是我认为不可或缺的前端开发资源：

学习方法和学习目标

方法：

初学时期要反复研读权威著作的中文译本，每本书里的所有示例都要亲手编写并运行，然后在网页浏览器中观察实际呈现的模样

达到相应水平后，能够通过网络搜寻各类指南、范例，掌握不同用途的实际操作方式，以及普遍功能的具体构建途径。

阅读HTML，CSS，标准全面完善知识点

阅读前端牛人的博客、文章提升对知识的理解

善用搜索引擎

目标：

熟记前面知识点部分的重要概念，结合学习经历得到自己的理解

熟悉常见功能的实现方法，如常见CSS布局，Tab控件等。

入门之路

以下是入门阶段不错的书籍和资料

先研读《HTML & CSS: and Build 》的前九章内容,接着学习《HTML5: The 》的第一至四章。

CSS先看《CSS: The 》，然后《CSS权威指南》

先看《高级程序设计》，然后《权威指南》

HTTP看HTTP权威指南

在学习期间，HTML与CSS经常需要配合使用，实际工作中也是如此，一个简单的功能模块都要靠这三个技术配合才能完成。

实践是掌握技能的关键环节，书本内容主要阐述理论要点，其中附带的范例或许不够丰富，因此必须借助网络工具搜寻若干基础指南，参照这些指南来构建相应效果。此处列举若干值得推荐的指导链接

掌握基础技术是关键sublime text asp，在此基础上，建议深入学习，实践价值显著，相关读物有《》，或者访问官方网站

注册一个以https://.com结尾的账户，用来存放日常学习过程中积累的各类代码和项目。

积累了一定经验后能够创建一个个人网站，用来记录学习期间碰到的情况和应对措施，既能方便自身回顾，也能为其他学习者提供参考。还可以在http://www..com/或者http://www.csdn.net/这类平台上开设账号，这样既方便又实用。

常常借助搜索获取英文资讯时，应多能寻得源自http://.com/的优质回应，遇到疑难可直接在此进行检索，倘若有余力，加入账号为他人提供答疑，则对个人能力的增进大有裨益。

通读完经典著作，便能够访问先前基础能力部分提供的网址，仔细研读相关规范，从而完全领会其中的内容。

继续提高

掌握了初步知识，前端大致算是初步掌握，此刻或许每个人心中都形成了若干学习目标，倘若尚未确立，能够借鉴先前必备技能部分提及的这两个项目，从中挑选部分内容进行深入钻研，以下列举了若干值得关注的领域，

一些个人经历

的学习经历

上面的大神都总结得差不多了，我这里就胡扯一些吧

工具

前端构建辅助工具，需要关注以下几项特性：

watch ：通过表达式查看当前内存中的值

调用栈：需要查看调用栈时，可以开启异步模式，这样就能观察异步调用栈，这对于调试ajax操作特别有帮助

scope ：作用域链上的变量，非常有用

: 修改页面后自动刷新，不用按F5

：直接在页面上测量的利器

样式调整将即时生效，无需重新加载页面，更新内容会同时反映在源代码文件里

image tool：测量，取色

UC二维码：移动端调试扫码必备

，YSlow：页面性能分析和优化插件

马克飞象：优秀的在线编辑器，快速写周报，做记录

2.  text2：编码方便，插件多，速度快，性能好

IDEA是种集成开发环境，它融合了多种功能，编程时感到便利，不过对电脑资源消耗较大

Mark Men是进行测量、挑选色彩、进行标记的得力工具，拿到视觉设计图样后，人们最先启动的就是这款软件

5.  GFW ：我用红杏，可以的话买个虚拟服务器当梯子

这款hosts管理工具极为出色，能够便捷地调整hosts文件，对于开发与调试工作而言不可或缺。

7.   ：Mac 平台最好用的抓包分析工具

这款代理抓包工具制作精良，体量极其微小，部署起来十分便捷，对于手机设备（真实硬件）的应用调试工作极具帮助。

这个Todo List相当实用，当任务和需求数量增多时，使用起来非常便捷。

技能

前端的技术范畴，并不仅限于HTML和CSS，其涉及的内容相当广泛。前端技术的体系结构非常庞大，以下仅列举一些我在开发过程中遇到的情况进行阐述。

语言基础

：

CSS：

HTML：

进阶

:

异步IO实现

垃圾回收

事件队列

这个体系结构借鉴了选择器的概念，不过个人觉得不能称之为框架，更像是实用工具集，由于它没有模块载入功能，其源代码部分非常适合深入学习和研究

需要掌握MVVM框架，关键在于领会其核心思想，弄清双向数据同步的运作方式，以及怎样实现模块间的分离

：优秀的工具库，方便的理解常用工具代码片段的实现

/React: 组件化开发，面向未来，理解组件化开发的原理

CSS和HTML涉及CSS3的功能和HTML5的功能，还包括浏览器处理的方法和显示的机制

SVG及矢量图原理

开发及动画原理(帧动画)

Video和Audio

常用的：

一些理念：

性能优化：

项目

Git：本地版本管理的机制

SVN：远程中心的版本管理机制

Gulp：基于流构建，速度快、模块质量好

Grunt：独立任务构建，速度慢，配置蛋疼，灵活性高

less：语法简单，但功能有限

jade、ejs、等模板引擎，各有各的长处

：工程师最爱，我没用过

本地代理：

mocha

npm

bower

spm

git pages

hexo

未来

HTML模板

DOM

HTML

其他

部分事务并非仅凭打字测试即可妥善处理，我在实践过程中领悟颇深，这些既是我的经历，也是我自认存在不足之处

入门书

学习基础知识能够通过研读书籍实现，然而书籍中的内容大多已经不再适用，在钻研书籍的同时，还应该不断留意行业发展的最新情况。以下列举几本我认为有价值的书籍：

一些不错的网站

历程

曾经从事Java SSH相关工作，后来转而学习前端开发，因此能力相对有限，常常碰到不少难题。主要依靠阅读书籍和W3C平台上的指导，以及汤姆大叔等博主撰写的文章来入门。当时对原生的探索也不够深入，直到后来阅读了多本编程书籍，例如老道的语言精粹等，从中获得了大量关于语言层面的见解。但这样还不够，因此我常常会去社区浏览大家的讨论内容，接着查阅相关文献，若感兴趣便寻找更多资料阅读，或者动手编写示例代码，学习CSS主要就是依靠这种方法。后来我开始更多地关注资深人士的博客文章和深度书籍，同时留意新的知识和技术框架，并且持续实践提交代码，从中也掌握了许多学问。实习期间，亲身实践项目开发，可以掌握许多课堂之外的理念和思路，这对个人成长很有益处。现在不聊了，得赶紧干活争取工作机会了...

的学习经历

qiu神邀我分享前端学习心得，本段不赘述前端知识体系框架，因为各位高手的梳理已相当完备，我仅提供几个个人觉得颇具价值的资源供大家参考，接着主要谈谈我在前端学习期间碰到的难题以及归纳的得失体会，倘若能对渴望进入FE领域的初学者有所助益，使他们少些弯路，每迈出一步都清楚后续的路径，那便是我最大的心愿。各位大神的总结和分享详见qiu神整理的FE-。

首先，前端领域的学习方式因人而异，每个人都可以找到最适合自己的途径，这篇文章仅提供一些参考意见，内容组织可能不够严谨，请大家谅解。

缘起

我偶然进入前端领域，原本一直朝着游戏开发的方向努力，曾参与过游戏网站的制作，也使用过像Unity这样的商业游戏引擎，并尝试开发过几个游戏模型，但自从研究生一年级进入实验室后，就被导师安排去编写代码，导师给了我半个月时间来创建一个基于百度地图API的数据展示页面，虽然这个时间安排还算充裕，但由于之前几乎没有接触过，也不熟悉地图API的使用，因此我就一边研读《权威指南》这本书，一边参考实验室前辈留下的代码，最终总算完成了所有功能。那个页面算我的js入门作了，也是我前端学习路线的开始。

回想起来，尽管被安排从事前端工作，但持续做下去并把它做好，终究要依靠兴趣来驱动，毕竟前端是一个充满吸引力的技术方向，并且它的相关社群每天都非常活跃。

项目，下一个项目

我认为前端入门时不必依赖书本，可以纯粹通过项目来学习。虽然我本人是借助犀牛书进行学习的，但如果你时间不够充裕，或者觉得阅读大部头书籍很枯燥，那就不要像我这样做。不过，如果决定通过读书学习的话，最好把书中的示例都亲手实践一遍。我在研究生入学前对一无所知，四月份学校还没开学，导师就给我扔了个百度地图API的项目，随后又接手了各种ERP系统和地图数据可视化，虽然任务形式不断变换，但基本上都是前端工作，SSH和开发也略微参与过，整个实验室中只有我负责前端，真是难以置信？在富客户端单页应用盛行的时代，后端往往就是一个接口，绝大部分代码量都堆在前端，我一个人承担所有前端开发，那种成就感难以言表……期间跟随导师体验了创业，每天从早上七点忙到晚上十点，也算经历了一段飞速发展的时期。

先理解技术的整体结构，构思一个可实现的初步方案，构建一个基础可用的原型，再逐步优化其细节，等原型开发完毕，对这项技术就会有直观的体会，之后再深入钻研相关书籍，效果会更好。我从最初使用原生，到后来转向ExtJS，再到根据导师建议选择技术，最后自主决定技术方向，通过一个个项目不断实践，这个过程就像不断挑战关卡升级一样。若无具体事项可做，不妨主动构思并开展新计划，亲身实践构思中的方案sublime text asp，既充满趣味，也能获得满足感。

收集癖和知识管理

前端掌握存在一个特性，许多知识点都是零散的，分布各处，必须依靠个人去梳理、归纳和提炼。在社交平台和问答社区里，汇聚了许多高人，你并非只为探听消息，他们偶尔提及的只言片语，往往蕴含着深远启示，也许某个不经意点出的词汇，就会变成你接下来钻研的方向。务必汇集这些资讯，灵活运用，积极提问，深入思索。如同游戏中的搜集环节，前端学习同样是一个需要不断搜集内容的“过程”，只不过你需要借助知识管理工具来充当收纳箱和存储柜，我所了解的资深人士无一例外都是知识管理工具的频繁使用者，他们过去使用的工具，那时还没有与云存储对接，现在基本上都在用，笔记已经累积到1200多篇，书签本来计划使用，因为它采用标签管理方式，但一直未能有效应用。主要不在于那些工具，不过得心应手的工具确实能提升学习速度。首要之务是时刻维持强烈的学习热情，你的目的是掌握前端所有知识，当然不必全部精通，毕竟精力有限，现实中也无法完全做到。

跟对神

这种掌控力好像不怎么样，关于和领导的关系就不详细讲了，很大程度上要靠运气。不过话说回来，多和身边的技术达人沟通才是正途，这些达人不一定非要很厉害，但一定要对技术充满兴趣。研究生一年级的时候我兴致很高，每天早上七点就到实验室，结果发现有个家伙比我来得更早。后来得知那个人上午就离开了，下午又重新出现，导师对此毫不在意，原来他晚上不休息整夜编写程序，上午才赶回去休息。之后经常和这位非凡的人探讨疑难，每次都感觉自己的见识迅速增长。另外实验室里还有一位厉害角色，被前面那位通宵达旦的人形容为“只能远远看着，一直努力追赶，却从未真正追上”，这两位厉害角色有个共同点，就是什么都有所涉猎，因此什么话题都能聊得来，我有一阵子制定了阅读计划，从C/C++学起，接着是VC/MFC，然后是Unix网络编程，最后一路看到Java关键技术和MSDN上的C#编程手册，跟他们也能兴致勃勃地讨论很久。

归根结底是这两位前辈把我引入了误区，或者说从一种困境转移到了另一种困境，尽管两位前辈并非从事前端开发，但技术领域往往存在共通点。

读书

阅读，应当广泛涉猎，选择优质书籍。刘未鹏在其个人网站上提及过一个观点，即首月薪资数额，大致等同于先前购入并研读的科技类书籍累计成本，此处强调的科技书籍，特指那些备受推崇且公认的权威之作。探讨这一观点的精准度或许并无太大价值，然而其内在逻辑确凿无疑，核心在于强调广泛阅读经典科技著作的重要性。最令人震惊的一个事例，徐宥在他读的大学里声称清理了图书馆全部的TP312书架，对于前端领域的经典著作，我整理了一份前端书籍清单，倘若还有遗漏的前端必读佳作，欢迎在评论区补充，若有机会，不妨逐本通读这些书籍，我也在寻找大段连续的时间来仔细研读它们。先前提及的，关于前端领域知识的零散性，以及通过汇集碎片化信息，从网络日志中迅速获取知识等，仅是前端探索的一个环节，若期望透彻掌握某个知识体系，明晰其发展脉络，形成整体认知，研读权威著作仍是不可或缺的步骤。

我从头开始研读犀牛书，随后又涉猎了若干本与前端关联不大的经典著作，此后借助实验室的项目及个人开发的小程序，逐步对前端技术有了较为深入的理解，进而阅读了《模式》、《设计模式》以及《编写可维护的代码》，后来接触到node，并利用它制作了一些小应用，又阅读了《 up and run》和《权威指南》，但感觉前者存在一些不足。那个时候朴灵的那本《深入浅出》还没有出版，等它出来之后就去图书馆借来读完了，这样读下来感觉挺不错的，不过感觉读的还是不够多，还需要接着看（参考前面的书单）。

前端的定位

前端的岗位性质决定了你需要掌握哪些领域的知识和技能，也影响着你在技术领域需要特别关注哪些方面。如果仅仅将前端理解为负责页面布局、实现交互效果和视觉呈现，那么对前端的认知还比较浅显。在阿里巴巴的最后一轮面试中，我向面试官提出了一个问题：前端技术发展迅速，其覆盖的范围不断扩大，相关的规范也日益增多，仿佛它的每一个分支都能延伸得很远。如何为前端设定恰当的角色？评审人员反复讲解，最终归纳为要点，即前端是用户与网络之间的沟通桥梁，也是用户感受的缔造者。换言之，前端的根本任务在于打造用户感受，优化用户感受，始终将用户感受放在首位。无论你是从界面交互角度切入，还是从系统运行表现入手，抑或是优化操作环节提高工作效率，所有努力的根本目的都是改善和增强用户感受，最终成果都必须落实到用户使用体验上。我觉得这个概述很有见地，不过"用户体验"这个概念过于笼统，并非仅限于界面设计人员，例如在后台开发中改进数据运算方式，从而增强系统运行效率，这同样有助于改善用户感受。

现阶段的前端开发人员发展到某个程度，必然会面对许多超越单纯页面制作、视觉呈现以及交互实现等基础工作，诸如自动化测试、图形处理、效能提升等复杂议题，更往深层则是PHP/JSP/ASP等技术领域，以往后端模板的设计通常归于后端开发，但随着前端架构的持续发展，可能会要求参与后端模板的编写，需运用后端编程语言（PHP/Java/C#等），这就是所谓的全栈开发（但这样的工作方向并不与前端职业的初衷相违背，全栈开发依然聚焦于用户交互界面，其核心目标依旧是改善用户的使用感受）。最广为人知或者讨论频率最高的当属node，其实这些技术方案皆可，据称百度偏爱PHP，而阿里则更倾向于node。

玉伯在其网络日志中阐述过所谓全端技术是平面型的，而全栈技术则是立体型的。全端技术涵盖了所有终端设备，本质上都属于前端范畴，因为它们都与用户交互紧密相关，直接影响着用户感受。为了适应多种终端的开发需求，开发者不仅需要掌握网页前端技术，还可能需要拓展iOS平台开发的知识。幸运的是，随着开发模式的演变，对特定编程语言掌握的深度要求有所降低。

全栈开发模式对新兴企业而言极具适配性，通常包含从前端到后端，从编程到系统管理的完整流程，这种范畴无需赘述，多数人不会选择此路径，立志成为此类全能工程师的读者或许无需继续阅读；而特定含义的全栈则专指采用语言实现前后端一体化，不仅技术栈相同，编程范式一致，甚至可能共享同一代码库。更多了解全栈开发可以看看玉伯这篇说说全栈工程师。

我的这些看法是关于前端以及由此引申出的技术路径的初步认识，要了解一个领域，掌握它的宏观发展脉络和未来动向确实很有必要。想要全面把握前端的学习方向和职业发展轨迹，可以参考拔赤归纳的这篇前端开发十日谈。

最后

贡献几个对前端学习、面试有帮助的链接：

https://.com//Front-end---

https://.com//fks

http://www.f2er.info/

http://book..com///

byr论坛的建议

与grunt相比，学习gulp会比较简单

做SPA的话，推荐.js和 ..js

翻墙不用折腾，花十块钱买一个月的 红杏。

把基础打扎实了再学这些都没问题。

html 没什么好说的，有空学学html5。

阅读相关文档时要侧重于css内容，由于众多中文资料观点不一，频繁查阅容易造成理解混乱。

有一个平台能够查询各种浏览器对HTML和CSS标签及属性的兼容性信息，相当方便。

阅读高级编程指南,但这么庞大的书籍内容看过容易遗忘。其中关于关键要素的阐释：事物/基础链接/创建方法/操作环境/变量关联/隐藏机制/特定指示,有一篇佳作值得参考。

有空可以浏览一下 6，打算来年六月推出。阮一峰的主页有基础教程。

众多 API,本站提供便捷查询服务。待有空闲时,需深入理解其运用方法。

多安装一些辅助工具，比如用于发现代码问题的，用于创建新文件夹的，以及用于组织代码的。

如有侵权请联系删除！