前端学习路线

前端学习路线通过对前端知识进行一个评级,确定现在阶段,然后提供清晰的学习路线,完成进阶。希望可以通过这篇文章,可以帮助大家少走弯路。 可以熟练的进行平时的业务开发,但是对于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的高阶用法
  • 对于原理的掌握

高阶用法

  • 冴羽的博客
    • 关于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 开发环境
  1. 原理
  • webpack构建步骤
  • 细说 webpack 之流程篇
  • Webpack HMR 原理解析
  • 从零实现webpack热更新HMR
  • 干货!撸一个webpack插件(内含tapable详解+webpack流程)
  • 手把手教你撸一个 Webpack Loader

其他

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

总结

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

后续文章的输出规划

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

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

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

再次感谢

参考资料

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

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

(0)

相关推荐

  • Python Listbox with Tkinter: 完全指南

    Python Listbox with Tkinter: 完全指南Tkinter是Python中常用的图形用户界面(GUI)工具包之一。Tkinter具有一系列的小部件,可以轻松创建各种类型的GUI应用程序,其中之一是Listbox。Listbox是一个小部件,用于在窗口中显示一系列的项目,并允许用户通过单击列表中的项目进行选择。

    2024-01-14
    24
  • MySQL高可用架构-MMM、MHA、MGR、PXC(补小结,laoqi)[亲测有效]

    MySQL高可用架构-MMM、MHA、MGR、PXC(补小结,laoqi)[亲测有效]小结 MMM是 MHA是 MGR是 主从复制如何工作 在主库把数据记录到binlog(二进制日志)。 备库开IO线程把binlog复制到自己的relaylog(中继日志)。 备库读取中继日志,重放到备

    2023-04-24
    77
  • 代码大全在线阅读_代码随想录

    代码大全在线阅读_代码随想录其他著作包括《快速软件开发》、《软件项目生存指南》和《软件估算——黑匣子揭秘》等。《卓有成效的敏捷》讨论了公司关心而敏捷纯粹主义者常常忽略的主题

    2022-12-14
    114
  • 行列式的求解方法_行列式

    行列式的求解方法_行列式行列式的计算前言一、对角线法二、代数余子式法三、等价转化法四、逆序数法总结本文主要讲述行列式的求解方法,所以本文侧重于方法的讲解,而并非推导。主要思路为从三阶行列式举例,再过渡到高阶行列式的通用方法_行列式的计算方法

    2023-08-22
    54
  • Python计算0的正弦值

    Python计算0的正弦值正弦函数是一个周期为2π的连续函数,被广泛应用于科学计算和工程领域。在数学上,它是一种三角函数,通常用sin(x)表示,其中x是角度。然而,在一些数值计算中,需要对0进行正弦值计算,这时可以使用泰勒级数展开进行计算。泰勒级数是将一个特定的函数展开成无穷级数的方法,而正弦函数的泰勒级数为:

    2024-01-20
    17
  • mysql整体迁移_anaconda环境迁移

    mysql整体迁移_anaconda环境迁移一次生产环境mysql迁移操作(一)数据归档 一次生产环境mysql迁移操作(二)mysql空间释放(碎片整理) 背景 在项目过程中我们经常要对数据库进行迁移、归档、拆分等等操作,现在描述下几种方案…

    2023-01-25
    82
  • 如何查询sql语句的条件字段是否使用了索引以及跳过索引的几种情况[通俗易懂]

    如何查询sql语句的条件字段是否使用了索引以及跳过索引的几种情况[通俗易懂] 今天执行通过时间范围查询订单数量的sql时,想看看该时间字段是否走了索引,发现一个很有意思的问题. 首先说一下查询是否使用了索引的方法 通过explain来查看,即将explain放在查询的…

    2023-03-27
    75
  • 一个半月减掉20斤_减肥药一个月瘦20斤正常吗

    一个半月减掉20斤_减肥药一个月瘦20斤正常吗最近在网络上,降糖药“司美格鲁肽”火了,成为备受瘦身人群追捧的“减肥神药”,还曾一度断货。市民吴女士由于日常工作繁重,饮食、作息不规律,体重最高

    2023-07-12
    61

发表回复

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