嗨！我是团子，好久不见~
记得 22 年暑假温习八股的时候，始终在苦恼怎样才能把八股的内容真正的转换为本人的常识。毕竟光靠死记硬背每个知识点，是不能在面试中给面试官留下不错的印象的。前面在整顿《浏览器里输出 URL 后产生了什么》这道题时，发现能够 通过这个题把本人的所有前端知识点给串起来，从而构建出本人的前端常识体系。所以，明天就从浏览器里输出 URL 和大家分享一下我是如何构建本人的前端常识体系的吧！
作为一个前端开发工程师，咱们的日常工作就是和网页打交道。无论是 PC 端浏览器中的标签页，还是应用 Electron 构建出的桌面端利用，还是挪动端的 H5 页面，它们的实质都是网页。
既然是网页，那么就离不开 HTML、CSS 和 JS（俗称前端三件套）。前端三件套是构建出一个网页的最基本要素，也是最外围的因素。
近些年来，随着 webpack 的横空出世，前端工程化束缚着前端程序员的编程习惯，也使得前端编程变得更加标准。再加上 ES6、ES7 的遍及，随之也呈现了很多高效的“编程语言”，比方：vue、react、scss、sass、less、ts 等等。但浏览器自身是无奈辨认.vue、.scss、.less、.ts 这些文件的，它们最终都会被 webpack 等打包工具转换为 HTML（内容）、CSS（款式）和 JS（行为）从而出现在页面上。
那这些网页是怎么出现在页面上的呢？
回忆一下，一个网页的出现，往往是从浏览器里输出一个 URL 开始的。
浏览器篇
当咱们在浏览器输出一个 URL，再到网页出现进去时，简略来说会经验如下几个过程：
1- 5 步都是计算机网络和 http 通信的相干知识点，汇总下来大抵蕴含以下一些高频且必须把握的内容：
到了第 6 步，才算是开始在浏览器端出现页面！
浏览器端须要通过解析 HTML、CSS 和 JS 文件造成 DOM（文本对象模型）和 CSSOM(CSS 对象模型)，再由 DOM 和 CSSOM 造成渲染树，而后通过布局、绘制操作呈现出网页的内容。
这期间波及到的高频考点有：
作为浏览器端的用户来说，服务器端返回给浏览器的文件内容，通常是前端工程师利用 webpack 或 vite 等工具打包后部署到服务器上的内容。
那作为前端开发工程师的咱们，在本地开发环境下，是如何进行页面开发的呢？
我的项目开发篇
正如文前所述，随着前端工程化的深入人心，前端畛域呈现了很多高效的开发工具。目前支流的前端框架有 React 框架、Vue 框架和 Angular 框架。Angular 框架没接触过，React 框架和 Vue 框架作为 SPA（单页面利用）的典型，其提出的 生命周期 和虚构 DOM 思维 使得页面的出现过程变得细分化，在此期间咱们能够做很多性能优化的工作来进步网页出现成果。
然而 仅仅应用 React 框架和 Vue 框架进行页面开发是齐全不够的。如何在开发环境下调试页面；如何进行单页面利用中组件之间的跳转；如何在非父子组件之间进行通信；如何给元素增加款式等等都是咱们须要思考的问题。
通常来说，一个前端的我的项目构造中应该蕴含如下几局部内容：
以 vue 框架或 react 框架为主的我的项目在脚手架、路由、UI 组件库等工具的应用上各有计划。但它们所实现的性能根本类似，只是用法上有所差异。这可能就是为什么前辈们常说，会一种框架，很快就能够上手其余框架的起因吧！
除此之外，思考到不同的业务需要中有很多相似之处，比方不同的中后盾管理系统，业界前端团队封装了开箱即用的企业级中后盾前端 / 设计解决方案：Ant Design Pro。大家也能够参考应用 Ant Design Pro 搭建出的我的项目构造进行学习。
服务端篇
每一位前端开发工程师都有成长为全栈开发工程师的后劲。
实际上，在前端畛域，也有实现服务端开发的计划：
egg、Koa、NestJS、Express.JS 都是基于原生 node 封装的新框架，熟练掌握其中一些能够让咱们对前端开发有更多更粗浅的理解！
强烈推荐大家有工夫读读 Koa 框架的源码，代码量只有几百行，然而设计思维很奇妙。如果可能吃透的话，在面试中也不失为一个加分项！
拓展篇
除了上述一些常见的前端知识点。前端乏味的中央还有很多呢! 举荐大家在闲暇工夫持续裁减，不论是为了面试做筹备，还是拓展知识面~
本文次要是构建前端常识体系，对于具体的概念没有很具体的列出，如果您感觉分享的知识点有可取之处，能够去官网等平台搜寻对应的内容进行具体学习，后续也会分享一些具体 & 有意思的技术给大家！