前端学习路线

前言通过对前端知识进行一个评级，确定现在阶段，然后提供清晰的学习路线，完成进阶。希望可以通过这篇文章，可以帮助大家少走弯路。目标：了解自己的实力明确不同阶段的学习路线 大纲对前端知识进行一次评级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不够，还要会用库，VueVue对于新手还是比较友好的（只看过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 WebPage Lifecycle APILife 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（中文版）看完入门课程，可以接下来看这个总结通过上面的介绍，大家应该对不同的阶段有了清晰的路线了吧，希望大家可以在日后的职业生涯继续驰骋吧。（申明，本文不是前端劝退文章）

本文章由javascript技术分享原创和收集