前端学习梳理

前言

最近学习了一部分前端内容，今天重新梳理一下。

主要借鉴的书有《前端技术架构与工程》、《大前端入门指南》、《vue.js从入门到项目实战》、《springboot+vue全栈开发实战》；

《前端技术架构与工程》从架构师的角度讲解了前端技术的前因后果以及工程化思想；值得反复阅读。里面讲技术架构和工程服务体系时归纳知识十分到位。

《大前端入门指南》蜻蜓点水地讲了前端的基础（HTML+CSS+JavaScript）和常用框架（RN、微信小程序、Flutter）。可以作为字典书，便捷地找到前端的常用知识点。

《vue.js从入门到项目实战》虽然很大部分和官网差不多，但是这本书的学习建议和最后的四个项目实战还是挺有用的，可以帮助vue的入门，同时也可以作为vue的字典书。

《springboot+vue全栈开发实战》借鉴其前后端分离开发网站的过程。本来是想用node后端和前端联系起来，但是我毕业设计是用Java做的后端。暂时还是以Java后端作为主体，联系前端。

主要借鉴的文章有：

Java开源项目之「自学编程之路」：学习指南+面试指南+资源分享+技术文章 里面有超多有价值的技术文章，值得反复阅读。

你们要的前端学习路线，我搞来了！ 里面将的东西很清晰，我打算参考他的内容规划我的前端技术栈。我之前的技术栈感觉太宽泛了，只是简单分类，各部分联系有断层的感觉，突出不了主体。但是这篇文章的思路值得借鉴。

A Recap of Frontend Development in 2019 里面讲述了前端的发展趋势，有借鉴意义。毕竟总不能学好框架后，这框架就过时了。

梳理思路

分三部分：学习目的、学习路线、学习途径。

学习目的是学以致用。明白学到内容在哪里可以用到，能产生多大效益。

学习路线里参考了你们要的前端学习路线，我搞来了！ ，把重要的版块罗列出来，之前我弄的前端学习路线不够明确，几个版块之间联系不合理。

在新的版块里，把前端知识做六部分进行学习。分别是三大件、库工具、前端框架、浏览器&计算机基础、工程化、性能优化。其中三大件和浏览器&计算机基础是基础，虽然开发常用框架，但是框架基于基础推演的；库工具和前端框架是应用，开发所常用的；工程化和性能优化是提高效率和提高性能的重要能力，是高手所需要精通的。

学习路径根据参考你们要的前端学习路线，我搞来了！ 写出的学习路线，然后根据知识点找看官网、博客和书籍（如《大前端入门指南》的前三章、《vue.js从入门到项目实战》的前六章）。

学习目的

学习要学以致用，学习前端要明白学到内容在哪里可以用，能产生多大效益，不能只管学，不管用，知其然不知其所以然。

前端脱胎于做网站，做网站的流程有：策划、设计、开发、测试、部署、发布；对应需要的人员有架构师、产品经理、设计师、前端开发工程师、后端开发工程师、测试人员、运维人员；学习前端虽然不用面面俱到，但是为了前后衔接工作顺利，对各方面的工作有一个初步了解是有必要的。

学习是为了做一件事、做好一件事。

前端在其中要做好的事是：技术上做到高性能、安全，工程上做到规范、效率。

要做好这些事，就需要先做出来，然后做好、做快。

做出来：HTML、CSS、JavaScript；

做好：jQuery（操作DOM）、前端框架vue（虚拟DOM）、性能优化；

做快：工程化

学习路线

1三大件

HTML5

• HTML语义化
• 常用标签
• div
• 本地储存

CSS3

• 选择器
• 属性
• 样式
• 盒模型
• 布局：定位、浮动、溢出、弹性盒子
• 响应式布局

JavaScript

• 类型转换
• 闭包
• this
• 作用域链
• 原型链以及继承
• 设计模式

2浏览器&计算机基础

浏览器

• 浏览器的大致架构
• 浏览器的兼容性
• 浏览器中JavaScript的执行机制
• 页面渲染原理
• 浏览器安全问题
• 浏览器为什么会跨域

计算机基础

• HTTP与HTTPS
• 三次握手和四次挥手
• CDN的作用与原理

3库工具

• jQuery：降低开发者操作DOM的复杂度

4前端框架

• 响应式
• virtual DOM
• 前端路由
• diff算法
• 渲染

5前端工程化

• 模块化：JavaScript、CSS、资源
• 组件化：模板HTML+样式CSS+逻辑JS
• 规范化：编码规范、接口规范
• babel：下一代JavaScript语言的编译器
• ESLint：JavaScript代码检查工具
• mock.js：通过随机数据，模拟各种场景，使前端工程师独立于后端进行开发。
• webpack、Nginx、git

6性能优化

• 前端性能衡量指标、性能监控
• 网站优化方案
• vue的性能优化方案
• 网络层面的优化方案
• 页面渲染层面的优化方案
• 白屏的优化方案

学习途径

三大件：通过参考菜鸟教程和《大前端入门指南》的前三章；

浏览器&计算机基础：通过参考《前端技术架构与工程》第六章；

库工具：不主要了解；

前端框架：参考《前端技术架构与工程》的第二章

工程化：参考《JavaScript设计模式》、《前端技术架构与工程》的第三、四章；

性能优化：参考《前端技术架构与工程》第二、六章；

感觉性能优化和浏览器&计算机基础这两部分有些内容重合了，不过要写还是一块写。

题外话

前端的优势有哪些

首先是WebApp，网站的功能更加强大，慢慢开始与桌面应用争锋；

然后就是跨平台，一套代码，多端运行。

前端如何做好前端

提高可复用性：用框架（vue）、用工具（npm、vue CLI、vue Router、VueX）、用组件（Swiper）、用库（Font Awesome）；便于开发；

提高规范性：统一接口（命名、目录结构）、代码风格；便于维护和升级；

性能优化：网站优化、vue优化、网络层面优化、页面渲染层面优化、白屏优化；

前端如何学习

我觉得学习前端不能只放在前端这个小范围，应该把学习范围扩大到从业务到网站开发这么一个范围来，这样才能明白自己做什么，怎么去做好。

学习前端要同时了解策划、设计、前后端开发、测试、部署、工程化；

策划部分要了解软件工程的需求分析、设计、开发、测试、交付；

设计部分要了解概要设计、详细设计；

测试部分要了解单元测试、集成测试、黑盒、白盒、测试案例；

部署要了解Linux、Docker；工程化要明白git、架构；

整个过程以业务为核心。

了解完这些，把精力放到开发部分，特别是后端开发，前端为后端服务。要明白数据库、服务器、前端之间的关系；

了解完上述的才算对前端有了一个初步的定位。之后就是专精前端，做好前端。

做好前端，首先需要把握住前端的两头，一头是基础（HTML+CSS+JavaScript）、一头是应用（vue+elementUI）；用基础理解应用，用应用实践基础；

然后是把握工程化，能够规范地进行开发；

最后是把握性能优化，使做出的前端性能优异。

前端有什么趋势

• 2019年流行前端框架和库的npm下载：react、jQuery、angular、vue；
• WebAssembly 成为了继 HTML、CSS 和 JavaScript 之后的第四大Web语言
• TypeScript 的使用激增：许多开发人员为之倾倒
• 可访问性和国际化变得越来越重要
• Flutter 突飞猛进地发展，作为构建跨平台移动应用的另一个绝佳选择向 React Native 发起了挑战
• 静态网站的使用仍在持续，开发人员开始采用 JAMStack
• PWA的增长和采用有所增加
• CSS-in-JS的发展势不可挡
• VS Code是文本编辑器市场上的主宰

总结

后期再完善吧，今天先到这，明天把握住两头，了解工程化和性能优化。

内容不一定对，请辩证认知。

更新地址：GitHub

更多内容请关注：CSDN、GitHub