前端工程师学习路线

一、入门前端三剑客

1、HTML

html 学起来还是挺简单的，无论你是否有编程基础，我觉得都可以快速入门，对于新手，我推荐找个入门的视频看一下，然后跟着视频打代码就可以了，入门教程随便在网上找个免费的视频就可以了，随便搜索「html入门」即可，或者看菜鸟教程的一个入门教程也行。

看完视频，也可以看一下文字版的教程，不知道大家有没有看过阮一峰写过的教程，我觉得他写的教程都很棒，所以这里我也推荐下大家看一下阮一峰写的这份 HTML 入门教程，可以让你理解的更加透彻：HTML 教程

大家切勿眼高手低，一定要跟着视频或者书籍上的案例打代码，写代码的编辑器，我推荐 VS-Code，反正选一款你喜欢的编辑器就行，现在这些编辑器都有很多插件，像 VS-Code 这些编辑器，用好一款就可以写各种语言的代码了。

2、CSS

没啥好说的，和 HTML 相辅相成，你在学习 HTML 的过程中，其实也一直都在接触 CSS，所以你学了 HTML 之后，感觉几个小时就可以学完 CSS 了，还是一样，推荐找个视频快速入门，不多说。

html 是一门标签语言，里面有各种各样的标签，很多初学者学了之后可能就把这些标签忘了，有人可能会问，老是忘了怎么办？

忘了就忘了，没事的，不需要强行记住这些标签，你需要的是：脑子里有个印象，当你这实现某个功能的时候，你知道 HTML 有某个标签可以实现这样的功能就可以了，然后翻开对应的教程，你能够根据教程使用这个标签即可。

用的次数多了，也就记住了，所以学完 HTML 和 CSS，一定要多多实践，随便打开一个网页，对着葫芦画瓢，自己写一个和它类似的就可以了。

3、JavaScript

比起 HTML 和 CSS，JavaScript 会难一些，不过如果你有其他编程语言基础，例如学过 C 语言，Python 或者 Java 啥的，那学起 JavaScript 也是分分钟的事。

前面的 HTML 和 CSS，我的推荐大家找个视频快速入门即可，但是对于 JavaScript，假如你时间不是很紧，那么我推荐你用书籍系统学一下，有些知识，趁着有时间，一定要系统学，这样可以打下很深的底子，如果你觉得难的话，也可以先用视频快速入门，之后再回过头来钻研书籍，系统过一遍，通过系统学习，你会明白很多原理，学到很多设计思想，我看过一本《高性能JavaScript-中文版》，感觉还好，就推荐这一本吧。

学了 JavaScript 之后，可以学一学 ES6，面试貌似也经常会问到，可以看一看阮一峰写的一份入门教程：ES6 教程

二、框架

目前前端用的比较多的主要有 Vue 和 React ,在学习框架之前，一定要先用 HTML + CSS + JavaScript 这些做一些项目，因为这些框架的底层实现，其实就是 JavaScript 实现的，然而，居然还有人知道如何使用 Vue，但没学过 JavaScript，这显然不合适，只有你体验过 HTML + CSS + JavaScript ，你才能更好着明白 Vue 和 React 的好处。

不过对于初学者，可以先学习 Vue，Vue 可能更好入门一些，之前实习的时候，被迫学习了几天的 vue。你可以去B站找一些课程或者购买

不过你看了课程之后，你去做项目的话，其实还是会遇到好多问题的，特别是在网络请求那块，在解决问题的过程中，你就能更加理解一些原理了。

学到什么程度？

对于初学者，我的一半建议就是，跟着一份教程，过一遍，然后做对应的项目即可，之后遇到啥，就去搜索啥，不用纠结这个学到什么程度。

Vue 和 React 随便选一个重点学习即可，我推荐 vue，不过学了 Vue 之后，有时间的话，我建议可以了解下 React，快入通过视频了解，感觉几个小时或者一两天就够了。

三、数据结构

无论你是走什么岗位，数据结构都是必须学习的一门课程，从面试的角度来讲，面试基本比问，特别是校招；从个人的提升上来看，学好数据结构与算法，可以让你走的更远。

但是，数据结构与算法这玩意，可深可浅，不过我觉得至少得掌握如下基础知识：

1、时间复杂度、空间复杂度

2、链表、队列、栈

3、树：初级：二叉树，查找二叉树，进阶：AVL树，红黑树等，至少掌握初级吧。

4、图（图有好多种算法，深度/广度搜索，最短路径、最小生存树等），对于图，其实无论是面试还是工作，都挺少用到，学起来也有一定难度，假如你时间不多，我觉得可以先不学。

不过如果你是科班的，那么这些我觉得你大一第二学期把这些都学完是最好的了，没学完也问题不大，有些人可能是先教《离散数学》这本课，为数据结构与算法做铺垫。

书籍推荐：你学过 JavaScript，所以可以用 Javascript 来写这些数据结构，至于书籍，其实我也不知道推荐啥，网上根据目录找一本：

把基础数据结构学了之后，我觉得你要保持刷题，这个还是挺重要的，例如可以每天保持刷一两道，刚开始刷会挺吃力，但后面熟练了，就会快很多，不过很多人在吃力的那会，就放弃了，所以也就有了人与人之间的差距。

我觉得至少把《剑指 offer》刷完吧，刷完之后，可以去把 leetcode 中 top 100 的热门题做了。

当然，如果你想更加系统着学习算法，可以看我之前写的算法学习路线：谈一谈算法学习之路

95页前端初级模块笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

html5/css3

• HTML5 的优势

• HTML5 废弃元素

• HTML5 新增元素

• HTML5 表单相关元素和属性

• CSS3 新增选择器

• CSS3 新增属性

• 新增变形动画属性

• 3D变形属性

• CSS3 的过渡属性

• CSS3 的动画属性

• CSS3 新增多列属性

• CSS3新增单位

• 弹性盒模型

JavaScript

• JavaScript基础

• JavaScript数据类型

• 算术运算

• 强制转换

• 赋值运算

• 关系运算

• 逻辑运算

• 三元运算

• 分支循环

• switch

• while

• do-while

• for

• break和continue

• 数组

• 数组方法

• 二维数组

• 字符串

正则表达式

• 创建正则表达式

• 元字符

• 模式修饰符

• 正则方法

• 支持正则的 String方法

js对象

• 定义对象

• 对象的数据访问

• JSON

• 内置对象

• Math 方法

• Date 方法

面向对象是一种编程思想

• 定义对象

• 原型和原型链

• 原型链

• 原型

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

BOM

• BOM概述

• window方法

• frames [ ] 框架集

• history 历史记录

• location 定位

• navigator 导航

• screen 屏幕

• document 文档

DOM

• DOM对象方法

• 操作DOM间的关系

• DOM节点属性

事件

• 事件分类

• 事件对象

• 事件流

• 事件目标

• 事件委派(delegate)

• 事件监听

jQuery

• jQuery 选择器

• 属性选择器

• 位置选择器

• 后代选择器

• 子代选择器

• 选择器对象

• 子元素

• DOM操作

• JQuery 事件

• 容器适应

• 标签样式操作

• 滑动

• 自定义动画

AJAX

• 工作原理

• XMLHttpRequest对象

• XML和HTML的区别

• get() 和post()

HTTP

• HTTP消息结构

• url请求过程

性能优化

• JavaScript代码优化

• 提升文件加载速度

webpack

• webpack的特点

• webpack的缺点

• 安装

• webpack基本应用

• 配置文件入门

vue

• MVC模式

• MVVM模式

• 基础语法

• 实例属性/方法

• 生命周期

• 计算属性

• 数组的更新检查

• 事件对象

• Vue组件

• 路由使用

• 路由导航

• 嵌套路由

• 命名视图

获取方式：

1.一键三连+关注

2.后台主动留下痕迹：“资料 ”（重点）