前端|前端学习路线面试|前端|html|JavaScript|编程语

前言
通过对前端知识进行一个评级，确定现在阶段，然后提供清晰的学习路线，完成进阶。希望可以通过这篇文章，可以帮助大家少走弯路。
目标：
了解自己的实力
明确不同阶段的学习路线

文章图片

大纲
对前端知识进行一次评级
level1阶段
level2阶段
JavaScript进阶
Vue进阶
浏览器原理
数据结构与算法
设计模式
网络
性能优化
前端工程化
其他
总结
后续文章的输出规划
参考资料
对前端知识进行一次评级(定级赛)
level1 :
没有接触过前端，对于前端没有什么概念
level2 :
使用js,css,html可以完成简单页面的还原，但是还不会使用库
level3 :
使用库，比如说vue,jquery完成普通业务的开发，比如说一些活动落地页和后台管理页面
level4:
可以熟练的进行平时的业务开发，但是对于JS高阶，源码，浏览器原理，数据结构与算法，设计模式，网络,前端工程之类的东西很迷茫，只知道一些大概的名词。这个时候，我们就需要根据个人喜好来进行深入的研究了
level5:
这个层次我还没达到，大概是一些架构，整体把控，大型项目构建，项目管理，资源分配等等能力了吧。
这是一个由术转道的过程，已经不在专注于哪一个端，而在于对整体的把控了。（对这个阶段没有什么认知，小声逼逼）
level6:
颈椎病康复指南

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993
希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】
每天更新最新技术文章干货。

level1阶段
这一阶段，需要补充一些基础的前端知识，可以看点入门书籍
《Head First HTML与CSS（第2版）》

文章图片

最好的入门书。看两遍就对HTML & CSS 有个大概印象了
《JavaScript DOM编程艺术》

文章图片

最好的JS入门书籍，一目了然地告诉你如何用JS操作DOM（这是浏览器端编程的基本功），还灌输了最符合标准的编程理念
《JavaScript高级程序设计（第3版）》

文章图片

学习基础的JavaSrcipt语法
基础的话可以看1-,8,10,11,13,21，22，23,24章节
level2阶段
这一阶段是对于一些类库的使用
《JavaScript高级程序设计（第3版）》
没错，就是它，你还是需要再看一遍
《锋利的jQuery》

文章图片

入门必备，讲JS最著名的库——jQuery的，快速入门的书。光会原生JS不够，还要会用库，
Vue
Vue对于新手还是比较友好的（只看过Vue，不敢逼逼）。这个直接看官网的教程就可以了
官网教程
《ES6 入门教程》

文章图片

线上版地址
起码过一遍，了解ES6的基础用法，代理那一部分可以先不看
JavaScript进阶
这一部分，可以分成俩个部分
对于JS的高阶用法
对于原理的掌握
高阶用法
冴羽的博客
关于js的一些讲解通俗易懂
深入系列对于js一些难点的讲解，看的豁然开朗
专题系列一些手写代码的讲解
underscore 系列
ES6 系列
函数式编程指北
木易杨前端进阶
类似于冴羽的博客的博客，也是对一些js难点的整理
(1.6w字)浏览器与前端性能灵魂之问，请问你能接得住几个？（上）
(建议收藏)原生JS灵魂之问, 请问你能接得住几个？(上)
(建议精读)原生JS灵魂之问(中)，检验自己是否真的熟悉JavaScript？
(2.4w字,建议收藏) 原生JS灵魂之问(下), 冲刺进阶最后一公里(附个人成长经验分享)r/> 中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)r/> (中篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂r/> (下篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂
原理的掌握
《JavaScript高级程序设计（第3版）》
没错，就是它，你还是需要再看一遍（这已经是第n遍了）
《ES6 入门教程》
线上版地址
再来一遍
《你不知道的JavaScript》系列
《你不知道的JavaScript(上卷)》
内容：作用域和闭包以及this和对象原型
重要性：这本书可以重点看下
《你不知道的JavaScript(中卷)》
内容：类型、语法、异步和性能
关于类型，语法部分讲得还可以
异步的话可以去看《ES6标准入门》
性能部分的话，不推荐看
《你不知道的JavaScript(下卷)》
内容：JavaScript入门知识和对ES6及未来发展趋势的展望
JavaScript入门知识部分可以看下，是对前俩本的总结以及一些语法的内容
ES6部分的话不推荐看
《深入理解ES6》
这本书可以在看完《ES6 入门教程》之后去看
《JavaScript 忍者秘籍》
一定要买第二版
Vue进阶
剖析 Vue.js 内部运行机制
vue内部的基础原理的理解，初级程度
《深入浅出Vue.js》，
作者每单介绍一个部分的时候，都会由最简单抽象的一个demo，一步一步变成框架实际的样子，最后拿你写的demo和框架实际的对比，分析双方优缺点。
Vue.js 技术揭秘
源码解析，中等程度
vue全面解析
超级详细 - 逐行级别的分析
下载代码，然后使用elegant分支
浏览器原理
浏览器工作原理与实践
生动有趣的讲述了浏览器的原理，推荐看
《webkit技术内幕》
基本上讲浏览器内核各个类的功能和调用关系，如果要深入去看的话，需要读者一些C++基础
浏览器的工作原理：新式网络浏览器幕后揭秘
对于浏览器的架构，还有浏览器整个解析渲染过程描述的比较详细
深入了解现代web浏览器
文章为英文，比较详细的说明浏览器工作原理
Inside look at modern web browser (part 1)
Inside look at modern web browser (part 2)
Inside look at modern web browser (part 3)
Inside look at modern web browser (part 4)
Rendering on the Web
Page Lifecycle API
Life of a Pixel
这个演讲一开始是Chrome组新人入职的学习资料，给新人一个从高层次去看Chromium如何从HTML / CSS / JS 显示到屏幕的网页
数据结构与算法

文章图片

盗一张图
最近在学习数据结构与算法之美，上面是王争老师推荐的书单，可以按照需求去读对应的书籍
设计模式
《JavaScript设计模式与开发实践》

文章图片

推荐看下
汤姆大叔的博客
深入理解JavaScript系列里面包含有各种深入以及设计模式
网络
《图解http》
满足日常的基本使用
入门级别
《图解 tcp 协议》
入门级别
极客时间-透视 HTTP 协议
这个课程通过历史，定义，安全，性能等多个方面讲解了http协议
可以比较全面的了解网络知识
TCP/IP 详解（第一卷）
深入讲解的TCP/IP
性能优化
推荐的三本书籍，比较全面的进行性能优化
浏览器的优化可以看谷歌和MDN部分，比较深入，也和前端的比较贴近
《高性能网站建设指南》
《高性能网站建设进阶指南》
《Web性能权威指南》
谷歌开发团队的性能优化
针对浏览器部分进行性能优化，里面从关键 RAIL 指标进行性能优化的分析，可以做参考
MDN性能优化
和谷歌类似，从浏览器角度进行性能优化
前端工程化
这部分还在计划学习中，这里可以参考LienJack的前端工程化部分
使用和基本概念
了解 loader、plugin，并且掌握一些基本常用的
了解 babel
参考资料：玩转webpack
学会优化
体积优化：tree shaking、按需引入，代码切割
打包速度优化：缓存、多线程打包、优化打包路径
参考资料：
那些花儿，从零构建Vue工程
Webpack 4 配置最佳实践
webpack4 的30个步骤打造优化到极致的 react 开发环境
原理
webpack构建步骤
细说 webpack 之流程篇
Webpack HMR 原理解析
从零实现webpack热更新HMR
干货！撸一个webpack插件(内含tapable详解+webpack流程)
手把手教你撸一个 Webpack Loader
其他
JavaScript 正则表达式迷你书
前三章，满足日常的基本使用
深入了解的话需要看剩下的东西
正则可视化
TS入门教程
还真就是入门的文章
TypeScript Handbook（中文版）
看完入门课程，可以接下来看这个
总结
【前端|前端学习路线】通过上面的介绍，大家应该对不同的阶段有了清晰的路线了吧，希望大家可以在日后的职业生涯继续驰骋吧。（申明，本文不是前端劝退文章）