1 前言

在技术更新迭代发展迅猛的当今时代，又突然杀出个AI程序员，AIGC如排山倒海之势取代传统行业。或许在不久的将来，前端程序员就会被淘汰。

传统学习是循序渐进的过程，也就是从打基础到筑起高楼大厦的过程，了解前端学习路线也就是了解前端工程从0到1的过程，或许使用AI能直接筑起高楼大厦，但了解每块砖在高楼大厦中所发挥的作用也是程序员必备的技能之一。这篇文章对不同阶段的程序员也许有着不同的意义，对初学者来讲，可能可以作为学习指南参考。对于已经又工作经验的码农的来讲，可以温故而知新，查缺补漏，对于大佬来讲，可以指出问题，大家一起学习进步。

2 前端学习路线

2.1 入门阶段

入门阶段主要是学习前端三大剑：HTML+CSS+Javascript，入门阶段对这三者的掌握程度应如下：

2.1.1 HTML

• 学习HTML语法知识，
• 学习使用常用的HTML标签，
• 掌握各个标签的含义以及标签的相关属性。

2.1.2 CSS

• 掌握CSS常用的选择器，
• 掌握常见的样式属性以及规则；
• 掌握不同选择器制渐的优先级；
• 掌握容器与布局的概念；
• 掌握自适应布局解决一般问题；

相关学习网站：

• MDN Web Docs: 提供HTML、CSS等基础知识的详细文档。
• W3Schools: 提供交互式的HTML和CSS教程。

2.1.3 JavaScript

• 掌握JS的变量类型与变量作用域；
• 掌握JS的基本语法；
• 掌握常见对象的相关操作标准库等

相关学习网站

• 网道JavaScript: 提供基础的JavaScript教程。
• freeCodeCamp: 提供互动性的学习环境，包括HTML、CSS和JavaScript。

2.1.4 网络基础

• 掌握网络通信基础；
• 掌握URL内容以及相关含义；
• 掌握http/https协议；
• 掌握DNS等等；

相关学习网站

• 视频学习网站：中国慕课网，哔哩哔哩；
• MDN Web Docs: 关于Web技术的文档和教程；

2.2 基础阶段

2.2.1 前端框架

• 掌握一门主流的前端框架，如React、Angular或Vue。

相关网站

• React.js官方文档: React框架的官方文档。
• Vue.js官方文档: Vue框架的官方文档。
• Angular官方文档: Angular框架的官方文档。

2.2.2 深入JavaScript

• 掌握浏览器模型；
• 掌握异步编程
• 掌握promise；
• 掌握错误处理等等；

相关网站

• Eloquent JavaScript: 由Marijn Haverbeke编写的深入JavaScript的书籍。
• You Don’t Know JS: 深入理解JavaScript系列的免费书籍。

2.2.3 ES6

• 掌握ES6扩展的运算符；
• 掌握ES6扩展的方法库；
• 掌握let和const，箭头函数，解构赋值；
• 掌握模块化编程；

相关网站

• ES6入门： ES6入门是阮一峰老师维护的一本免费在线书籍，详细介绍了ES6的各种新特性、语法和用法，并提供了丰富的示例代码和练习题。

• W3Schools： W3Schools提供了简单易懂的ES6教程，包括let和const、箭头函数、模板字符串、解构赋值、类和模块等内容，并提供了示例代码和在线练习。

2.2.4 工程化知识

• 掌握使用一个包管理工具，如npm或者yarn；
• 掌握一个构建工具以及相关项目配置，如webpack；

相关网站

• npm Documentation: npm的官方文档。
• Webpack Documentation: Webpack的官方文档。
  

2.3 进阶阶段

2.3.1 CSS

• 学习响应式设计原理；
• 掌握媒体查询等技术；
• 掌握CSS预处理器，如Sass或Less；

相关网站

• CSS Tricks: 提供有关CSS的技巧和技术的文章。
• Sass官方文档: Sass预处理器的官方文档。

2.3.2 Javascript

• 掌握Typescript语法，提升开发规范性；
• 掌握常用的WEB API处理一些业务场景，如canvas、websocket等；

相关网站：

• TypeScript官方文档： TypeScript官方文档；
• WEB API

2.3.3 单元测试

• 学会使用Mock工具进行单元测试；
• 掌握部分测试框架，如Jest；

相关网站

• Jest官方文档: Jest测试框架的官方文档。

2.3.4 性能优化

• 学会使用浏览器开发工具分析页面性能；
• 学会优化项目性能，如懒加载、拆包、静态资源加载优化等；

相关网站

• Google Developers - Web Fundamentals： Google Developers - Web Fundamentals提供了丰富的关于Web开发的文档和教程，包括性能优化、前端开发技术、PWA等方面的内容。其中，性能优化部分介绍了如何优化网页加载速度、渲染性能、资源管理等。
• Web.dev： Web.dev是Google开发的一个网站，提供了有关Web开发的最佳实践和性能优化建议。你可以在这里找到关于提高网页性能的实用技巧和工具。
• MDN Web Docs - Performance： MDN Web Docs的性能优化部分提供了关于优化网页性能的指导和建议。它包括了各种性能优化技术，如减少资源大小、优化渲染流程、提高动画性能等。

3 总结

以上是个人结合网上资料整理的基本的前端学习路线，以供各位学习参考；

当然，兴趣和实战永远是最好的老师，可以让人快速进步的方法就是执行合一，在实战中学习进步。

同时，参与开源社区的分享和讨论也能学习到不少干货，将这些干货柔和到自己的体系当中，可以不断完善提高自己的能力。真正的强者不会被时代淘汰，他们会去创造一个属于自己的时代。