说在开始的话：

我上大学那会，虽说主要是学Java语言，但是web前端也稍微学了一些，那时候对前端也没多在意，因为涉入的不深，可以搞一个差不多可以看的界面就可以了，其他也没过多在意。

因为稍微了解一点点前端，所以看到前端相关资源的时候，总是也会忍不住也收藏下来，这篇文章就把我平时看到的一些关于WEB前端知识体系的脑图给列举出来，因为我一直觉得在学习每门语言之前一定要对这门语言有个概况性认知，不然连自己学到什么程度都不知道（就如我上大学学前端一样，以为前端就这么简单，结果……）。

1、2015-2016前端知识体系

2015-2016前端知识体系.jpg

这是我在看【2015-2016前端知识体系】这篇文章时，看到的这个脑图，文章也对脑图进行了详细的介绍，可以看看哦，看完后相信你对整个前端会有个概况性的认知的~

2、[Web前端工程师]学习路径

Web前端工程师.png

这个是我在看实验楼学习网站上的【Web前端工程师】学习路径时看到的，主要是里面有很多的项目课程，这在学完基础之后是非常有用的，多做一些小项目开发始必须的。

3、[前端工程师]需要涉及的知识

front-image.jpg

这个在【@拔赤】的微博里保存下来的一张图，分享这张图所带的文字是：“2012前端工程师知识结构”。

4、前端知识脑图

前端知识脑图.jpg

这张脑图呢，是在（@寒冬winter）的微博里保存下来的一张图，分享这张图所带的文字是：秋季校招快开始了，我来提前划个重点吧……

嗯，关于前端的知识结构就分享这4张吧，因为我看了看其他的几张也都大同小异，主要是我没记录图片的出处(>_<)，所以就不放出来了，我想以上四张对于前端的认知就足够了，对于想入门做前端工程师的小伙伴也是足够了，剩下的就需要踏踏实实的学基础，以及勤动手了。

5、前端测试工具

前端测试工具.png

最后再分享一张前端测试工具的图，但是这张图片我不知道出处了，所以请原作者看到后一定要记得联系我啊，我加上出处。分享这张图的目的是：在我们学习的过程中，往往不太知道怎样进行测试，也不太注重这方面，但是测试确实很重要滴，所以就分享出来了。

说在后面的话

其实上面的图片呢也只能帮助想入门的小伙伴，对于已经入门的小伙伴就需要自己去积极的找一些资源了，我把我看到的一些资源发出来吧，可以参考参考：

• 前端小白到大神，不可不收藏的网站合集
• 关于前端面试相关的资源整理
• 20个为前端开发者准备的文档和指南