写给刚接触前端的你

转眼间，我做前端也有两年左右了，从一开始本科毕设用 HDwiki 搭了一个小网站，到现在用 wordpress 搭个人博客；从一开始改 html 的 bug 都得百度一下午，到现在可以试着写一些小插件；从一开始不知道为什么变量不用双引号，到现在将近二十万行的代码量；我承认这两年我进步了很多，但是回想起来还是有很多遗憾和不足，所以在这里想对刚接触前端的你说一些话，以免走弯路。这篇文章只对刚接触前端不到两个月，或者刚从所谓的“速成班”学成归来，对于前端之路比较迷茫的同学有用

前端进阶路线

前端学习路线是典型的先易后难，上手很简单，但是一旦深入就会发现比其他任何语言都要难，内容都要多得多，因为前端需要学的东西实在是太多太多，下面是我总结的进阶路线（我当然仍处于初级阶段）：

CSS（CSS3）
HTML（HTML5）
JavaScript（ES6）
HTTP 协议
代码优化
性能优化
框架了解和学习
自己封装框架并进行模块化组件开发
全栈 Node.js

接下来我会从以上的方面分别进行总结（有些坑希望你别爬，有些捷径希望你知道），前 5 个阶段我用两年的时间渡过了（代码优化是永久话题，并没有终点），后面的几个阶段我会摘抄一些其他人的总结；如果你没有耐心看下去那么多文字，可以直接看最后的总结O(∩_∩)O

关于前端进阶路线，除了下面我的总结，推荐另一篇文章：【译】前端练级攻略

CSS

如果你学习了一段时间前端，可能会觉得 CSS 好简单，但是 CSS 也有瓶颈期，而且运用得当的话会帮我们省去很多 JavaScript 代码，针对于 css 如何学习，我有以下建议：

只要是前端入门学习，w3c是再好不过的网站，这个网站有大量的实例教程，希望你有时间的话能够过一遍，就算记不住也没关系，有印象即可
MDN上有很多基础知识的文章，CSS入门教程也是 CSS 学习的好材料
CSS3 是一个突破点，因为之前 CSS2 的那些属性大家都已经用烂了，而 CSS3 尚处于开发研究阶段，如果能够熟练使用将会使自己升值不少
在了解了 CSS 的选择器、属性和值之后，再下一步就是 CSS 布局了，这里有一个专门用来学习 CSS布局的网站，里面的教程很全面，相信你可以学到很多新的知识点
至少会用一种 CSS 预处理工具（Sass、Less、Stylus），这些工具会让你的 CSS 书写更加快捷

HTML

作为前端界的“领头人”，html 是我们和用户离得最近的代码语言，而 html 也是最容易提升的前端语言了，因为其核心就是语义化和加载速度，而对于前端初学者，我有话要说：

html 基础学习依然推荐 w3c和 MDN，这两个网站的风格不同，w3c 更书本化一些，可能需要一些耐心才能看下去，而 MDN 从网站的配色到文字描述风格都更“高大上”一些
HTML5 方案已经实施很久了，各大浏览器基本上都已经实现了兼容（IE 我就不吐槽了），所以对于 h5 的学习也是重点内容，尤其是 canvas、audio & video 以及和性能优化相关的各种标签
一定要从刚写 html 开始就养成“语义化”和减少嵌套的习惯，文本多用 p 标签，代码块多用 pre 标签，表单提交多用 submit……

Javascript

如果说 html 是前端界的“领头人”，那 JS 就是前端界的“大高个”，也是最容易拉开差距的一门语言，所以 JS 的学习对于前端初学者来说就显得尤为重要了：

依然推荐 w3c，和 html 与 css 不同的是，w3c 上关于 JS 的教程实在是太多，如果真的时间不充足的话可以看的粗一些，知道概念就可以了
在对 JS 有一些概念之后，如果有比较急得项目需求，我推荐你看一下 jQuery 的相关教程（当然还是 w3c），因为 jQuery 在 JS 框架里属于非常简单的，入门很快，但是能解决大部分项目需求，是一个性价比很高的 js 库
如果你的项目需要用到 React 以及 Vue.js 等框架，可能需要看一下 ES6 的相关知识，推荐阮一峰的 ECMAScript 6 入门

HTTP

可能你会比较纳闷，为什么还需要知道 HTTP？请记住，前端是和客户端打交道的（至少目前来看是这样的），所以各种和客户端以及服务器相关的协议一定要了解一些，这对于你的前端水平提升尤为重要，可以让你更容易找到 bug 出在哪里（两年的前端经验使我更加明确这一点）

知道 URL 是怎么回事以及其组成规则
可以上网查一下 HTTP 各种状态码的含义，在调试代码和找 bug 的过程中会经常用到
cookie & session 的知识在某些类型的网站会经常用到（支付、博客）

代码优化

对于程序猿来说，代码就像自己的门面，如果代码一团糟，就会让同行笑话甚至会因此丢掉工作，所以代码优化对于程序猿来说就属于必经阶段了：

1. css

减少选择器的叠加层数
少用 !important
注意 CSS 书写顺序
命名规则尽量语义化
少用内联样式
注释、注释、注释！

具体可以参考我的另一篇文章：CSS书写规范

2. html

减少 div 的嵌套层数
多用语义化标签（h5 标签居多）
少用 id
注释、注释、注释！

3. JavaScript

按照功能进行命名
尽可能面向对象编程
注释、注释、注释！

性能优化

前端是直接和用户打交道的，而浏览器的响应速度更会直接影响到用户体验，如果一个网站打开需要两秒钟，可能会有百分之 30 的用户直接关掉页面；如果一个网站打开需要五秒钟，可能以后就没有这家网站了，所以性能优化是一个优秀的前端工程师必备技能，同时也是终极目标；关于性能优化，首先你必须看过雅虎军规，没看过可以看看这篇文章-毫秒必争，前端网页性能最佳实践。除此之外，你需要知道，性能优化包括以下几个方面：

针对浏览器渲染页面原理的 CSS、JavaScript 语法层面优化
针对 HTTP 协议特性网络性能优化（合并资源、压缩、多个域名等）
用户体验层面性能优化（懒加载之类）

在现在计算机运行速度下，只要代码写的不是特别过分，第一点对性能优化能做的很少，我们使用了更好的语法也不会对网页提速很多。第二点是必须要做的，而第三点现在主要成了性能优化的主要发力点

框架了解和学习

前端和所有计算机工作一样，终极目标都是解决问题，所以千万不要沉迷于框架或者语言的无谓之争上。对于前端来说，各种框架层出不穷，各种知识学都学不完，所以将 html、css 和 js 的基础掌握牢固才能以不变应万变，当然，框架也是为了方便书写代码和优化才产生的，其存在必有其合理之处，如果你已经开始从事前端工作，请听从领导的安排，一句话就是之前用什么框架现在就用什么框架吧。。除非决定要更换框架，否则不要轻易换框架，因为可能代价会比较高如果你只是在校学生，还有很久的时间用来学习，我希望你能够把更多的精力放在基础学习上，不会因为各种各样的框架而不知道学什么；只要将基础知识掌握牢固，就什么框架都不在话下了，学习起来会很快

自己封装插件并进行模块化组件开发

暂无

全栈 Node.js

不得不说，Node.js 在前端领域已经火的不要不要的了，因为其具备其他框架没有的特性——用 js 写后台；试想一下，一家公司只需要雇一个前端工程师就能完成前后端的所有工作，这将节省多少成本（有时候，前后端沟通联调也需要很长的时间成本），同时在 Node.js 基础上开发的插件也越来越多，使 Node.js 的功能愈加强大，似有一统前端之势。所以，如果前端基础学习遇到瓶颈或者想去用 Node.js 的公司，可以尝试一下，不仅可以学到 ES6 的各种新知识还可以了解到异步编程、按需加载等比较新的技术

其他

其他需要掌握的技术

git：代码托管工具
Markdown：github 御用格式，语法简单实用，养成多写文档的习惯大有裨益
vi命令：界面简单但是功能强大的编辑器-Vim，知道一些常用命令可以事半功倍
Linux：Linux 即使在今天依然发挥着强大的优势

多看、多想、多做

作为前端初学者，一定要多看、多想、多做：

多看：经常浏览一些做得比较好的网站，看他们的 html 结构、页面布局、class 命名以及各种动画设计和实现，会不时地发现新的创意和灵感
多想：碰到 bug 一定要多想，多尝试；从我自身而言，我觉得找 bug 是提升最快的一种方式，而很多初学者都很怕找 bug，以至于上次遇到的 bug 这次遇到了还是不会解决，这会严重阻碍你的进步！
多做：和所有语言一样，只看不做是不会记得久的，所以在看文字教程和视频教程的同时，一定要多在编辑器里敲一敲代码，同时也要尝试着做一下笔记，对于个人的成长也会很有帮助

忌浮躁

不要为框架而烦恼，只要学好了基础，框架就不是难题；但如果基础学不好，用框架的时候也会碰到各种麻烦，所以作为前端工程师，一定要戒骄戒躁，遇到不会的问题先自己思考，实在想不出来了再去询问前辈或者上网找答案，这样才能提升自己的水平

了解一门后台语言

最好了解一门后台语言，最起码读得懂后台写的什么，这样会省去很多前后台沟通的时间

总有人间一两风，填我十万八千梦