1. 编程号首页

前端学习路线

编程小号 • • 未分类

前端学习路线通过对前端知识进行一个评级，确定现在阶段，然后提供清晰的学习路线，完成进阶。希望可以通过这篇文章，可以帮助大家少走弯路。 可以熟练的进行平时的业务开发，但是对于JS高阶，源码，浏览器原理，数据结构与算法，设计模式，网络,前端工程之类的东西很迷茫，只知道一些大概的名词。这个时候，…

前言

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

目标：

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

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

再次感谢

参考资料

今天的文章前端学习路线分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/17841.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注