程序员Yupi的前端学习路线

本文作者：程序员Yupi（新）

网站地址：（新）

+ =

建议先看视频介绍：（新）

路线特点 全面总结前端知识点 分阶段学习，每个阶段都有学习目标 用符号区分知识点重要性，按需学习知识点 配有说明和资源链接 提供清晰的个人顺序学习路线 方法 提供大量优质学习资源 符号表

你可以根据知识点前面的符号，根据需要选择学习该知识点，并获取知识点描述和学习资源。

大纲 前言-学习编程需要具备的素质 前端学习的七个阶段 入门前端 巩固基础 前端工程 前端优化 前端生态 前端求职 前端未来 我的前端学习路线 结语-持续学习 前言-学习编程需要具备的素质

相信你有能力，你就一定有能力！

1、前端入门目标：了解并练习各语言基本语法，能使用开发工具独立开发留言板网站。 ⭐️开发工具浏览器编辑器文档笔记⭐️HTML⭐️属性✅功能Web应用缓存（）可访问性⭐️CSS⭐️选择器组合选择器伪选择器选择器优先级⭐️属性背景文本字体列表表格⭐️文档流⭐️内联元素/块元素⭐️盒子模型⭐️浮动⭐️定位⭐️级联规则❗BFC与IFC机制CSS3动画过渡渐变背景边框圆角字体2D/3D变换⭐️引用类型✅数据类型转换✅函数✅❗闭包✅对象自定义对象✅❗作用域（作用域链）✅BOM API⭐️DOM API⭐️JSON⭐️Ajax✅执行机制✅ES6+功能2、巩固基础目标：熟悉前端三套语法，特别是，并且了解互联网，域名，浏览器，服务器等，有扎实的前端程序员基础，为下面的实际开发做好准备。

前端基础✅HTTP⭐️HTTP请求分类⭐️常见状态码⭐️⭐️计算机基础✅算法与数据结构算法✅计算机网络✅操作系统软件开发基础✅设计模式⭐️Git版本控制✅服务器✅正则表达式3、前端工程化目标：学习至少一种主流的前端开发框架（Vue/），能够独立使用脚手架、组件库、工具等从零开始搭建开发一个完整的前端网站，可以尝试模仿一些知名站点。要求遵循企业级开发规范，将项目代码提交到代码仓库，并独立发布到网上供别人访问。另外建议抓住机会参与一些团队项目，体会团队开发模式和前端工程化的优势。 ⭐️研发流程技术选型初始化开发本地测试代码提交编译、打包、构建部署集成测试发布线上监控运维⭐️代码托管✅Node.JS⭐️包管理开发框架开发框架⭐️CSS框架⭐️框架⭐️Vue⭐️❌✅✅封装库⭐️组件库数据可视化组件（插件）工具库动态效果库字体图标库⭐️脚手架⭐️前端架构设计✅服务端渲染BFF✅微前端CSS in JS⭐️CSS模块化✅开发调试内网穿透⭐️CSS预编译测试测试分类✅Mock✅测试框架✅代码质量开发规范类型验证代码检查代码风格提交规范提交检查构建工具自动化构建打包工具CI/CD部署⭐️Web服务器⭐️✅容器✅部署策略监控与报警四、 前端优化✅ 性能优化 性能指标 FCP（） FMP（） FSP（） TTI（Time to）优化方法 样式优化 优化 代码分割 资源压缩 打包优化 服务器优化 缓存优化 动画性能 DNS-Lazy优化 启动性能 渲染优化 网络优化 移动端性能优化✅ CDN 用户体验✅ 兼容性 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 SEO✅ 安全 5.前端生态⭐️ 静态站点建设 开发博客文档✅ 大前端

描述：前端技术融合更加紧密，应用领域更加广泛，前端领域的内容多样化，除了网站之外，前端技术还可以用于跨平台开发，iOS，小程序，虚拟现实，增强现实等。

移动应用移动应用打包桌面应用小程序跨端开发框架移动调试✅ ✅ 云开发低代码六、前端求职简历面试题库面试心得七、前端未来我的前端学习路线

上面整理的学习路线虽然知识点有点多，但是不用太担心，其实按照一定的顺序和方法学习，并不难，下面说说我的学习心得。

1. 快速上手，培养兴趣

刚开始学习前端，一定要以培养兴趣和快速上手为目标。我刚开始学习前端的时候，没有基础，什么都不会，所以选择在线实战教程网站学习，跟着教程的案例一行行敲出代码，实时浏览展示效果，很轻松的就把 HTML、CSS 等基础语法都过一遍。但此时，我对看过的知识点已经没有印象了，基本看完就忘了。等到自己想写一个网站的时候，完全不知道从何下手。

于是，我开始尝试去背代码，但是我发现背了之后还是写不出来。于是我就干脆打开编辑器和教程网站，把之前在网上练习时输入的代码复制粘贴到编辑器里，然后修改保存，在浏览器里打开文件。虽然要在编辑器和浏览器之间来回切换，但至少能看到我的网页文件运行的效果。后来，我又借助浏览器开发者工具，提高自己网站开发的调试效率，当我输入的代码没有达到满意的效果时，我就再检查、再修改、再浏览。终于，一个留言板网站完成了！

通过这件事情，我明白了一个道理，如果知识点记不住，就不要勉强自己去记，多记点，忘了就去查，不要因为自己不懂而担心，只要你努力，就一定可以做到。

2. 多读多写，巩固基础知识

这样操作之下，虽然我能用基础三件套开发一个简单的网站，但是速度很慢，而且总是出问题。于是，我开始看几本前端入门和项目实战的书籍，包括三件套入门书籍、响应式网站设计、全面讲解、以及全套的视频教程。通过这些，我复习和巩固了之前学过的知识，打下了良好的基础，也学到了更多在实战教程里没有看到的知识。

我一边看书一边看视频，也跟着做了几个简单的网站，之后发现慢慢的不用文档也能写网站了！

3. 学习框架并应用于实践

但是总觉得开发一个网站什么的都要自己写，写很多重复的代码很麻烦。于是，我就试着在网上搜索这些问题的解决方法，发现可以使用组件库来减少重复写 HTML 和 CSS 代码，于是就学了。其实跟以前一样，打开官网找到要用到的组件，然后复制到项目中修改就行了。写了这么多，其实我也记住了一些（虽然这个不是必须的）。

界面和样式代码精简了，但写起来还是头疼。于是决定进入下一阶段的学习。先看了一本叫《锐利》的书学习。学完之后用它做了几个网站，发现可以大大简化繁琐的DOM操作。让我尝到了成功的滋味，也给了我继续学习前端的动力。

大概半年之后，我开始学习主流的前端框架 Vue，跟着视频教程学习，并结合组件库开发了一个响应式网站。不得不说，习惯了原生开发之后，用 Vue 开发真的是一种解脱，很有成就感。

4. 根据需要自主学习

之后就是通过不断做项目来积累经验。由于需要学习的编程知识太多，所以我按需学习，逐渐拓宽了自己的知识面。比如要做移动端H5页面，就搜了Vue的移动端组件库，学习了等等；项目需要处理日期，就搜了日期处理库，学习了.js；项目中重复的文件和代码太多，就在网上搜索一些组件化、模块化的最佳实践；项目代码量太大，加载太慢，就在网上搜索一些前端压缩、性能优化的方法；要把开发出来的项目做成APP，就在网上搜索打包工具；和其他同学一起做项目的时候，比较混乱，开发效率低，就在网上搜索一些代码规范、前端工程化等等；遇到bug也会在网上搜索解决方案，也会寻找有什么自己漏掉的知识点，及时补上。 通过不断的实践，不断的遇到问题以及自我解决问题，使自己始终保持学习的热情，学习到越来越多的前端知识，并通过归纳、总结加深自己的印象。

5. 变得更好，拓宽你的视野

之后我很快学习了前端技术，比如，，，，Dva，Umi等，边学边用。另外我不仅关注前端Web开发本身，也关注前端的生态和发展，学习了微前端，，云开发，低代码等技术，所以个人能力也有了很大的提高。现在在腾讯工作，面对各种技术栈的前端项目，我也能迎难而上，毕竟不会做也可以学！

哦，我文笔太好了，差点忘了我是个后端工程师，还在这里吹牛（所以这条路线难免会有些不专业，请见谅~）

六，结论

总结一下，学习前端的路线其实就一句话：基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 随需应变学习 => 开阔视野。还有一点是学习任何编程技术都要注意的，全程多敲代码！多敲代码！多敲代码！

结语-前端职业发展几个阶段的持续学习 作为一名合格的前端开发人员，首先要能够通过 Vue 等前端框架进行工作并满足公司的需求，比如还原设计稿、开发交互、搭建项目初始框架（架构）、开发内部组件库（基础设施）等，关键还要学会如何与后端系统打通（前后端联调），有时候还需要完成一些简单的服务端开发，比如使用 Node 搭建中间层/接入层（BFF），这就要求你除了学习前端基础三套之外，还要熟练使用一个开发框架 Vue/和一些用于前端工程化的工具/轮子（比如打包工具、性能分析工具、SSR 等），它们可以帮助你更好的设计和开发项目，从而应对需求变化，让项目更易于维护和扩展。 想要成为高级前端开发者，必须了解常见框架/工具的运行原理和机制，最好有一个自己擅长/擅长的领域，比如低代码、Web IDE、可视化、性能优化、Web等，并积极参与开源项目和公益分享。

随着你的知识越来越丰富和深入，你要学会主动关注和吸收网络上的知识，了解前端的发展和新的技术趋势。比如看书，浏览技术网站，或者关注某个领域的大咖，参加一些会议等等。

优秀前端人的特质 学习资源 前端信息技术博客 学习要点