先来看 github 上一大神制作的路线图：
#核心技能
好了，相信你已经开始下定决心要成为前端大神了，那咱们第一步就是把前端的核心装备拿下，它们分别是 html, css 和 JavaScript。前端的初衷是开发网页来让其他人看的，可以向全世界分享信息，直到最近几年才诞生了利用这些核心知识去开发移动 APP、小程序等多终端前端应用的工具，学好核心是前端工程师必备的素养。下边就是核心技能的简介：
#HTML
HTML 是用来编写网页代码结构的，它有一系列的标签用于显示不同的页面元素，比如用 <a/> 显示一个超链接，<img/> 显示一张图片，就跟写一个 word 文档一样，只是单纯用 html 只能写内容，不能进行排版和美化样式，如果让网页变得漂亮，需要 CSS。
书籍：Web 开发经典丛书：HTML & CSS 设计与构建网站
#CSS
CSS 是用来美化 HTML 编写的页面的，通过一些语法选择特定的 html 标签，然后用一些属性来给它们添加样式，比如文字颜色，背景，位置，边距，定位等等，还可以添加动画效果让页面显示的栩栩如生~。重点要掌握 CSS 的盒子模型、常用的布局方式，比如 flex、grid 等。
#JavaScript
在写完 html、css 之后，咱们就可以写漂亮的页面了，那么接下来就是需要学习 JavaScript，让网页能和人进行互动，比如点击按钮弹出个对话框，处理用户输入的表单信息，添加一些复杂的动画，使用 ajax 加载远程数据等等。它可以直接操作 HTML 元素，给网页开发提供了无限可能~这里咱们一定要把 JavaScript 基础语法掌握扎实，可以观看我 B 站上的 JavaScript 视频：
书籍：Eloquent JavaScript 3rd edition (包括 HTTP)
#网络基础
现在咱们可以做成型的网站了，那咱们该如何让全世界的人看到咱们的杰作呢？那这里网络基础就派上用场了，不需要精通，只需要掌握几个基本概念就好了。
#域名
访问网站咱们都知道需要使用 url (网址)，比如 www.baidu.com，这个 baidu.com 就是域名，域名可以从域名提供商购买，比如阿里云。在购买域名之后要通过 DNS 解析服务把它对应到一台服务器的 IP 地址上。
#服务器
服务器就是一台安装了服务器程序的电脑。用户用域名访问一个网站时，会有 DNS 解析服务把域名解析成 IP，再通过 IP 找到相应的服务器，服务器程序就把网站内容传递给用户的浏览器。咱们的网站就部署在服务器上，它也是从阿里云之类的提供商购买。
#Linux
服务器的操作系统一般是 linux，它可以没有用户界面，可以节省很多 CPU 和内存资源，这样就要求咱们掌握一些常用命令，比如创建文件，切换目录，复制和移动文件，显示文件列表等。另外访问服务器常用的工具是 SSH 和 FTP，咱们需要通过这几个工具来从自己的电脑连接到远程的服务器，然后安装服务器程序和上传网站程序。
#服务器程序
常用的服务器程序有 apache、nginx，它们都是基于 HTTP 协议的，有了服务器程序，网站文件比如 html 页面才能发送到用户的浏览器上。
#HTTP 协议
协议好比如说医生开药方，写的龙飞凤舞，但是药房药师居然都看得懂这个可以说他们都有固定套路来理解对方那么在计算机领域，协议就是电脑之间用来交换数据的规则。HTTP 协议是用来在网络上交换和传输数据的，比如说咱们的网站 html、css 和 js 就是通过这个 http 协议来发送到浏览器的。
#进阶技能
上边核心技能都掌握了的话，你就已经超过一半的前端工程师了，接下来就是成长为更高级一些的前端工程师，这里的目的是除了理解一些高级的概念之外，还要提高开发效率，也就是用到所谓的框架。
#响应式布局
现在手机和平板差不多要比电脑都流行了，所以一个网站要适应不同尺寸的屏幕，有这种特性的网站就叫做响应式网站。实现响应式主要就是通过 css 的 media query 针对不同的屏幕宽度，编写不同的 CSS 样式。
#兼容性调整
网站需要在不同的操作系统和浏览器下都要保持一致。对于 CSS，可以使用 css hack 来对不同的浏览器加载不同的样式。 对于 JavaScript，则可以使用 Babel 等转化工具，把新的 JS 语法转换成旧的，或者使用 polyfill 加上浏览器不支持的语法。
#UI 框架
UI 框架提供了页面的基本 UI 样式和布局系统，比如按钮、对话框、轮播图，省了自己去开发，常用的有 Boostrap, Semantic UI， Tailwind CSS。
#SEO
SEO 全称是 Search Engine Optimization，搜索引擎优化。咱们常见的百度、谷歌这些搜索引擎会定期爬取线上的网站内容，然后进行收录，网站内容质量优秀、结构良好、访问量大的还会排名比较靠前。为了给自己的网站增加曝光量，这就需要针对搜索引擎给咱们的网站添加一些内容，比如关键字。
如何带着 SEO 的思维将 MDN 的 Web 文档写的更符合搜索引擎展现
#Node.js、npm / yarn
因为 Node.js 的出现，JavaScript 的开发可以脱离浏览器了，这样就产生了好多借助 Node.js 来写前端代码的方式，然后用相应的打包工具去打包成浏览器可用的代码。这样的好处是，咱们可以充分利用 node.js 的包管理工具来方便开发，比如使用 npm 或者 yarn 管理项目的依赖。
#CSS 预编译
咱们在写 CSS 的时候可能一段代码要重复好多次，写一连串的选择器，重复的属性组合等等。这时 CSS 预编译工具就派上用场了，比如 SASS、LESS，它们支持 CSS 选择器嵌套、定义变量、Mixins、函数、继承等等。
#自动化工具
自动化工具有 grunt、gulp 等，可以监控文件变动，或者做一些自动化操作，比如编译 SASS 或 LESS 的代码为 CSS 等。
#React, Vue, Angular
这里就不得不提当下十分热门的前端开发框架了，React、Vue、Angular 三大件。它们都提供组件化开发的方式，这就让前端开发模式发生了巨大的变化，以往以页面为核心现在转为了以组件为核心，有了这些组件可以方便的在不页面进行复用。另外基于状态的数据管理，也让改变组件状态变得十分简单。这三个框架可以都学，但是工作中基本上只会用到一个，深入一个就可以了。至于它们的 UI 框架也可以根据工作的需要去学习比如 ant design、element UI 等。
#模块化 CSS
因为 React 等组件化工程的出现，CSS 分散在不同的组件中，很容易因为命名冲突而导致样式被覆盖，模块化的 CSS 开发方式通过使用 css modules， 或者 styled-components (css-in-js 方式) 工具能很好的避免这些问题，它们也提供了其它类似 SASS/LESS 的功能。
#工程化工具
所谓工程化的工具，也就是打包工具，前端项目的各种 JS、SASS 源代码可能分散的不同的地方，利用打包工具，比如 webpack、parcel，可以把它们打包成一个单一的 js 和 css 文件，它们支持按需打包，用到的代码才会打包到最终产品上，没用到的则不会。另外图片等静态资源也可以指定规则进行打包。
#测试工具
没有人想要不健壮的代码，在改动一个地方之后引起全局崩塌~，咱们写好的组件需要进行详尽的测试才能确保不出问题，另外也方便咱们工程师节省时间，因为只要添加的新功能保证测试结果还是正常，那么就不需要再人工去测试了。常用的 UI 测试工具有 jest, enzyme 等等。
#高级技能
在把编写网页的技能掌握熟练以后，就要从多端开始拓展自己的技能了，另外还要深入已经掌握的技能。
#TypeScript
TypeScript 是微软编写的一款带类型的 JavaScript 语言，它的代码可以编译成普通的 JavaScript，但是编写的时候支持强类型，并且支持完全面向对象的形式。它的好处在于带有了类型之后，代码更容易维护，适合大型项目的开发。
#移动开发
移动开发包括移动的页面 H5 开发、小程序和移动 APP 开发，好在这些有统一的开发平台，使用 React 或者 Vue 就可以进行一次开发，多平台使用。React 生态的有开发移动 APP 的 React Native，开发多端平台的 taro。 Vue 有多端开发的 uni-app。
计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？
-
HTTP 常用的请求方式，区别和用途？
-
HTTPS 是什么？具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛？
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛？
-
HTTP 如何实现长连接？在什么时候会超时？
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的，UDP 为什么不可靠？
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法
2756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
