前端学习路线

BOM485480 2020-11-13 12:22:04
前端 学习 CSDN 路线


前言

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

目标:

了解自己的实力

明确不同阶段的学习路线
在这里插入图片描述
大纲

对前端知识进行一次评级

level1阶段

level2阶段

JavaScript进阶

Vue进阶

浏览器原理

数据结构与算法

设计模式

网络

性能优化

前端工程化

其他

总结

后续文章的输出规划

参考资料

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

level1 :

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

level2 :

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

level3 :

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

level4:

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

level5:

这个层次我还没达到,大概是一些架构,整体把控,大型项目构建,项目管理,资源分配等等能力了吧。

这是一个由术转道的过程,已经不在专注于哪一个端,而在于对整体的把控了。(对这个阶段没有什么认知,小声逼逼)

level6:

颈椎病康复指南

在前端领域混了这几年,总结了一套前端学习的精讲视频和学习路线,如果有对前端开发感兴趣的伙伴,不管你是想转行,或是大学生,还有工作中想提升自己能力的web前端党,欢迎大家的加入我的前端开发交流群:603985993
希望大家诚心交流!,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号:【前端留学生】
每天更新最新技术文章干货。

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

原理的掌握

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

原理

webpack构建步骤

细说 webpack 之流程篇

Webpack HMR 原理解析

从零实现webpack热更新HMR

干货!撸一个webpack插件(内含tapable详解+webpack流程)

手把手教你撸一个 Webpack Loader

其他

JavaScript 正则表达式迷你书

前三章,满足日常的基本使用

深入了解的话需要看剩下的东西

正则可视化

TS入门教程

还真就是入门的文章

TypeScript Handbook(中文版)

看完入门课程,可以接下来看这个

总结

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

版权声明
本文为[BOM485480]所创,转载请带上原文链接,感谢
https://blog.csdn.net/BOM485480/article/details/109198137

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple