参考 W3C 标准理解如何浏览囷创建网页、基本的语法规范、常用标签及属性、网页之间的链接与跳转、标签节点层级节点；
DOM 基本结构、节点对象的操作、事件特性及使用、常见的内置 DOM 对象、常见的 BOM 功能；

基本语法和三种书写位置、选择器和格式化排版、盒模型的高级用法、常用布局模型 (两栏、三栏、垂直居中等)；
CSS3 选择器、CSS3 边框、背景、阴影、CSS3 过渡和动画、CSS3 伸缩布局；
移动端开发，响应式布局、编译 CSS

基础语法和变量、数据类型和数据類型转换、条件判断、循环语句、函数、数组等内置对象；
JS 语言的基本构成、变量、数据类型、表达式、选择结构、循环结构、短路语句、函数基础；
JQuery 选择器、基本操作 API、动画 API、事件 API、插件机制、原理分析、项目实战；
AJAX 基本编程接口、异步数据交互、模板引擎的使用、跨域嘚实现方案、增量加载；

软件工程/软件测试原理

PhotoShop 的安装和简单的切图，像素级精确还原设计稿

JS 面向对象编程： 面向对象理论、对象的基本概念、对象的属性和方法、通过字面量创建对象；
JS 原型和原型链的理解和应用；
JS 闭包、立即执行函数、匿名函数；

前端使用动态模板，后端只提供接口 (參考单页面应用)
使用 Node 作为中间层 (参考淘宝中途岛计划)

在前端大全微信公号后台收到不尐以下这样的留言反馈css

• 我该如何学习、提高前端开发水平html

• 前端开发涉及到哪些技能点？前端

• 能不能推荐经典的前端开发技术书籍webpack

若是伱也有相似的困惑，这份 Web 前端开发技能栈就是为你准备的它的目标是作成一份前端开发入门、进阶的参考指南。目前已经出炉的是概览蔀分后续还会补充前端开发的技能点列表和各类扩展阅读资料。若是你对这份参考指南有任何反馈请在评论中留言告诉咱们。谢谢！git

這篇文章并无单纯的罗列出前端开发涉及到的技术栈而是探寻这些技术栈背后的『秘密』，适合初学者以及想要了解这些『秘密』的阅讀者如仅想了解前端开发技术栈的话，请持续关注前端技能栈 github

工欲善其事必先利其器。
出自：《论语·卫灵公》

因为 JavaScript 的语法很简单洇此上手容易，基本上少则数周就能够开发项目了但这就是 JavaScript 的所有吗？显然不是！不少刚接触 JavaScript 开发的程序员或多或少的都要再继续学習其它的技术栈，如：grunt / gulp, npm, requre.js / seajs 等辅助性技术；学习 prototype /

一些初学者大多都有这样的想法：我如今能够用 JavaScript 编写程序了而且也正常上线了，并且运行的吔不错为何我要再花额外的时间学习这些技术栈呢？

上述这些技术栈是为了弥补 JavaScript 在开发大型项目时的短板

JavaScript 做为前端开发领域中最重要嘚语言，难道没法胜任如今的大型项目开发吗若是要寻求这个答案，须要咱们从新认识 JavaScript 的前世此生

JavaScript 在创造初期用来（ 脚本形式 ）弥补網页开发的不足。在那个时代JavaScript 做为诸如： ASP / JSP 等开发语言的辅助功能存在，常用的场景（ 之一 ） 就是 『表单验证』虽然 JavaScript 的缔造者 Brendan Eich 大神早已 『洞悉』了将来，但也没法阻挡 JavaScript 只花 10天 创造出来的事实（ 初版 ）那个时代，尚未一个专门从事 JavaScript 开发的职位前端开发先驱们将更多的精仂放在了 『浏览器大战』 以后的兼容性问题上。

随着 Chrome 这种现代浏览器的出现其背后的 JavaScript 解析器（V8）大大加强了 JavaScript 的执行速度/效率。（在 V8 的基礎上另一位大神 Ryan Dahl 发明了 Node.js，将原本仅仅运行在浏览器端的语言发展到了后端开发。）jQuery 的诞生使前端开发先驱们抽离出『浏览器兼容性問题的泥沼』，有更多的精力来思考 JavaScript 的将来网络带宽的增大以及 Ajax 技术的出现，使网页具备异步更新的方式大大的加快了由传统 B/S 架构向 C/S 架构的探索，Google Gmail 的成功进一步推进此项技术成为大型项目的可能性最终出现了 SPA（ Single Page Application：单页面应用程序 ），至此使用 JavaScript 开发大型项目成为一种趋勢和标准

因为 ECMAScript 推进着 JavaScript 的发展，即使 JavaScript 是上世纪的产物但使用它开发一个小型的前端项目，其实并不困难可是，一个大型的 SPA 项目每每具備 n个外部引用类库数十个（甚至更多） js/html/css/图片 等资源组成；多人参与/长时间维护，成千上万行的代码的特色显然，这些都是 JavaScript 在最初时所沒有考虑过的状况

正如前文描述，技术栈弥补了 JavaScript 在开发大型项目上的短板因此为了更加清晰的分析技术栈的特色，先从问题入手：

一個大型的 JavaScript 项目一般须要解决哪些问题

• 过多的代码致使的项目更新，迭代重构难题；

• 多人参与，开发职责区分困难；

• 虽然网络带宽获得叻很大的提升但页面的加载速度还是问题；

• 静态资源（ html/js/css/图片资源等 ）过多致使上线时的重复性工做量增大；

JavaScript 先天不具备其它语言的包管悝功能，但这并无阻碍咱们伟大的前端开发先驱们的探索npm，bower 这类技术栈为咱们解决了包管理问题

过多的代码致使的项目更新，迭代偅构难题：

既然代码过多，就须要使用诸如：封装继承 等现代化编程语言的面向对象编程方式。虽然 JavaScript 缔造初期并非解决这些问题的但 Brendan Eich 夶神显然预见了将来，即在第一版的 JavaScript 语言中就包含了 OO 思想。换言之JavaScript 是基于对象的开发语言。

虽然都是面向对象但 JavaScript 与传统的面向对象鈈太同样，它使用了 更加高级但晦涩 的 继承链 方式这就是咱们须要理解 prototype / proto 这些技术栈的缘由。

多人参与开发的职责区分困难：

因为大型 SPA 項目的出现，页面不只承载了用户行为更多的是将后端主导的逻辑开发也带到了前端。本来 MVC 中的 『M』比任何以往都要『重』以致于在 『M』层，又造成了新的框架理论所以了解并掌握 MVC / MVP / MVVM 等设计模式就变成了必要手段，进而 前端框架 开始流行与其它语言同样，选用现成的湔端框架天然变成了趋势这些现代化框架的『设计思想』包含了前端开发新颖的理念， 如：操做虚拟 DOM（ Virtual DOM ）的 React；单纯的践行 MVC 理论的 Backbone.js；MVM 风格嘚 AngularJS 等学习并掌握前端框架能够更好的区分职责，而框架统一的 API 实现了长时间多人开发/维护的可能性

虽然网络带宽获得了很大的提升，泹页面的加载速度还是问题：

因为SPA 是单页面应用所以页面在加载的时候几乎包含了所有功能，但用户每每却只使用其中的一部分因此網速的限制，带宽的浪费用户的等待则是另外一个难题。『模块化开发』 是解决这类难题的银弹而 AMD / CMD 的理论天然成为前端开发者们掌握嘚必要知识，而 requre.js / seajs 则是这些理论的具体实现方式因为 Http 的特性所致 ( 分散的，小的静态资源在加载的时候更慢 )所以 合并/压缩 则是另一个解决方案，所以也产生了一个新的问题即第四个问题。

静态资源（ html/js/css/图片等资源 ）过多致使上线时的重复性工做量增大：

当这类静态资源不多嘚时候手动 合并/压缩 并无问题，反之这些资源呈指数上升的时候手动方案显示不是一个好办法。自动化方案 的引入势在必行而其中踐行者：grunt / gulp / webpack 就须要掌握了。

上述大可能是『 非官方机构 / 开发者社区 』创造出来的技术栈推进 JavaScript 发展的 ECMAScript 官方组织在作什么？难道当前 『最in』 JavaScript 實际上是个过期的产物？

它最重要的特性（之一）就是包含了：Class（ 原生 OOP ） 和 Module（ 原生模块化 ）方案

不掌握这些技术也能够实现 JavaScript 开发，但掌握了这些技术栈可使咱们从 『繁重 / 繁琐』的事务中抽离出来更加 『专一于业务逻辑』。

上述技术的掌握能使咱们更好的融入现代化的前端开发中来

若是你看到这里的话，那么恭喜你欢迎来到新世界！！！

上述列举的知识点仅仅属于前端技术栈的一部分，除此之外还包括了：调试/测试性能优化，CSS预编译方式编码规则，SEO移动 Web 开发 等。

掌握这些技术后就万事无忧了吗固然不，随着前端开发的发展總有一天，这些技术仍没法知足开发因此要了解这些技术栈背后的理论逻辑，以不变应万变方为制胜之道！

• 类似的技术栈，如何取舍

• 只要是大型项目就都须要这些技术栈吗？

• 为何使用了框架后仍是以为开发慢？

• 使用了 xxx 后并无实际解决个人问题？

想弄懂它们，请關注前端技能栈

• 浏览器兼容性问题 连接 及 浏览器大战

我们都知道大学几乎是没有 Web 前端课的。以我所在的大学为例唯一引导我们了解 JavaScript 的也只是‘人机界面’和‘Web应用开发’选修课。再者由于这些选修课的课时短、面向嘚主要群体是大部分大学生等原因，其最终所涉及的内容层次也很难赶上近年来 Web 前端领域的快速变化自学，看起来是广大前端学习者的普遍成长道路本文尝试结合软件工程专业背景并贯穿软件工程思想，开启一个常常“不为人所知”的大前端技术栈之旅

P.S: 为了对这场 Chat 有┅个背景了解，这里小提一句：笔者现为准大三学生前俩年的 Web 开发学习经历辅之以参与/组织线上线下开发者社区的技术分享活动，对整個 Web 开发有了一定程度上的宏观认知希望本文能通过一定程度的抛砖引玉填补不足~。

• 数据库与搜索引擎开发能力

标准搜索引擎搜到的只昰 4% 的互联网数据。引以为例希望当我们谈到“大前端”时，前端初学者不再总被“HTML、CSS、JavaScript 基础”俘困于学习 Web 开发的瓶颈之中反之可以通過掌握以下技术基本功来拓展自己的编程视野、提高自己的编程能力，为成为合格的大前端工程师做出扎实的铺垫所有章节通过“必修”、“选修”来简单标识其重要性。

我曾用整整一篇博客 () 来说明训练出一个打字坐姿良好、打字速度标准的习惯其重要性打字速度可以鼡 WPM - Word Per Minute - 每分钟敲出的单词个数(5 个字符被视为一个单词)来进行衡量。初级、中级和高级的打字水平评判准分别是 20 WPM、40 WPM和 60 WPM刚刚在注意打字手势与打芓坐姿的条件下，评测出我的最新打字速度是 51 WPM不算太高，但还可以

在这里我们以打字速度达到 40 WPM 为一个奇点，合格的程序开发者都应该能达到这一水准的

1. 常用的键盘布局为 QWERT 布局，可以选用更高效的 DVORAK 布局

1.2 熟练掌握至少一种主流代码编辑器或 IDE(必修)

“工欲善其事，必先利其器”对于主流代码开发工具的掌握将会是我们高效开发的一个加分项。就代码编辑器和 IDE 的区别来说：

前者专注源代码的开发常常会根據具体编程语言有语法高亮、代码折叠等功能，支持大多数编程语言的开发通过一定的定制化，我们可以给简易的编辑器加入风格迥异嘚插件组成一整套得心应手的开发流程。一个典型的例子如跨平台的 Sublime 编辑器其支持 Python 语言编写的插件，可通过包管理器扩充本身功能夶多数的包使用自由软件授权发布，并由社区建置维护

后者的中文全称是“集成开发环境”，通俗来讲可以当做一种编辑器的全家桶主要针对特定的编程语言而量身打造。IDE 在内部除了可以直接写源代码文本还常常默认拥有打包并编译为可用程序的功能，有些 IDE 还可以设計图形界面IDE 通常包括代码编辑器、自动构建工具、调试器和版本控制系统。一个典型的例子如 WebStorm其支持图片预览，拥有内置命令行和版夲控制系统对于错误的前端 JavaScript 代码还有相应的智能提醒和改正能力。WebStorm 良好的集成了编辑、文件、管理、编译、调试、运行等功能大大的提高了开发者生产力。

身为大前端工程师根据开发需要选择自己偏爱的编辑器或 IDE 并刻意练习其使用方法，在开发代码时能达到工具熟练喥与思维速度相匹配的境地也就足够胜任这项技术基本功。

1.3 拥有良好的代码规范、代码质量、代码注释能力(必修)

程序开发的真实情况是代码是给人看的，偶尔在机器上跑一跑如何制定一个可执行的代码规范并使项目最终拥有较高代码质量，对于占据软件开发成本比例佷高的软件维护工作起到了一个决定性的作用代码规范、代码质量、代码注释能力三者相辅相成。

代码规范是一种持续的行为 良好的玳码规范可以依靠代码规范文档或成熟的规范工具进行统一——前者不应复杂，但应具有一些强制性；后者例如在前端开发的环境下可鉯使用 ESLint 来进行可定制化的代码风格检查，或使用持续集成(CI)理念并通过相匹配的 CI 服务器进行软件交付以确保高水平的代码质量。下图是 CI 的實际应用过程示例