乐趣区

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

嗨!我是团子,好久不见~

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

拓展篇

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

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

退出移动版