一、基础知识

1. CSS：
   1. 目标：常见页面布局（flex等）、CSS3 新特性、
   2. 参考书籍：
      1. CSS 世界
      2. 精通 CSS
2. JS
   1. 目标：
      1. JS的原始类型
      2. JS中的引用类型
      3. 迭代器和生成器
      4. 面向对象编程 和 函数式编程
      5. 代理 和 反射 （ Proxy 和 Reflect ）
      6. 函数表达式：闭包、this指针、模块模式、箭头函数等  => 函数式编程
      7. 异步编程
      8. BOM 和 DOM
      9. Canvas
      10. 了解常用事件
      11. 了解常用API
      12. 错误处理：如何处理及处理中的几种方式
      13. 请求数据和资源的方式：XMLHttpRequest 和 Fetch API
      14. 客户端存储
      15. 模块加载方式 
      16. 工作者线程、共享工作者线程及服务工作者线程
      17. 企业级开发过程中进行JS编码的最佳实践
   2. 参考书籍：
      1. JavaScript 高级程序设计（第四版）

二、前端框架

1. Vue：
   1. 目标：做过Vue项目、熟练掌握Vue基础知识、掌握Vue周边生态、了解Vue的实现原理及Diff算法、能够封装独立的组件，具有自己的开源项目
   2. 参考书籍：
      1. Vue.js 实战
      2. Vue官方文档
2. React
   1. 目标：浅应用React框架、使用过React完成小型项目，了解React周边，了解ReactDiff算法及Vue的区别
   2. 参考书籍：
      1. React 进阶之路
      2. 深入了解React 技术栈

三、前端工程化开发

1. webpack / gulp
   1. 目标：了解webpack，掌握webpack核心配置，能够自主解决构建配置等问题
   2. 参考书籍
      1. webpack官方文档
      2. 深入浅出webpack
2. git
   1. 目标：熟练使用 git 仓库管理自己代码，使用git进行合作开发
   2. 参考书籍：
      1. Git 版本控制管理

四、扩展语言

1. TypeScript
   1. 目标：了解 TS 和 JS 的区别、JS的新特性、TS的核心语法、TS编译、TS错误处理、TS开发与测试、TS编码风格，构建小型TS项目
   2. 参考书籍：
      1. TS 中文文档
      2. 深入理解TypeScript
2. Scss / Less
   1. 目标：熟练掌握 Scss / Less 的语法，在项目中应用
   2. 参考书籍：
      1. Scss / Less 官网

五、服务端 

1. Node
   1. 目标：了解Node概念，Node模块机制、异步IO、Node中的内存控制、Buffer、Node 中支持的TCP / UDP / HTTP 编程、Node单元测试及性能测试，熟悉Express / Koa
   2. 能够使用Node搭建小型后台
   3. 参考书籍：

1. 1. 1. 深入浅出Node
      2. Node.js 设计模式

六、其他

1. 对前端性能优化具有一定的见解
2. 了解一定的web安全相关知识
3. 了解浏览器原理、调试、编译原理、JS解释器等底层原理
4. 了解Echarts、HighChart、百度地图等可视化操作
5. 了解一些算法实现：实现debounce、实现throttle、实现bind、call、apply、实现Promise、二叉树深度等

 0、开发环境的搭建

1、掌握前端基础功

按顺序学习 HTML、CSS、JavaScript，它们分别是网页的骨架、衣服、动作。

学习前端的网站有很多，可以在下面两个网站配合学习。

WEB前端开发工具+安装教程https://jq.qq.com/?_wv=1027&k=6vfSFKaS

W3Schools

MDN Web Docs

编程是一门实践科学，实践得多了就记住了、懂了，写代码的时候忘记了就现查。

2、理解 HTTP 协议

URL 由什么组成，什么是端口，域名、路径、参数、锚点。

一个 HTTP 请求和响应的过程，里面都有什么内容。

3、 掌握 DOM 编程

学习 DOM 操作、DOM 事件。

初学者要先把基本功打好，后续学习理解 React、Vue 也会更加得心应手。

4、 初窥网络编程

如何从服务器获取数据？如何提交数据给服务器？

什么是 Cookie？如何合理使用 localStorage 存储数据？

5、 掌握移动端与响应式

搞清楚 viewport、缩放、分辨率、媒体查询、触摸事件等等。搞清楚 vh、vw、rem 这些尺寸单位。

6、 选学数据结构与算法

很多人建议新手要学习数据结构和算法，我建议是感兴趣可以先去看看是怎么回事。

至于什么时候学呢？嗯……大概是入门之后面试之前。

7、 实战练习

趁热打铁做一些实战的项目，先从简单的开始

1. 逐个页面像素级模仿热门 App 的页面显示（HTML + CSS）

2. 写一个 Chrome 浏览器插件，显示本地天气信息（HTML + CSS + JavaScript）

3. 写一个可以离线保存数据的笔记网页（HTML + CSS + JavaScript）

4. 利用 Hexo + GitHub Page 做个人网站，并按自己想法修改网站主题（HTML + CSS + JavaScript）

WEB前端新手练习项目+视频资料https://jq.qq.com/?_wv=1027&k=6vfSFKaS

下一步

这时候进阶再去学习 React、Vue 这些框架，直接看官方文档，后续我也会分享一些不错的实战项目。

最后几个建议

持续写学习笔记，发布到个人网站。

养成看英文原版文档的习惯。

记录你的产品 idea，成为你心里的种子。

项目发布到 GitHub 上，这就是你的作品集。

我自己也是大学开始学习的web前端开发的，一开始也是从简单的html。css开始学起，到后来的js， 各种框架等等，现在也是工作5年了，大学和工作期间都收集了很多学习笔记和资料，分享给真正学习的友友们，都是自己整理的不嫌弃的可点击下方插件获取：

前言：

前端架构师对知识要求不仅要求有深度，还要求有广度，同时还要对各种业务有丰富的经验，

我们在实际工作中往往大部分时间是在做相似的工作，技术和经验提升的很慢，要在短时间内快速提升自己的技能，我们就要主动取探索学习，尤其是一些优秀的文章，能让我们快速的学习到精华。

最近整理下收集的前端学习资料，包含了Vue、React、Electron、服务端渲染、微前端、前端性能优化、前端工程化、前端面试等方面的知识。这些知识既包含很多实战经验，也包含了大量的原理。学完这些能对大家的知识和经验有个质的提升。

一下是前端学习路径图，大家按照roadMap学习。

Vue

1. 聊一聊 Vue3 的 9 个知识点
2. 进阶必备web前端架构
3. web前端到全栈高级教程
4. Vue.js 核心源码解析深入分析核心源码透彻理解
5. 前端全流程性能优化实战极致性能流程体验
6. vue cli项目打包优化，我能做的就这些了
7. 程序员必备书籍
8. 【前车之鉴】Vue，你真的熟练了么？
9. vue-cli3 项目从搭建优化到docker部署
10. 手把手教你写一个脚手架
11. 一个合格的中级前端工程师应该掌握的 20 个 Vue 技巧
12. Vue.js 开发实践：实现精巧的无限加载与分页功能
13. vue中Axios的封装和API接口的管理
14. Web 仿 App 动画竟然引出了“性能杀手”
15. Vue学习看这篇就够了
16. VueSSR高阶指南
17. 「Vue实践」武装你的前端项目
18. 面试题：你能写一个Vue的双向数据绑定吗？
19. 带你五步学会Vue SSR
20. Vue 项目里戳中你痛点的问题及解决办法（更新）
21. （4.2万字🔥🔥🔥重启2020）“从零到部署”Vue全栈电商应用系列教程---正式完结
22. Vue中你不知道但却很实用的黑科技
23. 仿 vue-cli 搭建属于自己的脚手架
24. 带你全面分析vue-router源码（万字长文）
25. vue插件开发、文档书写、github发布、npm包发布一波流
26. vue多页面开发和打包的正确姿势
27. Vue友最爱的10个开箱即用的开源项目
28. Vue源码阅读前必须知道javascript的基础内容
29. Vue-cli原理分析
30. 前端路由简介以及vue-router实现原理
31. 三个很不错的 Vue 资料
32. 吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧《上》
33. Vue 3 源码导读
34. Vue+微前端(QianKun)落地实施和最后部署上线总结
35. Single-Spa + Vue Cli 微前端落地指南 + 视频 (项目隔离远程加载，自动引入)
36. 面试官：自己搭建过vue开发环境吗？
37. vue2 + koa2 + webpack4 的SSR之旅
38. 基于Electron + nodejs + 小程序 实现弹幕小工具
39. Vue3 + TS + Vite2 + Electron16项目梳理
40. Electron + Vue3 开发跨平台桌面应用【从项目搭建到打包完整过程】
41. 手把手教你 Electron + Vue 搭建前端桌面应用

React

1. 2021 年你应该尝试的 8 个 React 库
2. 200行代码实现简版react
3. Redux + React-router 的入门📖和配置👩🏾‍💻教程
4. React服务端渲染+pm2自动化部署
5. 【长文慎入】一文吃透 React SSR 服务端渲染和同构原理
6. ReactNative 学习资源大汇集
7. React 开发必须知道的 34 个技巧【近1W字】
8. 分享 50 个完整的 React Native 项目
9. React SSR 详解【近 1W 字】+ 2个项目实战
10. React路由鉴权
11. 掘金最污的 React16.x 图文视频教程(2万5千字长文-慎入)
12. react进阶」一文吃透React高阶组件(HOC)
13. Vue 转 React不完全指北
14. 2020了，还不开始学react吗？| react 入门必知必会知识点(万字总结✍)
15. React + TypeScript实践
16. React Hooks 详解 【近 1W 字】+ 项目实战
17. 你要的 React 面试知识点，都在这了
18. 三千字讲清TypeScript与React的实战技巧
19. 「React进阶」 React全部api解读+基础实践大全(夯实基础2万字总结)
20. 学习 React.js 比你想象的要简单
21. 「react进阶」年终送给react开发者的八条优化建议(篇幅较长，占用20-30分钟)
22. 一篇文章总结redux、react-redux、redux-saga
23. 「React18新特性」深入浅出用户体验大师—transition
24. React 中 setState 是一个宏任务还是微任务？
25. 这可能是最通俗的 React Fiber(时间分片) 打开方式
26. React精髓！一篇全概括(急速)
27. 可能是你需要的 React + TypeScript 50 条规范和经验
28. 30分钟精通React Hooks
29. 为何我们要用 React 来写小程序 - Taro 诞生记
30. 你真的了解 React 生命周期吗
31. 适合Vue用户的React教程，你值得拥有
32. 「react进阶」一文吃透react-hooks原理
33. 怎样学习React？当然是自己动手实现一个React啦
34. 高频前端面试题汇总之React篇（下）
35. React Hooks 最佳实践
36. 图解ES6中的React生命周期

Electron

1. 快速入手Electron，拥有一个自己的桌面应用
2. 入门Electron，手把手教你编写完整实用案例
3. 分享这半年的 Electron 应用开发和优化经验
4. 分享一年以来的Electron开发经验
5. Vue项目迁移Electron打包、发布、踩坑全纪录，满满的血泪史！
6. 从零到一，用 Electron 开发桌面效率工具
7. Electron，从玩玩具的心态开始，到打造出一款越来越优秀的桌面客户端产品 —— 一份不是「Hello Word」的吊胃口的Quick Start
8. Electron + Puppeteer + Robotjs 实现工作自动化
9. 基于Electron + nodejs + 小程序 实现弹幕小工具
10. Vue3 + TS + Vite2 + Electron16项目梳理
11. Electron + Vue3 开发跨平台桌面应用【从项目搭建到打包完整过程】
12. 手把手教你 Electron + Vue 搭建前端桌面应用
13. 想要试试Electron ，不如看看这篇爬坑总结
14. vite2+electron12短视频+直播应用|electron+swiper仿制抖音桌面版
15. 从零使用electron搭建桌面端可视化编辑器Dooring

服务端渲染SSR

1. React SSR 详解【近 1W 字】+ 2个项目实战
2. vue2 + koa2 + webpack4 的SSR之旅
3. 从头开始，彻底理解服务端渲染原理(8千字汇总长文)
4. Vue 服务端渲染（SSR）
5. 【长文慎入】一文吃透 React SSR 服务端渲染和同构原理
6. SSR 技术概述
7. 理解Vue SSR原理，搭建项目框架
8. 解密Vue SSR
9. 【万字长文警告】从头到尾彻底理解服务端渲染SSR原理
10. Vue 服务端渲染（SSR）、Nuxt.js - 从入门到实践
11. 带你走近Vue服务器端渲染（VUE SSR）
12. Vue SSR 踩坑之旅
13. 通过vue-cli3构建一个SSR应用程序
14. 实现SSR服务端渲染
15. 使用 React + Koa 从零开始一步一步的带你开发一个 36kr SSR 案例（一）
16. React + Koa 实现服务端渲染(SSR)
17. 深入学习SSR , NextJS 一起重构 掘金!
18. 基于vue-cli3 SSR 程序实现热更新功能
19. React SSR 服务器渲染原理解析与实践
20. 快速在你的vue/react应用中实现ssr(服务端渲染)
21. 实现基于 Nuxt.js 的 SSR 应用
22. 带你五步学会Vue SSR
23. vivo 商城架构升级-SSR 实战篇
24. 深入学习Vue SSR服务端渲染 用Nuxt.js打造CNode社区
25. 一个极简版本的 VUE SSR demo
26. React 中同构（SSR）原理脉络梳理

微前端

1. 用微前端的方式搭建类单页应用
2. 微前端入门
3. 基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇
4. 从零到一实现企业级微前端框架，保姆级教学
5. 字节跳动是如何落地微前端的
6. 关于微前端(阿里QianKun)的那点事——上线一个“微前端”逼走了2位90后
7. 微前端-最容易看懂的微前端知识
8. Vue+微前端(QianKun)落地实施和最后部署上线总结
9. 每日优鲜供应链前端团队微前端改造
10. 极致简洁的微前端框架-京东MicroApp开源了
11. 目标是最完善的微前端解决方案 - qiankun 2.0
12. 微前端在美团外卖的实践
13. 关于微前端你必须了解的三种实现方式
14. qiankun 微前端方案实践及总结
15. 体验微前端（qiankun）
16. qiankun微前端实战看这篇就够了 - Vue项目篇
17. 从场景倒推我们要什么样的微前端体系
18. 记一次 微前端 qiankun 项目 实践 !!! 防踩坑指南
19. 微前端与常用的微前端解决方案
20. Webpack 5模块联邦引发微前端的革命？
21. 实施微前端的六种方式
22. 万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇
23. 微前端连载 3/7：淘宝大型应用架构中的微前端方案
24. Single-Spa + Vue Cli 微前端落地指南 + 视频 (项目隔离远程加载，自动引入)
25. 基于 qiankun 的微前端应用实践
26. 基于qiankun落地部署微前端爬”坑“记
27. 微前端框架 之 qiankun 从入门到源码分析
28. 浅谈微前端在滴滴车服中的应用实践
29. 微前端架构初探以及我的前端技术盘点

前端性能优化

1. 设计无限滚动下拉加载，实践高性能页面真谛
2. 5 分钟撸一个前端性能监控工具
3. 狙杀页面卡顿 —— Performance 指北
4. 前端性能优化三部曲(加载篇)
5. 记Chrome的性能分析工具实践
6. 前端性能优化之加载技术
7. 聊一聊前端性能优化
8. 前端黑科技：美团网页首帧优化实践
9. 「前端进阶」高性能渲染十万条数据(时间分片)
10. 「前端进阶」高性能渲染十万条数据(虚拟列表)
11. 从 8 道面试题看浏览器渲染过程与性能优化
12. 看完离编写高性能的JavaScript又近了一步
13. 首页白屏的引发的思考(一)
14. 前端性能优化 24 条建议
15. 工作中如何进行前端性能优化(21种优化+7种定位方式)
16. 写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践
17. 写在 2021 的前端性能优化指南
18. 前端性能优化的常用手段
19. 前端性能优化总结
20. 这些前端性能优化的知识我从来不告诉别人
21. 前端工程师面试题(性能优化)
22. 浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]
23. 浏览器工作原理及web 性能优化（上）
24. 三十分钟掌握Webpack性能优化
25. 揭秘 Vue.js 九个性能优化技巧
26. 前端性能优化最佳实践
27. 网站性能优化

前端工程化

1. 前端架构师的 git 功力，你有几成火候？
2. 手把手】学会VS Code"任务"神技，成为项目组最靓的崽！
3. 给在座各位“打工人”分享33款提高工作效率的vscode“实用插件”
4. 使用pm2自动化部署node项目
5. 手把手带你入门前端工程化——超详细教程
6. 【译】如何在生产环境中部署ES2015+
7. 脑阔疼的webpack按需加载
8. 抛弃jenkins，如何用node从零搭建自动化部署管理平台
9. 实战笔记：Jenkins打造强大的前端自动化工作流
10. 如何保障前端项目的代码质量
11. 手把手教你撸一个 Webpack Loader
12. 【你应该了解的】详尽&全面的前端部署（从零起步，前端上线不用愁）
13. 手摸手聊聊小程序持续集成Jenkins
14. 前端工程化（5）：你所需要的npm知识储备都在这了
15. 用一次就会爱上的cli工具开发
16. 优雅的提交你的 Git Commit Message
17. Nginx与前端开发
18. 深入浅出 Babel 上篇：架构和原理 + 实战
19. web前端资源文件的部署和优化
20. Webpack揭秘——走向高阶前端的必经之路
21. webpack增量打包多页应用
22. 一步步从零开始用 webpack 搭建一个大型项目
23. 带你深度解锁Webpack系列(进阶篇)
24. 带你深度解锁Webpack系列(优化篇)
25. webpack原理
26. 不容错过的 Babel7 知识
27. vue2 + koa2 + webpack4 的SSR之旅
28. 三十分钟掌握Webpack性能优化
29. webpack详解
30. Webpack + Vue 之抽离 CSS 的正确姿势
31. 浅谈前端工程化、模块化、组件化、自动化、规范化
32. 前端工程化实战 - 企业级 CLI 开发
33. 前端工程化体系
34. 前端工程化实战 - 可配置的模板管理
35. Docker+Nginx+Jenkins实现前端自动化部署
36. 前端项目自动化部署——超详细教程（Jenkins、Github Actions）
37. 前端高级进阶：前端部署的发展历程

面试

1. 面试官求你别再问我hook了
2. 前端开发技术面试指南及真题讲解带你入坑BAT
3. web企业面试题精讲
4. 一线大厂前端面试题年末大汇总
5. 2年前端(外包经历) 6月部分面试记录 （高级、资深岗位）
6. 三十七个常见Vue面试题，背就完事了
7. 看过 100 份前端简历之后，汇总一下常见的问题
8. 2021年我的前端面试准备
9. 最新的前端大厂面经（详解答案）   
10. 面试官:既然React/Vue可以用Event Bus进行组件通信,你可以实现下吗?
11. 面试题：你能写一个Vue的双向数据绑定吗？
12. 前端面试考点多？看这些文章就够了（2019年6月更新版）
13. 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
14. 【1 月最新】前端 100 问：能搞懂 80% 的请把简历给我
15. 从 8 道面试题看浏览器渲染过程与性能优化
16. 前端工程师面试题(性能优化)
17. 🐮化身面试官出30+Vue面试题，超级干货（附答案）｜牛气冲天新年征文
18. 面试造火箭，看下这些大厂原题
19. 11道浏览器原理面试题
20. 50道 CSS 基础面试题（附答案）
21. (2.4w字,建议收藏)😇原生JS灵魂之问(下), 冲刺🚀进阶最后一公里(附个人成长经验分享)
22. JS 原生面经从初级到高级【近1.5W字】
23. (1.6w字)浏览器灵魂之问，请问你能接得住几个？
24. 14期-连肝7个晚上，总结了计算机网络的知识点！（共66条）
25. 前端高级面试题@JS篇
26. 看完跳槽少说涨 5 K，前端面试从准备到谈薪完全指南（近万字精华）
27. 前端面试详细知识点（附答案）
28. 面试分享：2018阿里巴巴前端面试总结 | 掘金技术征文
29. Vue高级面试题汇总
30. 几道高级前端面试题解析
31. 如何写出一个惊艳面试官的深拷贝?
32. 分享收集的一大波前端面试题和答案
33. 面试官：自己搭建过vue开发环境吗？
34. 前端面试之webpack篇
35. 你要的 React 面试知识点，都在这了