前端学习路线及面试经验

前言

我的主页

原文连接

掘金

知乎&知乎专栏

本人从大二上学期到如今学习前端已将近有3年时间了，最近利用毕业论文写完的一些空余时间写一下这篇文章，用于分享一些我的的前端学习经验，以及一些面试经验，不必定适合每一个人，不喜勿喷，同时欢迎你们提出建议。

学习路线

整体的来讲前端无非就是html、css、js只要把这三样的基础打好，什么都不是问题。他们的难易程度也是html < css < js，因此学习路线也是从html->css->js或者html&css->js。而个人学习路线是后者。

总的来讲，在学完一个新东西的时候建议最好用新东西手撸个玩意出来。必定要动手实操！

html&css

首先这部分的学习我是看了一本叫Head First HTML&CSS的书，这本电子书能够到网上下载。这本书与平时看到的书有点不同，这本书至关是手把手教你如何完成一个静态网站，虽然书有点老，可是拿来入门仍是不错的。

看完这本书之后你的html&css基本上算是入门了，能够本身撸个我的主页或者博客什么的。看完书以后不动手撸个什么小玩意出来是不行的，光说不练等于白看。

这个时候若是感受还须要加深html&css的话推荐精通CSS（第2版）这本书，能力强的同窗能够去学学bootstrap，这是大名鼎鼎的前端html&css框架。会用了（其实也就是html标签上bootstrap事先加定义好的类名，没太大难度）之后就去看看bootstrap的源码。注意，这里所说的源码不是吧boosstrap.css从头看到尾，那会疯的。看的源码是你用到的那几个类名的源码。能够经过谷歌控制台去看，选中一个标签，而后在styles那看人家是怎么定义这个样式的。

感受差很少之后就得实际操做了，能够到这里的最下面的第一阶段任务去练练手。

我的感受这第一阶段任务仍是挺适合新手去作的。先尽可能不要使用任何框架，本身去手撸出来。最后无论撸没撸出来都要去看看人家是怎么完成这项任务的，学习一下人家怎么解决问题的。前提必定是本身得先去思考。

固然今年(2018年)的百度前端技术学院也是更加给力了，也有从0基础开始手把手教你如何完成一个页面。传送门

git&github

这里插播一条git的学习指南，有的同窗可能想要让本身的做品能让你们看到可是又没有本身的服务器的话怎么办？

那么这里就得借助github和github pages了。首先你得明白怎么用git&github，这里有份教程，我的以为还不错。

知道git&github怎么用之后，就利用github pages让别人看到咱们的做品。

首先，利用git在本地建立gh-pages分支（注意：必定要是gh-pages分支），而后将各类资源用git推送到github对应仓库的gh-pages分支上（至于怎么操做不在这里详细说明，教程里已经说得很清楚了）

推送成功之后浏览器打开github用户名.github.io/仓库名/对应的html。举个例子，我在github上的用户名是JayZangwillJayZangwill，而后个人仓库名是blog，而后这个仓库下的gh-pages分支有个index.html文件，这个时候访问的地址就是jayzangwill.github.io/blog/index.…。由于github pages默认以index.html文件做为入口，因此以上连接可简写为jayzangwill.github.io/blog。

git&github是现代公司团队合做的重要工具，无论你处于前端的哪一个阶段，git&github都是必学的，是逃不掉的。

js

若是百度前端技术学院的16年第一部分任务可以作差很少出来就能够学js了，若是感受仍是没有什么收获的话就得去面壁过了。

若是说html&css是餐前甜点的话js就是正餐了，js比html&css的难度高出不止一个档次，可能有些小伙伴看到js的时候就打算放弃了。这个时候建议不要慌，慢慢来节奏稍微慢一点。当时我刚看js的时候看的是看的是Head First JavaScript，结果一点都看不懂，看到一半就放弃了。因而百度搜了前端js入门书籍，结果搜到了JavaScript DOM编程艺术。这也是我比较推荐的一本入门书籍，若是能坚持看完，你的js就算入门了。

固然js的学习路径有不少，以上的路径不必定适合全部人，也能够去网上搜些视频，好比去慕课网上去看看。

当感受本身js学得差很少的时候能够找些练手的网站来加深对知识点的理解。我的推荐的网站有2016百度前端技术学院第二部分js基础部分，Free Code Camp。当遇到不认识的api或知识点时能够到MDN上去查。

感受本身js基本功差很少了之后，下一步就开始学习es6或者jQuery了。因为前端三大框架的出现，致使jQuery的地位受到动摇，若是没有万恶的ie的话，jQuery很快就要退出历史舞台了。不过就目前状况来看，jQuery在前端仍是占有很大份额的，因此学习jQuery仍是颇有必要的。学习jQuery的话我只推荐一本Head First jQuery，看完这本书便可。对于es6来讲这是js在15年出的新规范、新语法，内容较多因此能够单独抽出一块来学习，这里我推荐阮一峰前辈的es6入门。

当es6看完之后就能够去学习前端的三大框架了，分别是Angular、Vue、React。固然也不是三个都要学，只需学好其中一个或者多个便可。就目前国内的状况来看Vue和React用的最多，而Vue相对React来讲相对好学一点（ps:最近博主在学习React），因此我推荐的话Vue是比较好的一个切入点。另外附上Vue的官方教程，我的认为官方教程已经写得很全面了，因此学Vue的话官方教程便可。React的话最近我也是在学习阶段，我这里就直接粘个官方教程吧。注意：学习它们以前必定要把es6看了，由于教程中用了一些es6的语法，为了防止文档看不懂，因此建议先把es6过了。

js是我在大学中花的时间比较多的地方，也是前端最重要的部分，想要学好它，光是按照我上面说的是不够的，更多的是须要你不断在实践中总结，发现问题和解决问题。有必要时能够去看别人是怎么写js代码的，或者看看框架的源码，这样学到的才更多。

gulp&webpack

当你在前端的道路上走了一段距离的时候会发现想要一些东西来提升本身的开发效率，gulp&webpack就可以知足你。这些自动化工具可以自动编译代码、压缩静态资源、自动刷新浏览器等。

首先是gulp，gulp想要上手很容易，百度上搜一搜就有不少入门教程，这里推荐一篇gulp入门教程（我不会说我是从百度随便搜来的），虽然是我从百度上随便扒下来的可是足够入门了，毕竟gulp上手仍是很容易的。这里还推荐一下个人gulp配置，可以知足大部分人的需求了。把gulpfile.js和package.json复制到本地，而后按照说明操做便可。

另外附上gulp的插件搜索地址，搜出来的插件都会告诉你如何去配置，通常状况下只需把介绍上的配置复制上来便可。如图是gulp-uglify的介绍。

至于webpack，它上手可能会比较难，由于配置会比较繁琐（webpack4听说把一些东西内置了，能够不用配置文件就能够用）以为比较难的同窗能够先把webpack先放一放，前期的话gulp基本就能够知足需求。学习webpack的话感受仍是看官方文档比较好。同时，你们能够看看个人vue-cli多页面模板。

不过最近新出了个叫parcel的东西，号称极速零配置Web应用打包工具，你们能够了解一下。

这里有人可能会问为何不学grunt？emm...这东西已是过期的产物，有兴趣的同窗能够去了解了解，不论如何gulp&webpack最终仍是必需要掌握的。

sass&less

sass和less都是css的预编译语言，它们没必要两个都学，学了其中一个另一个天然就会。我我的的话是学了sass，是在慕课网上学的，学习的话只需学习前两个便可。

至于less的话，看官方文档吧，less或sass学完之后能够尝试把之前写过的css用sass或者less重写一遍用于加深对知识的理解吧。另外个人那个gulp配置默认是支持sass的编译的，若是用了个人那个gulp配置的同窗且是学sass的就不用本身配置了，若是学less的同窗得须要本身配置一下。

nodejs

若是还有余力的同窗能够去学学node，目前有些公司对会node的前端是加分项，这里推荐一本书了不得的nodejs

一些学习网站推荐

至此，前端须要掌握的技能和学习路线已经说完了。这里推荐一些前端的进阶网站和一些论坛，让你们在前端路上走得更远。

1. 掘金 在这里会有不少高质量的文章，我也常常在这逛的。
2. 知乎 这里是大佬的世界
3. stack overflow 国外的一个超高质量技术论坛，你能够在这里提问，与国外大佬交流
4. SegmentFault 国内版的stack overflow
5. w3cplus 大漠老师创办的技术论坛
6. Free Code Camp 在线学习网站
7. 百度前端技术学院 百度从15年到如今每一年都会创办的技术学院
8. 前端月报 这里会有人每月上传上一个月的一些高质量文章
9. 更多

一些书籍

1. JavaScript高级程序设计（第3版） 红宝书，不解释，听说今年7月要出第四版，很期待啊。
2. JavaScript权威指南 传说中的犀牛书
3. 你不知道的JavaScript 有上、中、下三卷
4. JavaScript语言精粹 传说中的蝴蝶书
5. JavaScript设计模式
6. css揭秘 介绍了一些实用的css3新特性
7. CSS权威指南（第三版）
8. 更多

面试知识点

接下来这些面试知识点，主要是针对实习生和应届生的，偏基础。有多年工做经验或者基础好的同窗能够Ctrl+W了。

通常面试的时候面试官都是针对你简历上所写的来问，因此你会什么就写什么，不会的就别写上去了，以避免面试的时候问到不会就尴尬了。

计算机基础

这里把计算机基础放在第一位是由于有不少人忽略计算机基础，前端是属于计算机行业的，不论什么方向，只要这个方向和计算机相关，就必须把计算机基础打好。同时，计算机基础也是面试官在面试实习生和应届生比较注重的一方面。

数据结构和算法

数据结构在我面试印象中是考察得最多的计算机基础。

首先是各类排序算法，冒泡啊，选择啊，快速啊一些经常使用排序算法，我不建议你们去死记硬背这些算法，而是去记它的思想，这样代码天然就会出来。完以后有些面试官会问它们的时间复杂度，怎么得出的这个个时间复杂度。

而后到树的遍历，广度优先，前、中、后序遍历。

还有就是斐波那契数列，算法的时间复杂度为O(n)和O(n^2)的两种实现。

计算机网络

tcp的三次握手和四次挥手过程，以及为何要三次握手，四次挥手。

get和post的区别，建议看一下这篇文章。

http与https区别。

tcp与udp区别。

7层网络架构。

常见http状态码，301与302区别。304与200(form cache区别)，建议联系强制缓存与协商缓存来解释。

操做系统

什么是进程，什么是线程以及他们的区别。

什么是死锁，怎么产生的，怎么解决。

前端面试知识点

html部分

这部分问的会比较少，由于实在没什么能够问的我所总结的知识点以下：

1. 什么是html语义化，为何要语义化，有什么好处，怎么作。
2. html5新加的标签。
3. 有哪些行内元素，有哪些块元素。

css部分

1. inline与block与inline-block区别（即行内元素与块元素与行内块元素的区别），以及inline与inline-block元素间会有莫名的间距这个是怎么产生的，怎么解决。
2. position取值，以及他们之间的区别，并且是相对于谁定位的。父辈元素设置transform致使fixed定位失效状况。
3. 浮动形成的问题，以及如何清除浮动，清除浮动的原理，由此引出BFC的概念，什么是BFC，有什么特性。
4. 盒模型的组成，有哪些盒模型，以及如何互相转换。对于盒模型和定位的概念能够看个人这篇文章。
5. animation和transition区别。
6. padding和margin的单位设置为%时，这个%是相对于谁。
7. 水平垂直居中的多种实现方式。
8. css选择器的权重

js部分

以前也说了，js是前端最重要的部分，同时也是面试问的最多的，这里推荐我以前写的三篇文章：几个让我印象深入的面试题(一)、几个让我印象深入的面试题(二)、四月北京面试之旅，同时js部分的知识点总结以下：

1. js的数据类型（一共7种）
2. this指向（注意严格模式下的this指向和箭头函数的this指向）
3. new的过程
4. 做用域与做用域链
5. 什么是闭包，闭包的做用及缺点（建议与做用域联系起来说）
6. 原型与原型链，以及如何实现继承（多种实现方式，建议翻看红宝书继承部分或者看我博客关于继承的讲解，把es6的继承加上效果更佳）。
7. js的事件循环即Event Loop（macro task queue 和 micro task queue了解一下，宏任务包括哪些，微任务包括哪些，以及它们的执行顺序）
8. 前端跨域，什么状况会跨域，怎么解决，以及它们的优缺点，手写一下jsonp。
9. XSS攻击与CSRF攻击怎么攻击以及怎么防护。这里推荐一下这篇文章。
10. 深拷贝与浅拷贝的区别，以及怎么实现（有的面试官会在这里问递归有什么缺点）。
11. ajax的过程，以及状态0~4分别发生了什么（有的面试官会让你手写ajax）。
12. es6新加的新特性。
13. Promise的三个状态，以及介绍一下async函数。
14. js事件的冒泡、捕获，及它们的区别，事件的三个过程。
15. 浏览器的缓存机制（强制缓存cache-control、协商缓存if-modified，if-modified-since，e-tag了解一下）。
16. cooike与session与localStorage、sessionStorage区别，以及localStorage和sessionStorage区别。

vue部分（由于我简历上写了会vue）

1. 双向数据绑定原理，这里推荐一下这篇文章
2. vue的生命周期，这里推荐一下大漠老师的这篇文章还有掘金上的这篇文章
3. vue组件的数据传递（包括父->子、子->父，兄弟间，非兄弟）
4. 前端路由的实现，这里推荐这篇文章

结语

本文写了前端的学习方向，还有前端的面试的重点，仅针对实习和应届的同窗。知识点有漏的话会在后期补上。你们有什么想法能够在底下留言。