前端学习路线

时间  2021-08-12
标签 css html 前端 vue html5 react jquery webpack git es6 栏目 CSS 繁體版
原文   原文链接

前言


经过对前端知识进行一个评级，肯定如今阶段，而后提供清晰的学习路线，完成进阶。但愿能够经过这篇文章，能够帮助你们少走弯路。css

目标：html

  1. 了解本身的实力
  2. 明确不一样阶段的学习路线

大纲

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

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

level1 :

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

level2 :

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

level3 :

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

level4:

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

level5:

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

level6:

颈椎病康复指南
webpack

level1阶段

这一阶段，须要补充一些基础的前端知识，能够看点入门书籍git

  • 《Head First HTML与CSS（第2版）》



最好的入门书。看两遍就对HTML & CSS 有个大概印象了es6

  • 《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到页面加载的过程？如何由一道题完善本身的前端知识体系！来写，不一样点是会比这篇文章更加详细，也会从基础，安全，性能等角度来看待这一过程。

若是以为还不错的话，能够点赞，加收藏，来关注这一系列文章的输出。欢迎你们监督（催更）。

再次感谢

参考资料

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程