前端知识变化的太快，东西太多，太杂，你今天学一个框架，明天出来两个，1年前学的东西没怎么用，然后1年后忘的差不多了，是不是有点尴尬？
不过最近，我发现前端新技术、新框架的更新也放缓了。
今天跟大家聊聊小白想要入门前端、深入前端、在前端领域工作，需要学习哪些必备的知识？
前端开发必备全景图 不废话直接上最终的图没有编程语言怎么能算工程师，因此Javascript简称JS,赋予了前端开发人员灵魂。
编程语言是对操纵计算机的一种高级抽象，我们通过操纵JS来对页面的交互进行封装，最经典的就是输入用户名，密码，然后点击登录，哒哒！。
推荐视频：https://www.bilibili.com/video/BV1W54y1J7Ed
对于JS语言的深入学习,在熟练掌握JS的各种语法之后，可以尝试通过做项目来达到，以战代练。不过此时，你需要学习基本的HTML和CSS
HTML + CSS通过浏览w3school(https://www.w3school.com.cn/)我们可以很快速的掌握html、css大概是什么样子，还是推荐大家继续去freeCodeCamp上去学习相关html、css相关知识
推荐教程：https://www.bilibili.com/video/BV1p5411w71w
Chrome你需要多多使用使用Chrome,加上一款能让你写JS、HTML、CSS的主流编辑器(比如免费开源的VScode) 练习开发一个百度静态首页，再复杂一点请打开 jd.com。这个练习对初学者其实非常重要， 也是你早期的成果，以后甚至可以回来不断优化。
React/Vue 加速开发页面 React 可以非常轻松地创建用户交互界面,设计简洁的状态视图,在数据改变时,高效地更新渲染界面,推荐视频：
https://www.bilibili.com/video/BV1Ya411F7fa
https://www.bilibili.com/video/av93927490
详细地来讲,它有以下的优势: 1. 使用虚拟DOM的概念,性能好,速度快。 2.虚拟DOM帮助解决了跨浏览器问题,并为我们提供了标准化的API。 3.代码一切皆是组件,更加模块化,重用代码更..Vue框架也起着同样的作用，笔者认为目前React、Vue不分伯仲，但是在学习成本上，Vue更容易学一些，更规范一些。
推荐教程：https://www.bilibili.com/video/BV1GL4y1v79M
vue还有一个优势，因为是中国人开发的框架，中文文档永远是最及时的，但是react推荐看英文，中文文档比较滞后，这也是缺点。
为了能更快的开发页面，很多团队通过react/vue框架进一步封装了组件库, 一是因为原生的太过丑陋无法满足正常人的美感，二是现在的交互越来越沉浸式，可以认为浏览器就是一个操作系统，每一个网站就像一款软件。
Redux/Vuex高级部分当页面越来越多，越来越复杂的时候，会需要对页面间的数据进行管理，或者组件间的数据，你就需要有管理数据的能力了，Redux等框架正是提供了以上的能力，还是推荐官网学习，不过此时希望大家对React掌握的比较熟悉了。
redux官网(https://redux.js.org/) vuex官网(https://vuex.vuejs.org/zh/)
lodash/underscore 复杂数据处理必学当js原生的方法map, filter直接使用无法满足你的需求， 比如下面的场景
找出两个数组中不一样的数据[3, 2, 1], [4, 2]
我们可以考虑引入lodash这样的库，它提供很多api来操纵我们常见的数据结构，比如array数组，object，类型判断，深copy等等
http与axios 前后端联调必备既然有前端、有后端，那两者肯定是需要共同完成一件大事的。如何配合，其实就是通过http这个网络传输数据的协议，http的一些知识是你必须要了解的，比如状态码，请求方式，请求参数，返回值等等。axios是目前最推荐的，完成前端给后端发http请求的一个工具库。简单来说 前端传给后端需要的数据， 后端返回前端需要的展示数据，或者保存前端的数据。
git 多人协作的工具使用场景：对于程序员来说，代码就是一切，可以作为程序员之间打交道的工具，代码也可以是说明文档，所以很容易出现写的代码有错误，需要还原到正确的代码，或者两个人修改同一个页面代码。
如何做到代码的改动不会丢失
保证两个人改一个文件的代码最终不会冲突
本地代码失误被删除，需要还原
为了解决以上问题，git代码版本管理工具是你必须要学会的。
git官网(https://git-scm.com/) git如何使用(https://git-scm.com/docs)
推荐快速学习可以搜索相关视频学习。
npm和webpackNpm使用场景：
当你使用react开发，使用redux等数据管理工具
当你为了保证你使用的react版本和其他合作开发者相同时
当你需要把你的代码开源，提供给其他人使用
为了解决以上问题，npm已经成为任何一个项目中必备的一个使用工具。
npm官网(https://www.npmjs.com/)
推荐视频：https://www.bilibili.com/video/BV1YU4y1g745?p=54
Webpack使用场景：
在本地与后端开发者进行接口调试
在本地进行页面的快速调试，无刷新调试
项目上线时，代码压缩到最精简状态，一方面安全，一方面节省网络资源
为了解决以上问题，webpack已经成为任何一个项目中必备的一个使用工具。
推荐视频：https://www.bilibili.com/video/BV1m4411i7zd
Jest单测最推荐的框架随着前端页面越来越复杂，单元测试成为保障前端页面安全的一道必备保障，
这些年Jest 一路崛起，超越曾经最常用的单元测试框架 Mocha，以 61.2% 的使用率成功占据榜首
以上是我总结的入门到精通都要必须学的前端领域, 打好基础才是最重要的。大家加油！！！