从浏览器里输入URL构建你的前端知识体系

dossweetdossweet - 2023-01-12 07:45:41

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

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