&img src=&/50/v2-7adb1f1ddfb1b02b2adb48c0_b.jpg& data-rawwidth=&1200& data-rawheight=&800& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/50/v2-7adb1f1ddfb1b02b2adb48c0_r.jpg&&&blockquote&&p&原文链接：&a href=&/?target=https%3A///the-practical-guide-to-becoming-a-professional-web-developer-2f255bc25c90& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&The Practical Guide to Becoming a Professional Web Developer&i class=&icon-external&&&/i&&/a&&/p&&p&作者：&a href=&/?target=https%3A///%40BillSourour& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Bill Sourour&i class=&icon-external&&&/i&&/a&&/p&&/blockquote&&p&&b&转载请提前沟通并注明出处！&/b&&/p&&p&这篇文章是教你如何成为一名专业Web开发工程师的养成指南。我从事Web开发的相关工作已经有20个年头了。在工作中我也很乐于帮助其他开发者。在接下来的内容里，我将告诉你想要成为一名Web开发者应该学些什么？怎么去学？在哪里学？（大多数是免费的资源）。最后我还会介绍如何获得开发的实践经验，以及最重要的一点——如何通过写代码赚到钱。&/p&&blockquote&&p&译者按：为了对初学者更加友好，我会将原文中的大多数链接替换成同类中文资源。&/p&&/blockquote&&p&在我们正式开始之前有两点需要提醒的：&/p&&p&&strong&1.你完全可以跳过文中的部分内容。&/strong&&/p&&p&不管你现在处于学习Web开发的那个阶段，这篇指南都会对你有所帮助。本篇教程的每个章节根据描述你掌握知识的进度命名。你可以直接跳到最符合你当前情况的部分开始读。不过作为一名初学者，或者只是才打算开始学习Web开发，还是从头开始阅读吧。&/p&&p&&strong&2.在你选定某个专业方向之前先把所有的都尝试一下。&/strong&&/p&&p&赚钱不是最重要的，重要的是你需要热爱你的工作。但你不去尝试永远都不会知道自己喜欢什么。&/p&&img src=&/v2-9eed48d5c3cb2bab6316900e_b.jpg& data-rawwidth=&400& data-rawheight=&283& class=&content_image& width=&400&&&p&在这篇教程中将会带你领略Web开发的各个领域，首先浅尝辄止，然后再帮你挑选你所感兴趣的方向。在一开始，你不需要精通任何技术，只需要了解一些皮毛然后就去看看别的。直到你找到了一个想要努力的方向，再进行深入的学习。&/p&&h2&我已经决定要学习编程了。我也喜欢Web开发，但就是不知道可以从哪里开始。&/h2&&img src=&/v2-9dbaa8c5fc149ee04a620e51e941cef3_b.jpg& data-rawwidth=&480& data-rawheight=&270& class=&origin_image zh-lightbox-thumb& width=&480& data-original=&/v2-9dbaa8c5fc149ee04a620e51e941cef3_r.jpg&&&p&我先得恭喜你做了一个明智的决定！下定决心的你其实已经迈出了一大步，学习Web开发非常刺激，当然有时候也会充满挫折。不过别担心，我这不就是来帮你的么？&/p&&p&你的首要任务是尽快地了解Web开发各个领域的基础知识（通常也统称“全栈”）。你需要掌握的知识会非常宽泛，但也都很基础。这些都只是为了帮助你寻找到你最喜欢的领域，同时掌握一些最基本的通用知识。这样在你决定专精某项知识之前，也能处理好各个方面的困难和挑战。&/p&&p&&strong&学习HTML基础&/strong&&/p&&p&Hypertext Markup Language 超文本标记语言(HTML)用来控制描述现在你在浏览器里看到的网页的内容和布局。从这里开始，你将会了解到如何创建可以与之交互的 &strong&用户界面&/strong&。在你掌握了更多的语言之后，现在的所学就会变得尤为重要。&/p&&p&我在下面列出了你需要掌握的有关HTML的基础知识（都是免费的在线教程，下列教程来自&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&菜鸟教程&i class=&icon-external&&&/i&&/a&）：&/p&&ul&&li&&a href=&/?target=http%3A///html/html-intro.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&简介&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///html/html-elements.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&元素&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///html/html-headings.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&标题&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///html/html-paragraphs.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&段落&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///html/html-head.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&头部&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///html/html-lists.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&列表&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///html/html-links.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&链接&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///html/html-images.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&图像&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///html/html-tables.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&表格&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///html/html-forms.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&表单&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///html/html-quicklist.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&总结&i class=&icon-external&&&/i&&/a&&/li&&/ul&&h2&我现在已经掌握了HTML基础&/h2&&p&很棒！这是重要的第一步！现在你该学点基本的JavaScript啦~&/p&&p&&strong&学习JavaScript基础&/strong&&/p&&p&JavaScript是专门针对Web的编程语言，所有的主流浏览器（Chrome, Firefox, Safari, IE等）都内置支持JavaScript语言。你之前使用过的所有网站和Web应用也都包含大量的JavaScript代码。并且现在的JavaScript语言已经扩展到了包括&a href=&/?target=https%3A//nodejs.org/en/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&服务器端&i class=&icon-external&&&/i&&/a&、&a href=&/?target=http%3A///2016/05/javascript-conquered-web-now-taking-desktop/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&桌面应用&i class=&icon-external&&&/i&&/a&、&a href=&/?target=http%3A///javascript-and-the-internet-of-things& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&物联网设备&i class=&icon-external&&&/i&&/a&在内的各类平台。&/p&&p&不过这才刚刚开始，你只需要了解一些基础知识（以下链接来自&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdb3000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&廖雪峰JavaScript教程&i class=&icon-external&&&/i&&/a&）：&/p&&ul&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdbf5ca581ab5a222b05ec000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&快速入门&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdbeec0bdf14e704a01e31a000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&数据类型和变量&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdbcdeb7fccf000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&数组&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdbc44d4b8c904ff29a78fd0& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&对象&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdbd9eaa1c000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&条件判断&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdbaeb535f5e245cf4ff416c0000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&循环&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdbfb423f819e89709feabdb4000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&函数&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdbd77bdaf1a390b75ade1000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&DOM浏览器对象&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdbf8d6ba75d5e7f930def4000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&操作DOM&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdba0e31e17e44b69dcdfc6000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JSON&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdbc35be5ec06afb4754acc6000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&AJAX&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///wiki/867bd51a89c25cc8b43bdb4f34ed5dd9e235ceb7c000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&变量作用域&i class=&icon-external&&&/i&&/a&&/li&&/ul&&h2&我已经掌握了HTML和JavaScript基础&/h2&&p&你真棒~接下来该收服CSS基础知识啦！&/p&&p&&strong&学习CSS基础&/strong&&/p&&p&CSS 的全称是层叠样式表(Cascading Style Sheets)。CSS被用来定义你在HTML中编写的元素的外观。跟着MDN上的&a href=&/?target=https%3A//developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_Started& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS入门教程&i class=&icon-external&&&/i&&/a&学习基础知识，在这里学习&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&如何用CSS对网页布局&i class=&icon-external&&&/i&&/a&。&/p&&p&&strong&转向后端&/strong&&/p&&p&HTML/JavaScript/CSS都是“Web前端开发”的相关知识。也就是说你目前掌握的语言基本都是在浏览器里运行的。是时候看看后端是什么样子的了。接下来我们将学习如何写在服务器上运行的代码。你并不需要买一台真正的服务器回来，你自己的电脑已经足够强大啦。&/p&&p&有非常多的后端的编程语言，不过既然你已经了解了JavaScript，我推荐你学习NodeJS.NodeJS是一项能够在服务器端运行JS代码的技术。&/p&&p&除此外，你还需要了解一下Express框架和MongoDB.&/p&&p&&strong&Express&/strong&&/p&&p&Express是一个基于NodeJS的Web应用开发框架，用来更方便地同网页进行请求响应交互。&/p&&p&&strong&Mongo DB&/strong&&/p&&p&Mongo DB是一个数据库。用来存储和访问数据。&/p&&p&在这里学习&a href=&/?target=http%3A///idea/nodejs/node-express-mongo.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Node.js + Express + MongoDB教程&i class=&icon-external&&&/i&&/a&。请放心，你并不需要完全精通Node或Mongo，只需要跟着教程让这个技术栈的应用跑起来就好了。&/p&&h2&我需要在前端、后端和全栈之间做抉择。&/h2&&p&在你确定你你已经理解了前后端的技术之后，就是时候做决定了。可如果你对之前所学还是一知半解，最好先返回去再了解一些相关的知识。（这就和玩游戏教学关卡通关之后选职业一个概念）&/p&&p&目前，你一共写了两种代码。一种用来和用户交互，另一种和数据交互。你更喜欢哪一种？&/p&&p&用户交互？那么你的选择是前端开发工程师！ 数据交互？那你的选择是后端开发工程师！ 都喜欢？恭喜你，你将选择成为一个全栈工程师！&/p&&p&哪个也没兴趣？也要祝贺你，通过之前的学习，你发现了其实Web开发并不适合你，你也不必在这上面浪费更多的时间和金钱了。还是不想放弃？也许你只是没找到自己喜欢的编程语言？在后面的“我想成为后端工程师”的章节里挑选你喜欢的语言吧！&/p&&h2&我想成为全栈工程师！&/h2&&p&很不错！看来你得把这篇文章完完整整地读完啦！你需要学习的包含前端和后端的所有知识。&/p&&h2&我已经掌握了JavaScript/HTML/CSS基础，我想成为一名前端开发工程师。&/h2&&p&想要成为一名合格的前端开发工程师，你需要熟练掌握HTML/CSS/客户端JavaScript.同时你也需要熟练使用一些开发框架。&/p&&p&在开始下面内容的学习之前，确保你已经掌握了HTML基础知识。&/p&&p&&strong&HTML进阶&/strong&&/p&&ul&&li&&a href=&/?target=http%3A///html/html5-intro.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5教程&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///css/advanced-html-css-lesson1-performance-organization.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML和CSS高级指南&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&&strong&JavaScript进阶&/strong&&/p&&img src=&/v2-cdd3ec3dd2c19f819ab8504cfa261d51_b.png& data-rawwidth=&800& data-rawheight=&197& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/v2-cdd3ec3dd2c19f819ab8504cfa261d51_r.png&&&br&&p&为了让你更深入地了解JavaScrpit，我要推荐一个系列书籍，由Kyle Simpson撰写的《你不知道的JS》。而且整套书都在Github上开源免费！&/p&&ul&&li&&a href=&/?target=https%3A///getify/You-Dont-Know-JS& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&You-Dont-Know-JS on Github&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A///subject//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&你不知道的JavaScript（上卷）&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A///subject//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&你不知道的JavaScript（中卷）&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&除了这套书以外，MDN的&a href=&/?target=https%3A//developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript参考文档&i class=&icon-external&&&/i&&/a&也会对你非常有用。&/p&&p&掌握了“前端三剑客”（HTML/CSS/JavaScript）固然很重要。但你想真的写出一些可以赚钱的代码，还需要熟悉一些框架。&/p&&p&&strong&学习jQuery&/strong&&/p&&p&&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jQuery&i class=&icon-external&&&/i&&/a&是史上最受欢迎的JS库。虽然一些新近的框架不再依赖jQuery，但假如你想尽快找到一份工作的话，掌握jQuery是十分有必要的。&/p&&p&我推荐你在&a href=&/?target=https%3A///challenges/learn-how-script-tags-and-document-ready-work& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&FreeCodeCamp上学习jQuery&i class=&icon-external&&&/i&&/a&。之后你可以在&a href=&/?target=https%3A///using-jquery-core/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jQuery学习官网&i class=&icon-external&&&/i&&/a&上了解更多的内容。&/p&&p&同时也不要忘了收藏&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jQueryAPI文档&i class=&icon-external&&&/i&&/a&随时查阅。&/p&&p&&strong&学习主流JS框架&/strong&&/p&&p&框架是为了帮助我们解决开发中经常会遇到的问题而开发出来的。JavaScript的框架数不胜数，我们来看看新近流行的一些JS框架，你也可以通过搜索引擎和招聘网站掌握各类框架的需求信息。&/p&&p&&strong&&a href=&/?target=http%3A//facebook.github.io/react/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React&i class=&icon-external&&&/i&&/a&&/strong&&/p&&p&React是Facebook为了配合Flux架构开发的一款JS框架。主要用来构建用户界面。最近一段时间异常的火爆，已经远远甩开了AngularJS.所以你还在等什么：&/p&&ul&&li&&a href=&/?target=http%3A///blog/2015/03/react.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React 入门实例教程&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///react/react-tutorial.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React 教程&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&&strong&Angular 1 & 2&/strong&&/p&&p&Angular JS是Google推出的JS框架。刚推出的时候也是红极一时，Angular适用于开发中大型的Web应用。不过有一点恶心人的是，Google在计划推出Angular 2版本时，感觉他们有必要完全重写。结果就导致了1和2用起来感觉完全像是两个不同的框架。假如你想成为一个Angular专家，你就相当于要同时掌握两个框架。&/p&&ul&&li&&a href=&/?target=http%3A///angularjs/angularjs-tutorial.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&AngularJS 1 教程&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A//neilq.gitbooks.io/angular-2-for-typescript-docs-zh/content/quickstart.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Angular 2 for TypeScript 中文手册&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&&strong&Vue.js&/strong&&/p&&p&Vue.js的开发者是&a href=&/people/evanyou& class=&internal&&尤雨溪&/a&。大神也在玩知乎袄。Vue.js是一个用来构筑用户界面的非常轻量的框架，使用非常方便，上手也会很快。并且真的很强大，不会有Angular那么臃肿，也不像React的JSX那么变态。所以我很推荐新手从学习Vue.js开始。&/p&&ul&&li&&a href=&/?target=http%3A//cn.vuejs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vue.js中文官网&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A//cody1991.github.io/vue//a-simple-vue-guide.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一个简单的 vue.js 实践教程&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&&strong&学习Bootstrap&/strong&&/p&&blockquote&&p&（译者）学习Bootstrap可以看我之前总结的这篇：&/p&&/blockquote&&ul&&li&&a href=&/p/& class=&internal&&有关Bootstrap你想要知道的都在这里&/a&&/li&&/ul&&p&当然Bootstrap也可以和之前所学的框架协同使用：&/p&&ul&&li&&a href=&/?target=https%3A//react-bootstrap.github.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React Bootstrap&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A//angular-ui.github.io/bootstrap/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Angular Bootstrap&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&恭喜！掌握了上述内容之后，你已经是一名合格的前端开发工程师了。&/p&&h2&我想成为一名后端开发工程师！&/h2&&p&很不错的选择！首先你需要选择后端开发语言。可供选择的特别多，各有优劣。下图是一个编程语言受欢迎程度的排行榜。被框选起来的是Web开发中经常会用到的语言。&/p&&img src=&/v2-4a1f1d409d446c40f8c13d09f0711c18_b.png& data-rawwidth=&800& data-rawheight=&566& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/v2-4a1f1d409d446c40f8c13d09f0711c18_r.png&&&br&&p&要是你完全是个新手，不要着急做决定，先了解一下这几种语言的特性和语法，最后挑选出你喜欢的。&/p&&p&要是你已经掌握了某种语言，那么就专注于它吧！&/p&&p&&strong&&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Java&i class=&icon-external&&&/i&&/a&&/strong&&/p&&p&Java是一门广受欢迎的跨平台语言。它由Oracle公司开发和维护。Java可以用来开发Android应用，桌面软件，当然也能用来开发Web应用（只用做后端，或者用JSP技术也可以开发前端）。Java语言健壮可靠，而且网上有着无数的学习Java的资源。同样也是在大学里广泛教授的面向对象编程语言。&/p&&ul&&li&&a href=&/?target=http%3A///vamei/archive//2991531.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Java快速教程&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A///java-tutorial/%3Fdtcode%3DHtG3KQq20AeT& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Java Tutorial for Complete Beginners&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&&strong&&a href=&/?target=https%3A///zh-CN/library/z1zx9t92.aspx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&C#&i class=&icon-external&&&/i&&/a&&/strong&&/p&&p&C# 是微软为了对抗Java开发的编程语言。它在微软的平台上拥有良好的支持。它同样也是面向对象的，也不限于开发Web应用、桌面软件等。要是你忠于Windows的话，C#也许是个不错的选择。&/p&&ul&&li&&a href=&/?target=http%3A///csharp/csharp-tutorial.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&C# 教程&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/question/& class=&internal&&Java 和 C# 最大的不同是什么？&/a&&/li&&/ul&&p&&strong&&a href=&/?target=https%3A//www.python.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Python&i class=&icon-external&&&/i&&/a&&/strong&&/p&&p&Python是最适合新手，最容易学习的编程语言。而且Python广受欢迎，可以被应用在各个领域。人生苦短，请用Python！&/p&&ul&&li&&a href=&/?target=http%3A///wiki/958fa6d3a2e542c000& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Python 3教程&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&&strong&JavaScript&/strong&&/p&&p&相信通过之前的学习你对JavaScript已经有所了解了。NodeJS的出现让JS在服务器端运行成为了可能。现在再深入了解一下吧！&/p&&ul&&li&&a href=&/?target=http%3A///nodejs/nodejs-tutorial.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Node入门&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A//nodeschool.io/zh-cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&NODESCHOOL&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&&strong&&a href=&/?target=https%3A//www.ruby-lang.org/zh_cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Ruby&i class=&icon-external&&&/i&&/a&&/strong&&/p&&p&Ruby是一朵奇葩。爱它的人对它痴狂，它处在编程语言排行榜的前10名，但增长却非常缓慢。Ruby本身是一种介于函数式编程和命令是编程之间的语言。我推荐你尝试一下，兴许你会变成它的狂热粉丝呢。另外，近些年来Ruby语言的工作机会也有很多。&/p&&ul&&li&&a href=&/?target=https%3A//www.ruby-lang.org/zh_cn/documentation/quickstart/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&20分钟体验 Ruby&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&&strong&&a href=&/?target=http%3A//php.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&PHP&i class=&icon-external&&&/i&&/a&&/strong&&/p&&img src=&/v2-4d74dcd20eea9b19e83b8_b.png& data-rawwidth=&708& data-rawheight=&741& class=&origin_image zh-lightbox-thumb& width=&708& data-original=&/v2-4d74dcd20eea9b19e83b8_r.png&&&p&虽然近一段时间PHP看起来有点过气了。但是请不要忘记，PHP是全世界最好的语言。而且单就Web开发这一块来讲，全世界的网站有多一半是用PHP开发的。PHP7的推出极大地改善了其运行效率，Laravel框架也让编写PHP代码变得无比优雅。PHP不是原作者的菜，但译者最早学习的编程语言就是PHP，在这里也不想挑起语言之争，总之PHP值得你尝试着学习一下。&/p&&ul&&li&&a href=&/?target=http%3A//.cn/php/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&PHP 教程&i class=&icon-external&&&/i&&/a&&/li&&/ul&&h2&我已经学了很多Web开发的知识，但是缺乏实践经验。&/h2&&p&没有任何经验的话是很难找到工作的。&/p&&p&第一步是试着完成一两个个人项目，来熟悉掌握开发流程。&/p&&p&在你的项目开发完毕后，试着在Github这类平台上发布会对你很有帮助。&/p&&p&&strong&Github&/strong&&/p&&p&&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Github&i class=&icon-external&&&/i&&/a&基于版本控制软件Git建立，是全球最大的开源项目托管网站。你可以在上面储存、管理、发布你的代码。Github是你作为一名开发者必须使用的网站。&/p&&ul&&li&&a href=&/?target=http%3A///kancloud/how-to-use-github/42191& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GotGitHub&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&&strong&开发个人项目&/strong&&/p&&p&下面推荐一些你可以尝试的个人开发项目：&/p&&ul&&li&&a href=&/?target=http%3A//idlelife.org/archives/977& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///shiyanlou/p/4238776.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Laravel完成一个多用户的博客系统&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&FreeCodeCamp&i class=&icon-external&&&/i&&/a&上面同样有着各种各样的实践项目，在这里推荐两个：&/p&&ul&&li&&a href=&/?target=https%3A///challenges/build-a-pomodoro-clock& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&创建一个番茄钟计时器&i class=&icon-external&&&/i&&/a& （纯前端）&/li&&li&&a href=&/?target=https%3A///challenges/manage-a-book-trading-club& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&开发一个书籍分享网站&i class=&icon-external&&&/i&&/a& （全栈）&/li&&/ul&&p&&strong&实践经验&/strong&&/p&&p&接下来你需要一些真实的经验。这意味着你需要与他人协作，参与到真实的项目中来。个人项目自然有其用处，但在找工作时还不够有说服力。&/p&&p&&strong&1.为开源项目做贡献&/strong&&/p&&p&Github上面有着成千上万的开源项目，这些项目中有着许多公开的bug等着你去提供修复。在你的简历中加上你为一些知名项目贡献代码的事迹，将会是你浓墨重彩的一笔。你可以通过&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Code Triage&i class=&icon-external&&&/i&&/a&来关注你感兴趣的项目进展。&/p&&p&&strong&2.为你的家人或朋友“打工”&/strong&&/p&&p&专门为你做生意的朋友或家人开发一款Web应用或者一个网站吧。为他们解决实际的问题，给他们提供帮助。不过在选人之前最好慎重考虑，最好这个人的需求可以在90天左右的时间开发完毕，而且你们俩的关系也最好是比较亲近的。不要因为开发中途的一些矛盾搞得你们最后连朋友都没得做。&/p&&p&&strong&3.为非盈利组织工作&/strong&&/p&&p&这将会是一个非常棒的选择！为非盈利机构开发Web应用，解决他们的实际问题。你可以在&a href=&/?target=https%3A//www.catchafire.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Catch a Fire&i class=&icon-external&&&/i&&/a&上找到这样的项目。另外，如果你通过了&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&FreeCodeCamp&i class=&icon-external&&&/i&&/a&的所有挑战，你也能够获得为非盈利机构开发Web项目的机会。&/p&&p&&strong&4.出卖劳动力&/strong&&/p&&p&你可以在网上找一些外包项目来做，为了避免广告之嫌，译者在这里就不推荐国内的网站了，反正一搜一大把。&/p&&h2&我现在已经积累了一些实践经验了，怎么才能找到工作呢？&/h2&&p&&strong&写一份儿牛X闪闪的简历&/strong&&/p&&ul&&li&&a href=&/question/& class=&internal&&一份优秀的前端开发工程师简历是怎么样的？&/a&&/li&&li&&a href=&/question/& class=&internal&&程序员简历应该怎么写？&/a&&/li&&/ul&&p&&strong&开发一个在线简历网站&/strong&&/p&&p&开发一个介绍你自己的个人站点！你可以把你之前做过的所有项目都链接到上面。说明各个项目都解决了什么样的实际问题。这会对你很有帮助！&/p&&p&&strong&准备好编程面试&/strong&&/p&&ul&&li&&a href=&/?target=https%3A///hawx1993/Front-end-Interview-questions& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端面试题收集&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A///taizilongxu/interview_python& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Python的面试题&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A///jwasham/google-interview-university/blob/master/README-cn.md& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一套完整的学习手册帮助自己准备 Google 的面试&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&&strong&掌握通用的面试技巧&/strong&&/p&&ul&&li&&a href=&/?target=http%3A///topic/37628.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&面试70问 经典回答&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/question/& class=&internal&&程序员面试要准备哪些方面的内容？&/a&&/li&&li&&a href=&/question/& class=&internal&&修改面试前你都做了什么准备？&/a&&/li&&/ul&&p&&strong&出发去找工作吧！&/strong&&/p&&p&不要妄图一瞬间就找到你心仪的公司和喜爱的岗位。先找到一份可以写代码养活自己的工作再说。等到你积累了更多的经验，自然也就能迈出下一步了。&/p&&h2&我想要成为一名自由职业者！&/h2&&p&自己当自己的老板听起来是非常爽的。但事实上自由职业并不像想象的那么轻松。在这里推荐&a href=&/?target=https%3A///%40brennandunn& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Brennan Dunn&i class=&icon-external&&&/i&&/a&写了许多有关自由职业者的文章：&/p&&p&&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&&i class=&icon-external&&&/i&&/a&&/p&&p&在外国的网站上注册成为自由职业者对大多数人来说有些不切实际，国内这一块发展也比较混乱，为了避免广告之嫌，译者也就不推荐链接了。&/p&&h2&我朝着成为一名Web开发者的方向努力了，但我现在感觉力不从心。&/h2&&p&我很理解你的心情。这本来就不是一件容易的事情，而且任何口口声声说着学Web开发很容易的人自己其实都不怎么样，要么就是想要骗你钱。假如你现在有些不知所措，那么重新思考一下这些问题：&/p&&p&&strong&不忘初心&/strong&&/p&&p&问问你自己，你甚至可以写下来！你当初为什么要决定走上这条路？你的想法仍然没有改变么？那么为什么要停下来呢！？继续迎难而上吧！&/p&&p&&strong&脚踏实地&/strong&&/p&&p&现在你已经考虑了很多，脑子里想到了最坏的结果，也期冀最好的愿景，还有现实中最可能发生的情况。你完全可以把这些想法都记录下来。没有必要畏惧，面对现实，脚踏实地地一步步走下去。&/p&&br&&p&欢迎在评论区分享你的心得体会。&/p&&p&欢迎关注我的专栏 &a href=&/icode& class=&internal&&&span class=&invisible&&https://&/span&&span class=&visible&&/icod&/span&&span class=&invisible&&e&/span&&span class=&ellipsis&&&/span&&/a&&/p&
原文链接：作者：转载请提前沟通并注明出处！这篇文章是教你如何成为一名专业Web开发工程师的养成指南。我从事Web开发的相关工作已经有20个年头了。在工作中我也很乐于帮助其他开…
作者：汪汪&br&链接：&a href=&/p/& class=&internal&&知乎专栏&/a&&br&来源：知乎&br&著作权归作者所有，转载请联系作者获得授权。&br&&br&&p&这篇文章是对我大四秋招以来面试的总结，里面包含前端面试知识的方方面面，目前本人已经拿到腾讯offer，希望能对后面找工作的学习学妹们有所帮助。&/p&&p&腾讯面试对基础比较看重，然后需要你有两三个比较好的项目，一面重视面试者对前端基础的把握，还要手写代码，不过不难，二面部门的leader面，这一面比较难，面试官会对你的项目细节进行深挖，所以说项目要牛逼一点，最后还会有一道逻辑题（我没有答上来），三面是HR面，如果你想进大公司的话，下面这些技术是肯定要掌握的：html5，css3，JavaScript，略懂一点jQuery源码，Node.js，express，mongoose，数据库mongodb。大公司问的核心在于JavaScript。如果下面的知识点你都可以打上来，恭喜你拿下bat不是问题--写&/p&&p&转载请注明出处，码这么多字不容易。&/p&&br&&p&一、html+css部分、&/p&&p&（1）css盒模型，可能会要求手写一个布局，这个布局基本上用到的css是margin的负值，boxing-sizing：border-box，布局尽量往这方面想。浏览器布局的基本元素是盒，在w3c的标准模式下，width=width，但是在怪异模式下，width=border*2+padding*2+其中后代元素的width：100%；参照的是右边的那个width，&/p&&p&（2）html5的新特性&/p&&p&1、标签语义化，比如header，footer，nav，aside，article，section等，新增了很多表单元素，入email，url等，除去了center等样式标签，还有除去了有性能问题的frame，frameset等标签&/p&&p&2、音视频元素，video，audio的增加使得我们不需要在依赖外部的插件就可以往网页中加入音视频元素。&/p&&p&3、新增很多api，比如获取用户地理位置的window.navigator.geoloaction，&/p&&p&4、websocket&/p&&p&websocket是一种协议，可以让我们建立客户端到服务器端的全双工通信，这就意味着服务器端可以主动推送数据到客户端，&/p&&p&5、webstorage，webstorage是本地存储，存储在客户端，包括localeStorage和sessionStorage，localeStorage是持久化存储在客户端，只要用户不主动删除，就不会消失，sessionStorage也是存储在客户端，但是他的存在时间是一个回话，一旦浏览器的关于该回话的页面关闭了，sessionStorage就消失了，&/p&&p&6、缓存&/p&&p&html5允许我们自己控制哪些文件需要缓存，哪些不需要，具体的做法如下：&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&1、首先给html添加manifest属性，并赋值为cache.manifest
2、cache.manifest的内容为:
CACHE MANIFEST
//表示需要缓存的文件
//表示只在用户在线的时候才需要的文件，不会缓存
/index.html
//表示如果找不到第一个资源就用第二个资源代替
&/code&&/pre&&/div&&p&7、web worker，web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了。&/p&&p&（3）对html5的语义话的理解&/p&&p&html5的语义化指的是用正确的标签包含正确的内容，比如nav标签，里面就应该包含导航条的内容，而不是用做其他的用途，标签语义化的好处就是结构良好，便于阅读，方便威化，也有利于爬虫的查找，提高搜索率。&/p&&br&&p&（4）cookie，sessionStorage，localeStorage的区别&/p&&p&cookie是存储在浏览器端，并且随浏览器的请求一起发送到服务器端的，它有一定的过期时间，到了过期时间自动会消失。sessionStorage和localeStorage也是存储在客户端的，同属于web Storage，比cookie的存储大小要大有8m，cookie只有4kb，localeStorage是持久化的存储在客户端，如果用户不手动清除的话，不会自动消失，会一直存在，sessionStorage也是存储在客户端，但是它的存活时间是在一个回话期间，只要浏览器的回话关闭了就会自动消失。&/p&&p&（5）多个页面之间如何进行通信&/p&&p&使用cookie，使用web worker，使用localeStorage和sessionStorage&/p&&p&（6）浏览器的渲染过程&/p&&p&1、首先获取html，然后构建dom树&/p&&p&2、其次根据css构建render树，render树中不包含定位和几何信息&/p&&p&3、最后构建布局数，布局是含有元素的定位和几何信息&/p&&p&（7）重构、回流&/p&&p&浏览器的重构指的是改变每个元素外观时所触发的浏览器行为，比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局，不一定伴随着回流，&/p&&p&回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的，回流可以理解为渲染树需要重新进行计算，一般最好触发元素的重构，避免元素的回流；比如通过通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了，比如设置position：absolute或者fixed，或者display：none，等操作结束后在显示。&/p&&p&二、JavaScript部分&/p&&p&（1）JavaScript的数据类型&/p&&p&基本数据类型：Number，String，Boolean，Undefined，Null&/p&&p&复杂数据类型：Object，Array，Function，RegExp，Date，Error&/p&&p&全局数据类型：Math&/p&&p&（2）JavaScript的闭包&/p&&p&闭包简单的说就是一个函数能访问外部函数的变量，这就是闭包，比如说：&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&function a(x){
var tem=3;
function b(y){
console.log(x+y+(++tem));
&/code&&/pre&&/div&&p&a函数中的b函数就是闭包了，b函数可以使用a函数的局部变量，参数，最典型的闭包应该是下面这样，将定义在函数中的函数作为返回值&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&function a(x){
var tem=3;
function b(y){
console.log(x+y+(++tem));
&/code&&/pre&&/div&&p&闭包的另一种作用是隔离作用域，请看下面这段代码&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&for(var i=0;i&2;i++){
setTimeout(function(){
console.log(i);
&/code&&/pre&&/div&&p&上面这段代码的执行结果是2,2而不是0,1，因为等for循环出来后，执行setTimeout中的函数时，i的值已经变成了2，这就是没有隔离作用域所造成的，请看下面代码&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&for(var i=0;i&2;i++){
(function(i){
setTimeout(function(){
console.log(i);
&/code&&/pre&&/div&&p&这样就会输出0,1，我们的立即执行函数创建了一个作用域，隔离了外界的作用域，闭包的缺点是，因为内部闭包函数可以访问外部函数的变量，所以外部函数的变量不能被释放，如果闭包嵌套过多，会导致内存占用大，要合理使用闭包。&/p&&p&（3）new 操作符到底做了什么&/p&&p&
首先，new操作符为我们创建一个新的空对象，然后this变量指向该对象，&/p&&br&&p&
其次，空对象的原型执行函数的原型，&/p&&p&
最后，改变构造函数内部的this的指向&/p&&p&代码如下：&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&var obj={};
obj.__proto__=fn.
fn.call(obj);
&/code&&/pre&&/div&&p&（4）改变函数内部this指针的指向函数&/p&&p&call和apply，假设要改变fn函数内部的this的指向，指向obj，那么可以fn.call(obj);或者fn.apply(obj);那么问题来了，call和apply的区别是什么，其是call和apply的区别在于参数，他们两个的第一个参数都是一样的，表示调用该函数的对象，apply的第二个参数是数组，是[arg1,arg2,arg3]这种形式，而call是arg1,arg2,arg3这样的形式。还有一个bind函数，&/p&&p&var bar=fn.bind(obj);那么fn中的this就指向obj对象了，bind函数返回新的函数，这个函数内的this指针指向obj对象。&/p&&p&（5）JavaScript的作用域和作用域链&/p&&p&JavaScript的作用域指的是变量的作用范围，内部作用域由函数的形参，实参，局部变量，函数构成，内部作用域和外部的作用域一层层的链接起来形成作用域链，当在在函数内部要访问一个变量的时候，首先查找自己的内部作用域有没有这个变量，如果没有就到这个对象的原型对象中去查找，还是没有的话，就到该作用域所在的作用域中找，直到到window所在的作用域，每个函数在声明的时候就默认有一个外部作用域的存在了，比如：&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&var t=4;
function foo(){
var tem=12;
funciton bar(){
var temo=34;
console.log(t+& &+tem+& &+temo);
&/code&&/pre&&/div&&p&bar找t变量的过程就是，先到自己的内部作用域中找，发现没有找到，然后到bar所在的最近的外部变量中找，也就是foo的内部作用域，还是没有找到，再到window的作用域中找，结果找到了&/p&&p&（6）JavaScript的继承&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&function A(name){
this.name= }
A.prototype.sayName=function(){ console.log(this.name); }
function B(age){ this.age= }
&/code&&/pre&&/div&&p&&b&原型继承&/b&&br&&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&B.prototype=new A(&mbj&);
//被B的实例共享
var foo=new B(18);
//18,age是本身携带的属性
//mbj，等价于foo.__proto__.name
foo.sayName(); //mbj,等价于foo.__proto__.proto__.sayName()
foo.toString();
//&[object Object]&,等价于foo.__proto__.__proto__.__proto__.toString();
&/code&&/pre&&/div&&p&这样B通过原型继承了A，在new B的时候，foo中有个隐藏的属性__proto__指向构造函数的prototype对象，在这里是A对象实例，A对象里面也有一个隐藏的属性__proto__,指向A构造函数的prototype对象，这个对象里面又有一个__proto__指向Object的prototype&br&&/p&&p&这种方式的缺第一个缺点是所有子类共享父类实例，如果某一个子类修改了父类，其他的子类在继承的时候，会造成意想不到的后果。第二个缺点是在构造子类实例的时候，不能给父类传递参数。&/p&&b&构造函数继承&/b&&br&&div class=&highlight&&&pre&&code class=&language-text&&function B(age,name){
this.age=A.call(this,name); }
var foo=new B(18,&wmy&);
foo.sayName();
//undefined
&/code&&/pre&&/div&&p&采用这种方式继承是把A中的属性加到this上面，这样name相当于就是B的属性，sayName不在A的构造函数中，所以访问不到sayName。这种方法的缺点是父类的prototype中的函数不能复用。&/p&&p&&b&原型继承+构造函数继承&/b&&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&function B(age,name){
this.age=A.call(this,name); }
B.prototype=new A(&mbj&);
var foo=new B(18,&wmy&);
foo.sayName();
&/code&&/pre&&/div&&p&这样就可以成功访问sayName函数了，结合了上述两种方式的优点，但是这种方式也有缺点，那就是占用的空间更大了。&/p&&p&（7）JavaScript变量提升&/p&&p&请看下面代码&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&var bar=1;
function test(){
console.log(bar);
//undeifned
var bar=2;
console.log(bar);
&/code&&/pre&&/div&&p&为什么在test函数中会出现上述结果呢，这就是JavaScript的变量提升了，虽然变量bar的定义在后面，不过浏览器在解析的时候，会把变量的定义放到最前面，上面的test函数相当于&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&function test(){
console.log(bar);
//undefined
console.log(bar);
&/code&&/pre&&/div&&p&再看&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&var foo=function(){
console.log(1); }
function foo(){
console.log(2); }
同样的，函数的定义也会到提升到最前面，上面的代码相当于
function foo(){
console.log(2); }
foo=funciton(){ console.log(1); }
&/code&&/pre&&/div&&p&（8）JavaScript事件模型&/p&&p&原始事件模型，捕获型事件模型，冒泡事件模型，&/p&&p&原始事件模型就是ele.onclick=function(){}这种类型的事件模型&/p&&p&冒泡事件模型是指事件从事件的发生地（目标元素），一直向上传递，直到document，&/p&&p&捕获型则恰好相反，事件是从document向下传递，直到事件的发生地（目标元素）&/p&&p&IE是只支持冒泡事件模型的，下面是兼容各个浏览器的事件监听代码&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&EventUtil={
addListener:function(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler);
}else if(target.attachEvent){
target.attach(&on&+type,function(){
handler.call(target);
//让handler中的this指向目标元素
target[&on&+type]=
removeListener:function(target,type,handler){
if(target.removeEventListener){
target.removeEventListener(type,handler);
}else if(target.detachEvent){
target.detachEvent(&on&+type,handler);
target[&on&+type]=
getEvent:function(e){
//获取事件对象
var evt=window.event||e;
getTarget:function(e){
//获得目标对象
var evt=EventUtil.getEvent(e);
if(evt.target){ target=evt.}
else {target=evt.srcE}
stopPropagation:function(e){
//停止冒泡
var evt=EventUtil.getEvent(e);
if(evt.stopPropagation) {evt.stopPropagation();}
else {evt.cancelBubble=}
preventDefault:function(e){
//阻值默认行为的发生
var evt=EventUtil.getEvent(e);
if(evt.preventDefault){ evt.preventDefault(); }
else {e.returnValue=}
&/code&&/pre&&/div&&p&（9）内存泄漏&/p&&p&内存泄漏指的是浏览器不能正常的回收内存的现象&/p&&p&（10）浏览器的垃圾回收机制&/p&&br&&p&垃圾收集器必须跟踪哪个变量有用哪个变量没用，对于不再有用的变量打上标记，以备将来收回其占用的内存，内存泄露和浏览器实现的垃圾回收机制息息相关， 而浏览器实现标识无用变量的策略主要有下两个方法：&/p&&p&&b&第一，引用计数法&/b&&/p&&p&跟踪记录每个值被引用的次数。当声明一个变量并将引用类型的值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次 数加1.相反，如果包含对这个值引用的变量又取得另外一个值，则这个值的引用次数减1.当这个值的引用次数变成0时，则说明没有办法访问这个值了，因此就 可以将其占用的内存空间回收回来。&br&&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&如： var a = {};
//对象{}的引用计数为1
//对象{}的引用计数为 1+1
//对象{}的引用计数为2-1
&/code&&/pre&&/div&&p&所以这时对象{}不会被回收;&/p&&p&IE 6, 7 对DOM对象进行引用计数回收， 这样简单的垃圾回收机制，非常容易出现循环引用问题导致内存不能被回收， 进行导致内存泄露等问题，一般不用引用计数法。&/p&&p&&b&第二，标记清除法&/b&&/p&&p&到2008年为止，IE,Firefox,Opera,Chrome和Safari的javascript实现使用的都是标记清除式的垃圾收集策略（或类似的策略），只不过垃圾收集的时间间隔互有不同。&/p&&p&标记清除的算法分为两个阶段，标记(mark)和清除(sweep). 第一阶段从引用根节点开始标记所有被引用的对象，第二阶段遍历整个堆，把未标记的对象清除。&/p&&p&（11）同源策略&/p&&p&同源策略是浏览器有一个很重要的概念。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。简单的来说，浏览器允许包含在页面A的脚本访问第二个页面B的数据资源，这一切是建立在A和B页面是同源的基础上。&/p&&br&&p&（12）跨域的几种方式&/p&&p&jsonp（利用script标签的跨域能力）跨域、websocket（html5的新特性，是一种新协议）跨域、设置代理服务器（由服务器替我们向不同源的服务器请求数据）、CORS（跨源资源共享，cross origin resource sharing）、iframe跨域、postMessage(包含iframe的页面向iframe传递消息)&/p&&p&（13）异步和同步&/p&&p&同步指下一个程序的执行需要等到上一个程序执行完毕，也就是得出结果后下一个才能执行，&/p&&p&异步指的是上一个程序指向后，下一个程序不用等到上一个程序出结果就能执行，等上一个出结果了调用回调函数处理结果就好。&/p&&p&（14）JavaScript的值类型和引用类型&/p&&p&JavaScript有两种类型的数据，值类型和引用类型，一般的数字，字符串，布尔值都是值类型，存放在栈中，而对象，函数，数组等是引用类型，存放在堆中，对引用类型的复制其实是引用复制，相当于复制着地址，对象并没有真正的复制。&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&var a=5;var b=a;a=
//那么b是5
var a={},var b=a;b.name=&mbj&;
console.log(a.name);
//mbj，因为a，b指向同一个对象
a=console.log(typeof b);
//object，a=null，只是a不再指向该对象，但是这个对象还是在堆中确确实实的存在，b依然指向它。
&/code&&/pre&&/div&&p&（15）优化下面代码&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&var str=&我喜欢我可爱的女朋友，&；
str=str+&她叫喵喵，&;
str=str+&她时而可爱，时而认真，&;
str=str+&她那天真的笑声可以让人忘掉一切烦恼。&;
console.log(str);
&/code&&/pre&&/div&&p&这里的优化主要是对加号操作符的优化，因为加号在JavaScript中非常耗时和耗内存，需要经过以下六步：&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&1、首先开辟一块临时空间，存储字符串，
2、然后在开辟一块空间
3、把str中的字符串复制到刚刚开辟的空间
4、在把需要连接的字符串复制到str后面
5、str指向这块空间
6、回收str原来的空间和临时空间
&/code&&/pre&&/div&&p&优化的方法是使用数组的push方法，数组是连续的存储空间，可以省下很多步&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&var res=[];
var str=&我喜欢我可爱的女朋友，&；
res.push(str);
res.push(&她叫喵喵，&);
res.push(&她时而可爱，时而认真，&);
res.push(&她那天真的笑声可以让人忘掉一切烦恼。&);
console.log(res.join(&&));
&/code&&/pre&&/div&&p&（16）封装cookie的添加，删除，查询方法&/p&&p&cookie是存储在浏览器端的，可以用于存储sessionID，也可以用于自动登陆，记住密码等，但是在浏览器端并没有官方的操作cookie的方法，下面我们来封装一下：&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&CookieUtil=｛
addCookie:function(key,value,options){
var str=key+&=&+escape(value);
if(options.expires){
var curr=new Date();
//options.expires的单位是小时
curr.setTime(curr.getTime()+options.expires*);
options.expires=curr.toGMTString();
for(var k in options){
//有可能指定了cookie的path，cookie的domain
str+=&;&+k+&=&+options[k];
document.cookie=
queryCookie:function(key){
var cookies=document.
//获得浏览器端存储的cookie,格式是key=key=key=value
cookies+=&;&;
var start=cookies.indexOf(key);
if(start&=-1){ }
//说明不存在该cookie
var end=cookies.indexOf(&;&,start);
var value=cookies.slice(start+key.length+1,end);
return unescape(value);
deleteCookie:function(key){
var value=CookieUtil.queryCookie(key);
if(value===null){}
CookieUtil.addCookie(key,value,{expires:0});//把过期时间设置为0，浏览器会马上自动帮我们删除cookie
&/code&&/pre&&/div&&p&（17）事件委托机制&/p&&p&事件委托指的是，不再事件的发生地设立监听函数，而是在事件发生地的父元素或者祖先元素设置监听器函数，这样可以大大提高性能，因为可以减少绑定事件的元素，比如：&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&&ul&
&/code&&/pre&&/div&&p&要给li元素绑定click事件，使用事件委托机制的话，就只需要给ul绑定click事件就行了，这样就不需要给每个li'绑定click事件，减小内存占用，提高效率，有兴趣的童鞋可以去看看jQuery的live，bind，on，delegate函数的区别，这几个函数就采用了事件委托机制。&/p&&p&三、其他部分&/p&&p&（1）http状态码&/p&&p&http状态码是表示服务器对请求的响应状态，主要分为以下几个部分&/p&&p&1**：这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束&/p&&p&2**：表示请求成功，&/p&&p&3**：表示重定向&/p&&p&4**：表示客户端错误&/p&&p&5**：表示服务器端错误&/p&&p&100（continue），客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收&/p&&p&200（OK），表示请求成功，请求所希望的响应头或数据体将随此响应返回。&/p&&p&202（Accepted），服务器已接受请求，但尚未处理。&/p&&p&204（No-Content），服务器成功处理了请求，但不需要返回任何实体内容&/p&&p&205（Reset-Content），服务器成功处理了请求，且没有返回任何内容。但是与204响应不同，返回此状态码的响应要求请求者重置文档视图。该响应主要是被用于接受用户输入后，立即重置表单，以便用户能够轻松地开始另一次输入。&/p&&p&206（Partial-Content），服务器已经成功处理了部分 GET 请求。&/p&&p&301（Moved-Permanently），永久性重定向&/p&&p&302（Moved-Temporarily），暂时性重定向&/p&&p&304（Not-Modified），浏览器端缓存的资源依然有效&/p&&p&400（Bad-Reques），请求有误，当前请求无法被服务器理解。&/p&&p&401（Unauthorized），当前请求需要用户验证。&/p&&p&403（Forbidden），服务器已经理解请求，但是拒绝执行它。&/p&&p&404（Not-Found），请求的资源没有被找到&/p&&p&500（Interval Server Error），服务器内部错误&/p&&p&502（Bad GateWay），网关出错&/p&&p&503（Service Unavailable），由于临时的服务器维护或者过载，服务器当前无法处理请求。&/p&&p&504（Gateway Timeout），作为网关或者代理工作的服务器尝试执行请求时，未能及时从上游服务器（URI标识出的服务器，例如HTTP、FTP、LDAP）或者辅助服务器（例如DNS）收到响应。&/p&&p&（2）xss，csrf的概念以及防范方法&/p&&p&大公司如bat在面试的时候，web安全问题是必问的问题，所以一定要懂，要彻底理解xss和csrf的概念和防范方式，最好在项目中有用到对这两种攻击的防范，这样会给你的面试加很多分。由xss和csrf涉及的东西比较多，我就不具体给出了，详情请看&a href=&///?target=http%3A//blog.csdn.net/ghsau/article/details/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&XSS攻击及防御&i class=&icon-external&&&/i&&/a&，&a href=&///?target=http%3A///hyddd/archive//1432744.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSRF攻击&i class=&icon-external&&&/i&&/a&&/p&&p&（3）CommonJs，AMD，CMD规范&/p&&p&对于前端模块化来说，这三个规范是必须要了解的，详情请看我的这篇文章&a href=&/p/& class=&internal&&CommonJS，AMD，CMD&/a&&/p&&p&（4）谈谈对前端模块化的理解&/p&&p&前端模块话就是把复杂的文件分成一个个独立的模块，比如js文件，分成独立的模块之后有利于代码的重用和维护，但是这样又会引来模块与模块之间的依赖问题，所以就有了CommonJS、AMD、CMD规范，最后出现了webpack，webpack就是前端模块话的一种解决方案，基本上大公司都会使用webpack，想要详细的学习webpack的话请看&a href=&/p/& class=&internal&&webpack简明使用教程&/a&&/p&&p&（5）优雅降级和渐进增强&/p&&p&优雅降级指的是一开始就构建功能完好的网站，然后在慢慢兼容低版本的浏览器，使得各个浏览器之间的差异不要太大。&/p&&p&渐进增强是指在基本功能得到满足的情况下，对支持新特性的浏览器使用新特性，带给用户更换的体验。&/p&&p&优雅降级和渐进增强的出发点不同，前者是慢慢向下兼容，是向后看，后着是慢慢向上，增强功能，是向前看。&/p&&p&（6）前端优化（提高网页的加载速度）&/p&&p&
1、使用css sprites，可以有效的减少http请求数&/p&&p&
2、使用缓存&/p&&p&
3、压缩js，css文件，减小文件体积&/p&&p&
4、使用cdn，减小服务器负担&/p&&p&
5、懒加载图片&/p&&p&
6、预加载css，js文件&/p&&p&
7、避免dom结构的深层次嵌套&/p&&p&
8、给DOM元素添加样式时，把样式放到类中，直接给元素添加类，减少重构，回流&/p&&p&更多详细的前端优化请看&a href=&///?target=http%3A///articles/J3uyaa& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端优化：雅虎35条&i class=&icon-external&&&/i&&/a&或者&a href=&///?target=http%3A///lei2007/archive//3262897.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端性能优化----yahoo前端性能团队总结的35条黄金定律&i class=&icon-external&&&/i&&/a&&/p&&br&&p&四、前端学习文章推荐&/p&&p&知乎上面有人推荐了很多前端学习网站，具体信息请看&/p&&p&&a href=&/question//answer/& class=&internal&&关于 Javascript 学习，有哪些好的博客或者网站推荐？&/a&&/p&
作者：汪汪 链接： 来源：知乎 著作权归作者所有，转载请联系作者获得授权。 这篇文章是对我大四秋招以来面试的总结，里面包含前端面试知识的方方面面，目前本人已经拿到腾讯offer，希望能对后面找工作的学习学妹们有所帮助。腾讯面试对基础比较看…
已有帐号？
无法登录？
社交帐号登录
5091 人关注
211 条内容
8870 人关注
671 条内容
681 人关注
156 条内容
6279 人关注
453 条内容