前端学习路线

前言

通过对前端知识进行一个评级，确定现在阶段，然后提供清晰的学习路线，完成进阶。希望可以通过这篇文章，可以帮助大家少走弯路。

目标：

1. 了解自己的实力
2. 明确不同阶段的学习路线

大纲

• 对前端知识进行一次评级
• level1阶段
• level2阶段
• JavaScript进阶
• Vue进阶
• 浏览器原理
• 数据结构与算法
• 设计模式
• 网络
• 性能优化
• 前端工程化
• 其他
• 总结
• 后续文章的输出规划
• 参考资料

对前端知识进行一次评级(定级赛)

level1 :

没有接触过前端，对于前端没有什么概念

level2 :

使用js,css,html可以完成简单页面的还原，但是还不会使用库

level3 :

使用库，比如说vue,jquery完成普通业务的开发，比如说一些活动落地页和后台管理页面

level4:

可以熟练的进行平时的业务开发，但是对于JS高阶，源码，浏览器原理，数据结构与算法，设计模式，网络,前端工程之类的东西很迷茫，只知道一些大概的名词。这个时候，我们就需要根据个人喜好来进行深入的研究了

level5:

这个层次我还没达到，大概是一些架构，整体把控，大型项目构建，项目管理，资源分配等等能力了吧。
这是一个由术转道的过程，已经不在专注于哪一个端，而在于对整体的把控了。（对这个阶段没有什么认知，小声逼逼）

level6:

颈椎病康复指南

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灵魂之问(下), 冲刺🚀进阶最后一公里(附个人成长经验分享)
• 中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)
• (中篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂
• (下篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂

原理的掌握

• 《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 开发环境

3. 原理

• webpack构建步骤
• 细说 webpack 之流程篇
• Webpack HMR 原理解析
• 从零实现webpack热更新HMR
• 干货！撸一个webpack插件(内含tapable详解+webpack流程)
• 手把手教你撸一个 Webpack Loader

其他

• JavaScript 正则表达式迷你书
  • 前三章，满足日常的基本使用
  • 深入了解的话需要看剩下的东西
• 正则可视化
• TS入门教程
  • 还真就是入门的文章
• TypeScript Handbook（中文版）
  • 看完入门课程，可以接下来看这个

总结

通过上面的介绍，大家应该对不同的阶段有了清晰的路线了吧，希望大家可以在日后的职业生涯继续驰骋吧。（申明，本文不是前端劝退文章）

后续文章的输出规划

在最近的学习过程中，发现在网络，浏览器，性能优化,JS进阶等部分不同的知识发生了好多的交叉，接下来想通过URL到渲染完成这道经典问题，来梳理一下这些知识，构建前端的知识体系。

这一系列的主体脉络会按照从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！来写，不同点是会比这篇文章更加详细，也会从基础，安全，性能等角度来看待这一过程。

如果觉得还不错的话，可以点赞，加收藏，来关注这一系列文章的输出。欢迎大家监督（催更）。

再次感谢

参考资料

• LienJack的艺术喵 2 年前端面试心路历程（字节跳动、YY、虎牙、BIGO）| 掘金技术征文