北京华网天下

B站视频讲解：前端学习七阶段前端入门巩固基础前端工程化

2024-05-20

来源：网络整理

这条学习路线并不完美，也不会有最终的形式，就像前端不可预知、永无止境的未来一样。

大家好，我是于皮。经过几天的努力，终于完成了这条保姆级的前端学习路线。

+ =

我们先放一张图：

是不是有点长了，感觉要泄气了？不过别担心，为了帮助大家更轻松地理解前端知识体系，我在这条路线上撒了点糖~

建议大家看看B站的视频讲解，会清晰很多~

地址：

在我的公众号【程序员鱼皮】后台回复“前端路线”即可领取路线图+在线网址

以下是文档版本：

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

您可以根据前面的符号选择知识点，并获取知识点说明和学习资源。

大纲前言——学习编程所需的特征。前端学习的七个阶段。入门。巩固基础。前端工程。前端优化。前端生态。前端求职。前端的未来。我的前端学习路线结束了。 - 持续学习。前言 - 学习编程所需的特征。

相信你有能力，那么你就真的有！

1、前端入门目标：了解并练习各语言的基本语法，能够使用开发工具独立开发一个留言板网站。 ⭐️开发工具浏览器编辑器文档注释⭐️HTML⭐️属性✅功能Web应用程序缓存（）辅助功能⭐️CSS⭐️选择器组合选择器伪选择器选择器优先级⭐️属性背景文本字体列表⭐️文档流程⭐️内联元素/块元素⭐️盒子模型⭐️ ⭐️定位⭐️级联规则❗BFC和IFC机制CSS3动画转场渐变背景边框圆角字体2D/3D变换⭐️引用类型✅数据类型转换✅功能✅❗闭包✅对象自定义对象✅❗（作用域链）✅BOM API⭐️DOM API⭐️JSON⭐️Ajax✅执行机制✅ES6+特性2.巩固基本目标：特别熟悉前端三件套语法，了解互联网、域名以及浏览器、服务器等，巩固前端程序员的基本技能，为实际开发做好准备。前端基础知识 ⭐️ HTTP 请求类别 ⭐️ 常见状态码 ⭐️ ⭐️ 计算机基础 ✅ 算法与数据结构算法 ✅ 计算机网络 ✅ 操作系统软件开发基础 ✅ 设计模式 ⭐️ Git 版本控制 ✅ 服务器 ✅ 正则表达式 3. 前端工程目标：学习至少一种主流前端开发框架（Vue/），并使用脚手架、组件库、工具等从零开始独立搭建和开发一个完整的前端网站。你可以尝试模仿一些知名网站。

要求遵循企业开发规范，将项目代码提交到代码仓库，并独立发布供他人访问。另外，建议抓住机会参与一些团队项目，感受团队开发模式和前端工程化的优势。 ⭐️研发流程技术选型初始化开发本地测试代码提交编译打包构建部署集成测试发布在线监控运维⭐️代码托管✅Node.JS⭐️包管理开发框架开发框架⭐️CSS框架⭐️框架⭐️Vue⭐️❌✅✅封装库⭐️组件库数据可视化组件（插件）工具库动效库字体图标库⭐️脚手架⭐️前端架构设计✅服务端渲染BFF✅JS中的微前端CSS⭐️CSS模块化✅开发与调试内网渗透⭐️CSS预编译测试测试类别✅Mock✅测试框架✅代码质量开发规范类型验证代码检查代码风格提交规范提交检查构建工具自动化构建打包工具CI/CD部署⭐️Web服务器⭐️✅容器✅部署策略监控报警 4.前端优化 ✅ 性能优化性能指标 FCP( ) FMP( ) FSP( ) TTI(Time to) 优化指风格优化优化代码分段资源压缩打包优化服务器优化缓存优化动画性能 dns-优化启动性能渲染优化网络优化移动端性能优化 ✅ CDN 描述：内容分发网络是在现有网络上构建的智能虚拟网络。它依托部署在各地的边缘服务器，利用中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容。资源：用户体验 ✅ 兼容性浏览器兼容性屏幕分辨率兼容性跨平台兼容性 SEO ✅ 安全 5.前端生态 ⭐️ 静态站点建设和开发博客文档 ✅ 大前端

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

移动应用移动应用打包桌面应用小程序跨端开发框架移动端调试 ✅ 云开发低代码 6. 前端求职流程简历面试题库面对面面试练习 7. 前端未来我的前端-结束学习路线

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

1.快速入门并培养兴趣

刚开始学习前端时，一定要以培养兴趣、快速上手为目标。刚开始接触前端的时候，我没有基础，什么都不懂，所以选择了一个在线实用教程网站来学习。我按照教程案例逐行敲出代码，实时浏览显示效果，轻松学会了HTML、CSS和语法的基础知识。又经历了一遍。但此时我对读过的知识点已经没有印象了，基本上都忘记了。当我想自己写一个网站时，却无从下手。

于是，我开始尝试死记硬背代码，却发现背完之后还是写不出来。然后直接打开编辑器和教程网站，不用做其他任何事情，将之前在线练习中输入的代码复制粘贴到编辑器中，然后修改并保存，在浏览器中打开文件。这样，虽然你要在编辑器和浏览器之间来回切换，但至少可以看到运行你的网页文件的效果。后来我使用浏览器开发者工具来提高我开发的网站的调试效率。当我打出来的代码没有达到满意的效果时，我又检查了一遍，修改了一遍，浏览了一遍，终于完成了一个留言板网站！

通过这件事，我明白了一个道理。既然你记不住知识，那就先别强迫它去背。开始写更多，如果忘记了就查一下。不要担心你不知道足够去做这件事。只要你努力，就一定能够实现。

2、多看多写，巩固基础。

在这种操作下，虽然我可以使用基本三件套开发一个简单的网站，但是速度很慢，而且经常出现问题。于是，我开始阅读几本完整的前端入门和项目实战书籍，包括三本入门书籍、响应式网站设计、全面讲解、以及一整套视频教程，通过它们来复习和巩固之前的知识。所学的知识打下了扎实的基础，也学到了更多实际教程中没有看到的知识。

一边看书、一边看视频，一路上做了几个简单的网站，也是边看边做的。之后我发现我渐渐可以不用文档写网站了！

3. 框架学习并学以致用

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

界面和样式代码已经简化了，但是写起来还是很头疼。于是我决定进入下一阶段的学习。当时我先看了一本叫《锐利》的书来学习。学了之后，我就趁热打铁，建了几个网站。我发现它可以大大简化繁琐的 DOM 操作，这让我尝到了好处。，我就有了继续学习前端的动力。

大约半年后，我开始学习主流前端框架Vue。我还按照视频教程，开发了一个基于组件库的响应式网站。不得不说，习惯了使用原生和开发之后，使用Vue来开发真的是太棒了，小有成就感。

4.根据需要独立学习

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

5. 变得更好，拓宽视野

之后我很快就学会了前端技术，比如Dva、Umi等，边学边用。另外，我不仅关注前端Web开发本身，还关注前端的生态和发展。我学习了微前端、云开发、低代码等技术，所以我个人的能力也得到了很大的提升。现在在鹅厂工作，可以面对各种不同技术栈的前端项目所面临的困难。毕竟我不知道如何学习！

呵呵，我的文笔越来越好了，我什至忘记了我是一个后端工程师，在这里吹牛（所以这条路线难免有不专业的地方，请见谅~

六、总结

综上所述，学习前端的路线其实就一句话：基础三件套=>夯实基础=>学习框架=>多做项目=>按需学习=>开阔视野。学习任何编程技术时要注意的另一点是，在整个过程中要多敲代码！更多代码！更多代码！

尾声——继续学习优秀前端人的特点学习资源前端信息技术博客学习要点

在我的公众号【程序员鱼皮】后台回复“前端路线”即可领取路线图+在线网址。

大家都冲啊！

如果觉得有帮助的话，请点赞支持我，给我创作的动力❤️

大家好，我是Yupi，1998年出生，野心勃勃的天蝎座。我本科20毕业后加入腾讯，从事全栈应用开发。我也是腾讯云开发的资深布道者。

热爱学习和分享编程技术，在公众号、抖音、哔哩哔哩、知乎等多个平台进行创作（均称为“程序员鱼皮”），并获得全网近20万粉丝关注网络。

熟悉多种编程语言和技术栈，包括但不限于Java后端、前端、小程序开发。在校期间，我带领工作室建设了数十个校园网站。我以专业第一名的成绩获得了国家奖学金。挑战杯学术竞赛全国获奖者、上海市优秀毕业生，出版过区块链教材，曾在字节跳动、腾讯等3家公司实习过，甚至有过一定的创业经历，并成功积分落户上海。