初学者想快速成长为web前端大牛？听听这些有用的经验！

我曾以为成为一个技术大牛的唯一途径是玩命地学习与工作，这个想法差点毁了我。后来我开始反思，发现自己的时间安排极为不合理，并逐渐悟出了下面这5个道理，这才让自己从那种高压状态中解脱出来。 结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。一、不要因为怕自己落伍而去学习新东西一个优秀的开发者始终在学习，这一点毋庸置疑。诚然，旧的技术终会被淘汰。但是新的技术终有一天会变成旧的。因此，没有必要一味地去追求最新的技术。平均每37秒就会诞生一个新的标准或框架，你不可能把它们都学会。很多新技术、框架或者新特性对你来说都不是必需的，你没必要非得了解它们。真正有价值的技术需要经过社区和市场一段时间的打磨才能出现。IT公司通常都会重点培养适合于自己的技术，没有哪个公司会一拍脑门让自己的代码去适配某个全新的框架。因此你也不用太担心因为某些新技术而被裁员。你需要关注的是这三类知识，按照优先级排列如下：（1）基础是重中之重。当你掌握一门基础知识后，你可以快速掌握其相关的技术。比如如果你非常熟悉JavaScript，那么基于JavaScript的任何框架都难不倒你。如果你掌握了面向对象编程，那么你可以快速掌握一门新的面向对象的语言。深入学习基础能够大幅提高你的学习效率。（2）你常用技术的最新版本。你平常用得最多的技术才是你的铁饭碗。如果它们出了新的版本，那么你有必要花时间去学习一下。（3）大公司推崇的技术。如果一个非常知名的公司（如谷歌、脸书和微软）发布了一个新的技术并不断地对它进行维护，那么这个技术就值得你去关注。曾经社区里有成百上千个非常火的JavaScript框架，结果Angular和React的出现瞬间抢走了他们的风头。好好规划你的学习时间，每天安排一段时间来学习。这段时间不一定很长，哪怕只有25分钟也能使你有所成长。 我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流3000人裙：前面：851 中间：231 最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。二、必备基础技能以下是个人觉得入门阶段应该熟练掌握的基础技能：HTML4，HTML5语法、标签、语义。CSS2.1，CSS3规范，与HTML结合实现各种布局、效果。Ecma-262定义的javascript的语言核心，原生客户端javascript，DOM操作，HTML5新增功能。一个成熟的客户端javascript库，推荐jquery。一门服务器端语言：如果有服务器端开发经验，使用已经会的语言即可，如果没有服务器端开发经验，熟悉Java可以选择Servlet，不熟悉的可以选PHP，能实现简单登陆注册功能就足够支持前端开发了，后续可能需要继续学习，最基本要求是实现简单的功能模拟。在掌握以上基础技能之后，工作中遇到需要的技术也能快速学习。基本开发工具恰当的工具能有效提高学习效率，将重点放在知识本身，在出现问题时能快速定位并 解决问题，以下是个人觉得必备的前端开发工具：文本编辑器：推荐Sublime Text，支持各种插件、主题、设置，使用方便浏览器：推荐Google Chrome，更新快，对前端各种标准提供了非常好的支持调试工具：推荐Chrome自带的Chrome develop tools，可以轻松查看DOM结构、样式，通过控制台输出调试信息，调试javascript，查看网络等辅助工具：PhotoShop编辑图片、取色，fireworks量尺寸，AlloyDesigner对比尺寸，以及前面的到的Chrome develop tools，FQ工具：lantern, 壁虎漫步学习方法和学习目标方法：入门阶段反复阅读经典书籍的中文版，书籍中的每一个例子都动手实现并在浏览器中查看效果。在具备一定基础之后可以上网搜各种教程、demo，了解各种功能的实际用法和常见功能的实现方法。阅读HTML，CSS，Javascript标准全面完善知识点。阅读前端牛人的博客、文章提升对知识的理解。善用搜索引擎。目标：熟记前面知识点部分的重要概念，结合学习经历得到自己的理解。熟悉常见功能的实现方法，如常见CSS布局，Tab控件等。。入门之路在整个学习过程中HTML CSS JavaScript会有很多地方需要互相结合，实际工作中也是这样，一个简单的功能模块都需要三者结合才能实现。动手是学习的重要组成部分，书籍重点讲解知识点，例子可能不是很充足，这就需要利用搜索引擎寻找一些简单教程，照着教程实现功能。以下是一些比较好的教程网址可以搜索各大公司前端校招笔试面试题作为练习题或者他人总结的前端面试题还有个人总结的面试题（带参考答案）。原生javascript是需要重点掌握的技能，在掌握原生javascript的基础上推荐熟练掌握jQuery，在实际工作中用处很大，这方面的书籍有《Learning jQuery》或者去jQuery官网。建一个https://github.com/账号，保存平时学习中的各种代码和项目。有了一定基础之后可以搭建一个个人博客，记录学习过程中遇到的问题和解决方法，方便自己查阅也为其他人提供了帮助。经常实用Google搜索英文资料应该经常找到来自http://stackoverflow.com/的高质量答案，与到问题可以直接在这里搜索，如果有精力，注册一个账号为别人解答问题也能极大提高个人能力。经典书籍熟读之后，可以打开前面必备基础技能部分的链接。认真读对应标准，全面掌握知识。继续提高有了前面的基础之后，前端基本算是入门了，这时候可能每个人心中都有了一些学习方向，如果还是没有。可以参考前面必备技能部分提到的那两个项目，从里面选一些进行发展学习。以下是一些不错的方面：Grunt：前端自动化工具，提高工作效率less css：优秀的CSS预处理器bootstrap：优秀的CSS框架，对没有设计师的团队很不错，与less结合使用效果完美requirejs：AMD规范的模块加载器，前端模块化趋势的必备工具Node.js：JavaScript也可以做后台，前端工程师地位更上一步AngularJS：做Single Page Application的好工具移动端web开发：智能手机的普及让移动端的流量正在逐步赶超PC端Javascript内存管理：SPA长期运行需要注意内存泄露的问题High Performance JavaScript(Build Faster Web Application Interfaces)Best Practices for Speeding Up Your Web Site：重要技能语言基础JavaScript：作用域链、闭包、运行时上下文、this原型链、继承NodeJS基础和常用APICSS：选择器浏览器兼容性及常见的hack处理CSS布局的方式和原理（盒子模型、BFC、IFC等等）CSS 3，如animation、gradient、等等HTML：语义化标签其他有些东西不是考敲码就能弄好的，我参与实习的时候感受到了很多，这些是我遇到的也是我感觉自己做的不好的地方对于业务的思考：我个人这方面非常欠缺，所以放在最前面，在敲码前要多思考业务交流和沟通能力：这个非常重要，前端同时需要与项目经理、产品、交互、后台打交道，沟通不善会导致很多无用功，延缓项目。知识管理、时间管理：input和output的平衡，output是最好的input。如何做好分享，参与社区，做好交流，作好记录。对新技术的渴望，以及敢于尝试。入门书入门可以通过啃书，但书本上的东西很多都已经过时了，在啃书的同时，也要持续关注技术的新动态。这里推几本我觉着不错的书：《JavaScript高级编程》：可以作为入门书籍，但同时也是高级书籍，可以快速吸收基础，等到提升再回来重新看《JavaScript权威指南》：不太适合入门，但是必备，不理解的地方就去查阅一下，很有帮助《编写可维护的JavaScript》和：《Node.js开发指南》：不错的Nodejs入门书籍《深入浅出Node.js》：Nodejs进阶书籍，必备《JavaScript异步编程》：理解JS异步的编程理念《JavaScript模式》和《JavaScript设计模式》：JavaScript的代码模式和设计模式，将开发思维转变到JavaScript，非常好的书《JavaScript框架设计》：在用轮子同时，应当知道轮子是怎么转起来的，讲解很详细，从源码级别讲解框架的各个部分的实现，配合一个现有框架阅读，可以学到很多东西《Dont make me think》：网页设计的理念，了解用户行为，非常不错《CSS禅意花园》：经久不衰的一部著作，同样传递了网页设计中的理念以及设计中需要注意的问题《高性能JavaScript》和《高性能HTML5》：强调性能的书，其中不只是性能优化，还有很多原理层面的东西值得学习《HTML5 Canvas核心技术》：我正在读的一本书，对于canvas的使用，动画的实现，以及动画框架的开发都非常有帮助《HTTP权威指南》：HTTP协议相关必备，前端开发调试的时候也会经常涉及到其中的知识《响应式Web设计》：技术本身不难，重要的是响应式网页的设计理念，以及移动先行的思想《JavaScript语言精粹》：老道的书，也是普及JavaScript的开发思维的一本好书，非常适合入门三、写出高效的代码比一般的代码要花更多的时间当你运行完程序并发现功能实现的时候，你感觉工作已经完成了，实则不然。实现一个新的功能除了编写新的代码以外，还包括对该功能相关的其他部分已有代码的调整与优化。当你发现你的一部分时间花在完善代码的设计上了，那么从长远角度来看你遇到的错误会更少一些。要想减少你的代码的错误并优化设计，你需要注意以下两点：（1）先准备好测试环境，然后再开发。先将测试功能配置好，然后再编写符合测试标准的代码。这样既可以减少bug的产生还能优化你的代码思路，因为你在编写代码的时候就严格遵守更加合理和规范的标准。这会使你的代码变得简洁、高效。（2）迭代完成你的工作而不是一步到位。在你的代码实现需求之前不要花时间去完善它。你永远也不可能使你的代码处于完美的状态。你优先要做的就是让你的代码完成指定的功能。通常情况开发者会犯这两个错误：要么花了太多时间思考而没有充足的时间去实现，要么没有在设计最初的方案上花足够的时间。遵循Kent Beck说得这句话:“先让它生效，再让它正确地工作，最后再让它更高效”。 三、7*24小时的工作不会让你成为佼佼者，合理的时间安排才是最重要的这个经验源于我自身的教训。我曾经为了让老板和客户满意而疯狂地工作。我害怕说“不”，不想让其他人失望。我尽我所能去完成工作，曾经大量摄入咖啡因通宵地工作，困了就直接睡在我的办公桌上。起初我是全公司的楷模。我得到老板的赏识并感觉风光无限，前途一片光明。这种并不长久的过度表现使其他人对我产生了过高的期待，很快我就撑不住了。结果我的身子垮了，经常生病，耽误了工作。公司的人变得不再信任我。后来我渐渐明白真正的佼佼者是那些一直可靠的人。他们保证的事一定会做到。要想成为那样的人就必须认真规划自己的时间。你必须牢牢把握自己时间的控制权，在约定好的期限即将到达的时候高质量地完成你的工作。要想做到这一点起初会很难，因为你需要对超出你能力范围的任务说不。刚开始，你的老板和客户可能不太会在意你。但是一旦你建立起靠谱、可信的名声后，一切就都不一样了。随着时间的推移，其他开发者都会渐渐显露疲态，变得不再那么可靠，而你则会脱颖而出，成为团队里的佼佼者。我就是这样成为了行业翘楚。我很好地协调了自己的时间并调整他人对自己的期望值，因此建立起了高质量和高实效的好名声。四、不是所有的付出都会有回报花时间也是一种投资。和其他的投资一样，你非常期待投资会有回报，希望在回本的基础上有所收益。我之前曾提到“先让它生效，再让它正确地工作，最后再让它更高效”这句话。但是不要误解，这里的“正确”不代表完美，“高效”不代表追求极致。“正确”意味着你的代码能够准确地实现功能并易于维护。“高效”意味着不影响用户体验。最关键的一点是你的应用要让用户感觉很快。因此，不要纠结于优化一个基本上不用的函数，也不要为了仅节省几毫秒而去修改一个已经比眨眼（大约300毫秒）还要快的功能。不要因为你学了一个新的技术或方法就把你之前写的功能正确、结构完整的代码推翻重写。五、按照时间表去工作可以使你更加高效起初我很难理解这一点。你不将你的精力全部投入到工作中也能做到高效？恩，这是真的。Allison Gabriel是弗吉尼亚联邦大学的管理学教授助理，主要研究工作需求和员工动机。她认为：“很多研究表明人的认知能力是有限的，当你不断地去耗费你的能力时，你并不能达到最佳的工作状态。当你被自己榨干时，你的效率会大幅下降。”永远不要在压力非常大的时候工作，尤其是你非常疲劳、情绪不好的时候。这些不安因素都会让你分心，从身心两方面对你造成不良影响，降低你的工作效率。人脑的自控能力好比是一种资源，当你进行自我控制时，这个资源会被消耗一部分。如果你的自控能力被大量消耗的话你就不能集中注意力，自然就不能高效地工作了。不论你是否乐意，你的身心都需要一个休息的时间。因此在每天的时间表里都要安排休息的时间。严格按照时间表的休息时间去休息，不多也不少，这样可以让你在充分休息的同时不感到内疚。指定明确的休息时间可以让你以更加自如的心态去工作，因为你知道你有休息的时间而不是无休止的工作下去。前端的定位前端的定位关乎到你需要吸收什么样的知识和技能，决定在技术世界里你对什么需要格外敏感。如果你认为前端仅仅停留在切页面，实现交互和视觉的要求，那你对前端的认识还停留在初级阶段。阿里终面的时候我问了考官这么个问题：前端技术日新月异，范围越扩越宽，标准越来越丰富，似乎任何一个触角都能伸出很远。怎么给前端一个合适的定位？考官给我分析了半天，然后总结成一句话，就是用户和网站的联结者，用户体验的创造者（原话不是这样，但大体是这个意思）。也就是说前端的终极目标其实就是创造用户体验，提升用户体验，以用户体验为中心。不管你是从交互设计上下手，还是从性能优化出发，或者改进工作流提升工作流效率，最终都是为了创造和提升用户体验，最终都要体现到用户体验这一点上来。我认为这个总结非常有道理（当然“用户体验”这个词太宽泛了，并且不仅仅是前端工程师的范畴，比如开发后台的时候对一个数据处理过程进行优化，提升了整体性能，这也是对用户体验的一个提升）。现在的前端工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题，比如前端自动化、图像编程、性能优化等等，再往后推一点就是PHP/JSP/ASP/nodeJs，过去后端模板一般属于后端的范畴，现在随着前端架构的演进，可能会让你去写后端模板的代码，需要用到后端语言（PHP/Java/C#等），这就是所谓大前端（然而这与前端的定位并不是相背离的，大前端处理的依然是与用户接触的部分，仍然是对用户体验的优化）。可能最常见或者被谈论最多的就是node，其实这几种技术选型都可以，bat三家据说百度用PHP比较多，阿里用node比较多。以上是我对前端以及衍生出来的技术路线的一些浅薄理解，学习一个领域掌握它的整体上的走向和趋势还是挺重要的。

本文章由javascript技术分享原创和收集