# 前端学习梳理
# 前言
最近学习了一部分前端内容，今天重新梳理一下。
主要借鉴的书有《前端技术架构与工程》、《大前端入门指南》、《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 里面讲述了前端的发展趋势，有借鉴意义。毕竟总不能学好框架后，这框架就过时了。
[toc]
# 梳理思路
分三部分：学习目的、学习路线、学习途径。
学习目的是学以致用。明白学到内容在哪里可以用到，能产生多大效益。
学习路线里参考了你们要的前端学习路线，我搞来了！ ，把重要的版块罗列出来，之前我弄的前端学习路线不够明确，几个版块之间联系不合理。
在新的版块里，把前端知识做六部分进行学习。分别是三大件、库工具、前端框架、浏览器&计算机基础、工程化、性能优化。其中三大件和浏览器&计算机基础是基础，虽然开发常用框架，但是框架基于基础推演的；库工具和前端框架是应用，开发所常用的；工程化和性能优化是提高效率和提高性能的重要能力，是高手所需要精通的。
学习路径根据参考你们要的前端学习路线，我搞来了！ 写出的学习路线，然后根据知识点找看官网、博客和书籍（如《大前端入门指南》的前三章、《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
