嗨！我是团子，好久不见~

记得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框架的源码，代码量只有几百行，然而设计思维很奇妙。如果可能吃透的话，在面试中也不失为一个加分项！

拓展篇

除了上述一些常见的前端知识点。前端乏味的中央还有很多呢! 举荐大家在闲暇工夫持续裁减，不论是为了面试做筹备，还是拓展知识面~

本文次要是构建前端常识体系，对于具体的概念没有很具体的列出，如果您感觉分享的知识点有可取之处，能够去官网等平台搜寻对应的内容进行具体学习，后续也会分享一些具体&有意思的技术给大家！