Hi！我是团子，好久不见~记得22年寒假在复习八股文的时候，一直在发愁怎么把八股文的内容转化成自己的知识。毕竟光靠死记硬背每个知识点是无法在面试中给面试官留下好印象的。后来在梳理《浏览器里输入URL后发生了什么》这道题的时候，发现可以通过这道题把自己所有的前端知识点串联起来，从而构建自己的前端知识体系。所以，今天从浏览器输入网址，分享给大家我是如何搭建自己的前端知识体系的！作为一名前端开发工程师，我们每天的工作就是和网页打交道。无论是PC浏览器中的tab页，还是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（TextObjectModel）和CSSOM（CSSObjectModel），再由DOM和CSSOM形成渲染树，再将网页内容通过布局和绘图操作。这期间涉及的高频测试点有：作为浏览器端用户，服务器返回给浏览器的文件内容通常是前端工程师使用webpack或vite等工具打包部署的内容到服务器。作为前端开发工程师，我们如何在本地开发环境中开发页面呢？项目开发前面提到，随着前端工程化的普及，前端领域涌现出很多高效的开发工具。目前主流的前端框架有React框架、Vue框架和Angular框架。我从未接触过Angular框架。React框架和Vue框架是典型的SPA（SinglePageApplication）。他们提出的生命周期和虚拟DOM思想，使得页面渲染过程细分。在这期间，我们可以做很多的性能优化。努力改进网页呈现。但是仅仅使用React框架和Vue框架进行页面开发是不够的。如何在开发环境中调试页面；如何在单页应用程序中的组件之间跳转；非父子组件之间如何通信；如何给元素添加样式等等都是我们需要考虑的问题。一般来说，一个前端项目结构应该包括以下几个部分：基于vue框架或者react框架的项目，对于脚手架、路由、UI组件库等工具的使用都有自己的规划。不过它们实现的功能基本相似，只是在使用上有区别。这可能就是为什么前人常说，会了一个框架，其他框架就可以很快上手了！另外，考虑到不同的业务需求有很多相似之处，比如不同的中后台管理系统，行业前端团队封装了一个开箱即用的企业级中后台-结束/设计解决方案：AntDesignPro。也可以参考使用AntDesignPro搭建的项目结构进行学习。服务器部分的每个前端开发工程师都有成长为全栈开发工程师的潜力。其实在前端领域，也有服务端开发的解决方案：egg、Koa、NestJS、Express.JS都是基于原生node封装的新框架。掌握其中的一些可以让我们对前端开发知识的学习越来越深入！强烈建议大家有时间阅读一下Koa框架的源码。代码量只有几百行，但是设计思路非常巧妙。如果能理解透彻，在面试中会是加分项！除了上面提到的一些常见的前端知识点外，拓展篇。前端还有很多有趣的地方呢！建议大家在空闲时间继续拓展，无论是准备面试还是扩充自己的知识面~本文主要是搭建前端知识体系，具体概念不做详细列举。如果大家觉得分享的知识点值得，可以到官网等平台搜索相应的内容进行详细学习，以后会和大家分享一些具体有趣的技术！
