2018年，web前端开发应该怎么学?总结一下

面向 2018 年，我觉得前端有这么三个方向可以突破：

1. 前端逻辑层（包括三大框架，webpack，前端数据管理）

2. 前端交互层（包括 css3，canvas，svg，vr 等，以及对应性能优化）

3. node 服务器层 （即服务器领域，以及前端开发工具的开发）
   这里还是要推荐下小编的web前端学习群:606721798，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份2最新的web前端资料和0基础入门教程，欢迎初学和进阶中的小伙伴。在不忙的时间我会给大家解惑

当然还可以说，有 electron 这样开发桌面应用的，但是我觉得大部分人的规划还是在 web 领域范畴的。

一、前端逻辑层

前端逻辑层解决的问题：前端的渲染问题。 其实就是，从后端拿到的各种数据（数据库的结构化数据，各种素材），如何组合成页面元素。

前端的渲染，其实就是 模板 + 数据 = 页面

① html 负责结构

② css 负责样式

③ js 负责逻辑

只有模板没有后端数据的页面我们可以理解为静态页面 而我们目前主流的三大框架，则提供 模板与数据之间的映射关系。 在逻辑层的研究，主要就是学习并熟练三大框架： Vue, React, Angular

这一块是我们 90% 前端，日常工作的主要部分。也是很多公司面试会去重点考察的内容。 但是，目前的行情已经不是，你会个新框架就可以任性拿 OFFER 的时期了。 前端的井喷的情况下，仅仅会一些基础知识是不够的。你必须往下深挖。

可以深挖的部分

①框架部分： 举个例子，如 Vue+ Vuex+ Vue-router+axios 的全家桶 react 和 angular 的也类似，有这么一套全家桶。 要想在前端竞争中取得优势，需要在这些框架的原理上深挖。 研究： a. 源码和实现原理 （理论）

 b. 常见的应用场景和常见问题的实现 （经验） c. 同类问题的横向对比（比如用了vuex 需要了解一下 redux是怎么实现的）

②构建部分： webpack + npm/yarn + 脚手架（如 vue-cli） +sass 构建部分，其实是一块很容易出区分度的领域。你研究透一点，你就越能驾驭住项目的变化。 研究： a. webpack 的配置和对应应用场景

 b. npm的命令使用，以及一些高级的用法（架设私有npm或者自己写全局包等） c. 脚手架快速搭建的过程，以及如何自定义更改 d. 如何配置eslint和单元测试等

③代码规范部分： es6 + ts + css 规范 等等等 代码规范不多说，前端的 js 和 css 都是设计得很粗糙的语言。如果你想 hold 住更大型的项目，那么规范是你不可忽视的地方。

逻辑层部分，是我们通常意义上理解的前端本职。

二、前端交互层

所谓交互层，可以理解为我们常说的 特效。 当前的趋势下，移动端浏览器的性能逐步提升。未来一个大的趋势就是 前端开发的效果，正无限逼近原生效果

同时一些大厂也在纷纷提前布局了，之前惊艳四方的天猫造物节 H5 淘宝造物节 - 风靡朋友圈的 h5 怎么做的？

如果我们要在这波浪潮上取得先机，那么就必须提前学习。 也许再过三年，前端的开发特效的能力，也会成为标配技能。

可以分三块来看

1. 呈现效果学习： 很多同学不是不会特效，而是不知道要实现成什么样子。用前端的各种东西鼓捣了，终于出来了特效，但是效果却很难看。 不不不，做特效，应该先把特效样子调好了再去做。 建议学习 Adobe Effects （AE），直观地看动效是什么样子，然后再翻译成前端的动效。

2. 相关数学 / 视觉原理： a. 贝塞尔曲线原理 b. 视差原理 c. 阻尼公式

3. 相关技术手段实现 前端目前实现动画特效的八种方式 http://www.offcn.com/it/2017/...

①gif: 设计直接出 GIF，前端直接用

②逐帧动画： css3 step 属性 或 js 制作逐帧动画

③css3 ： transition/ transform/animation

④svg : svg 很适合移动端

⑤canvas: canvas 适合一些比较大面积的动效

⑥flash 转 canvas : 这个我不了解

⑦video: 用 h5 video 标签

⑧js 动画： 可以配合平台提供的 api（重力感应等）开发更复杂的动效

三、node 服务层

node 在前端应该是无人不知了。在实际使用中 node 的使用场景应该有这几个：

① 作为前端构建辅助工具： 如各种脚手架中，经常有 node 的参与

② 作为服务端做渲染层： 实现接口合并和模板渲染

③ 作为完整服务器： 一般是创业公司中，可以一人搭建起全部 web 功能。如微信公众号项目等

那么如果要学习的话，要从哪里入手呢？ 学习一个新技术，我个人的方式都是 先把原生的文档，快速过一遍，然后学框架。

不看原生的，很容易学一套框架，就是一次学习量。 学习原生知识，可以让你学框架速度提升。

框架里面常用的：

①express

②koa

③基于以上两者衍生的框架

④其余框架

我建议新手学习 express 框架。理由很简单，易学，使用多，教程多。 我个人想学习的 node 框架是天猫的 egg.js 。

推荐理由是

①大厂开发，面向工程

②经受住了双十一的考验，质量有保障 总结

前端是端工程师，一切特性依赖于客户端。 因此各位前端的同仁，除了上述的功能外，还是要多留意浏览器以及移动端环境的变迁。 一些类似与 HTTP2 协议，PWA，openGL 等技术，都随时有可能改变前端的工作方式。

我上面列了那么多，其实我很多都没有学过（手动狗头）。但是除了技术能力，也许以下几个综合能力，对于前端 er 也是要注意的

①自我规划能力：对于技术领域的趋势的洞察，以及个人对应的学习计划

②快速学习能力：搜索能力（利用网上的各种知识），知识迁移能力

③沟通能力和知识输出能力： 面向产品，以及面向后端，面向社区同仁

下面部分给大家分享一下前端的一部分学习路线，差不多只针对2个月的学习者。

前端学习比较好上手，但到了一定阶段深入却比较困难，一个合格的前端应该是个web工程师，而不是JavaScript程序员，因此简单的学习目标

1. CSS、CSS3

2. HTML、HTML5

3. JavaScript、ES6

4. HTTP协议

5. 性能优化

6. 一门后端语言

7. 更好的方式写代码

8. 线下开发和代码发布

学习路径比较长，对于初级学习有些合理的路径

1. 学会 Markdown，平时多写文档

2. 坚持写博客，收益绝对超出你想象，但要写在大众的地方，不要自己搞个网站，否则没人关注，渐渐就没了兴趣

3. 了解一下GitHub，让你的代码不在停留在本地。也许这两篇教程可以帮着你理解Git语法 git - 简易指南、Pro Git

CSS

很多初学者认为前端难在JavaScript，CSS和HTML比较简单，这种观点有一定道理，CSS和HTML的语法比较简单，但运用的好可以帮我们减少很多JavaScript代码

对于CSS的学习常用属性的了解 w3school就不错，但CSS有几个核心知识一定要非常了解

1. position和z-index

2. display

3. float

4. margin

这几个会附带BFC啊什么的一堆相关知识点，每个属性的值含义都要非常清楚才行

MDN上有很多基础知识的文章，很全面，例子也很详尽 CSS入门教程，实在是学习的好材料

另外CSS的一些布局技巧也需要掌握，圣杯布局双飞翼啊，听起来很玄妙，不妨从最简单的开始 学习CSS布局

很多大神也教我们如何做人 说说CSS学习中的瓶颈

对于CSS3也是要了解的，有几个常用的、

我现在自己建立了一个前端学习群：213126486 邀请码：理想 记得一定要填写邀请码 都是为了防止广告 你要是目前在学习前端，或者在学习上有什么不会的 你都可以一起来学习交流，独学苦忧，共同学习，一起进步。

1. 变形

2. 动画

3. 圆角、阴影

4. box-sizing

5. flex

HTML

HTML学习基础还是推荐 w3school 和 MDN

HTML5看场景，如果是移动端，应该开始全面掌握了，PC的话也有几个常用的，能做到兼容或者退化的

1. localstorage & sessionStorage

2. history API

3. placeholder

4. postMessage

5. requestAnimationFrame

6. 自定义属性 data-*

7. audio & video 标签

全面了解的话 MDN依旧是个好去处

JavaScript

网上有很多JavaScript方面的教程，但对于初学者基础还是比较重要，否则都没有筛选教程的能力

我强烈推荐 JavaScript高级程序设计，不要被书名吓到，这真的是一本由浅入深的学习书，值得所有基础不好的同学读三遍，每次肯定有新收获，而且书的后面有很多高级些的技巧

JavaScript权威指南做工具书更合适一些

jQuery就不多说了

几个基础知识

HTTP

HTTP很难去介绍这是什么，但是非常重要，尤其是对入门后的进步阶段，建议不要在网上找教程了，直接推荐两本书

对计算机体系不是很了解的可以先看本轻松的 图解HTTP

几个基础知识

1. URL 组成

2. 状态码

1. 200

2. 301

3. 304

4. 307

5. 403

6. 404

7. 500

1. HTTP 方法

1. GET

2. POST

3. PUT

4. DELETE

5. HEAD

6. OPTIONS

7. TRACE

1. HTTP 首部

1. cache-control

2. connection

3. date

4. accept

5. if-Modified-Since

6. if-Match

7. ETag

8. content-encoding

1. cookie & session

HTTP权威指南也很不错，但预读有一些难度

进阶

前端天地无限广阔，关于进阶那就百花齐放了，有几个流行的领域

预处理

Sass、Less

模块化

CommonJS、AMD、CMD

工程化

gulp、webpack、NodeJS

MVVM 等框架

React、AngularJS、Vue.js

最后

前端面试几乎都会问的两个问题

1. 性能优化

2. 从输入 URL 到页面呈现发生了什么

这两个问题相当于开卷面试，不同水平的同学给出的答案截然不同，也没有标准回答，关于性能优化可以从几个大的角度回答

首先你必须看过关于性能优化的雅虎军规，没看过可以看看园友的解读 毫秒必争，前端网页性能最佳实践

1. 针对浏览器渲染页面原理的 CSS、JavaScript 语法层面优化

2. 针对 HTTP 协议特性网络性能优化（合并资源、压缩、多个域名等）

3. 用户体验层面性能优化（懒加载之类）

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

第二点是必须要做的，儿第三点现在主要成了性能优化的主要发力点

其实前端和所有计算机工作一样，终极目标都是解决问题，千万不要沉迷于框架或者语言的无谓之争上。各种知识层出不穷，耐心享受吧