前端学习路线

63,060 阅读9分钟

前言


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

目标

  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的高阶用法
  • 对于原理的掌握

高阶用法



原理的掌握

  • 《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分支

浏览器原理

数据结构与算法



盗一张图
最近在学习数据结构与算法之美,上面是王争老师推荐的书单,可以按照需求去读对应的书籍

设计模式

  • 《JavaScript设计模式与开发实践》



  • 推荐看下

  •  汤姆大叔的博客

    • 深入理解JavaScript系列 里面包含有各种深入以及设计模式

网络

  • 《图解http》
    • 满足日常的基本使用
    • 入门级别
  • 《图解 tcp 协议》
    • 入门级别
  • 极客时间-透视 HTTP 协议 
    • 这个课程通过历史,定义,安全,性能等多个方面讲解了http协议
    • 可以比较全面的了解网络知识
  • TCP/IP 详解(第一卷)
    • 深入讲解的TCP/IP

性能优化

推荐的三本书籍,比较全面的进行性能优化
浏览器的优化可以看谷歌和MDN部分,比较深入,也和前端的比较贴近

  • 《高性能网站建设指南》
  • 《高性能网站建设进阶指南》
  • 《Web性能权威指南》
  • 谷歌开发团队的性能优化
    • 针对浏览器部分进行性能优化,里面从关键 RAIL 指标进行性能优化的分析,可以做参考
  • MDN性能优化
    • 和谷歌类似,从浏览器角度进行性能优化

前端工程化

这部分还在计划学习中,这里可以参考LienJack的前端工程化部分

  • 使用和基本概念
    • 了解 loader、plugin,并且掌握一些基本常用的
    • 了解 babel

参考资料:玩转webpack

  • 学会优化
    • 体积优化:tree shaking、按需引入,代码切割
    • 打包速度优化:缓存、多线程打包、优化打包路径

参考资料:

  1. 原理

其他

总结

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

后续文章的输出规划

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

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

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

再次感谢

参考资料