web学习

前端

什么是前端

前端：前端即网站前台部分，是运行在PC端、移动端等浏览器上展现给用户浏览的网页,前端是用户所看到的，包括按钮、复选框、图形和文本消息等视觉元素。

前端的工作原理

用户可以直接与之交互的图形用户界面（GUI），例如导航菜单、设计元素、按钮、图像和图表。采用技术术语，用户看到的带有多个 UI 组件的页面或屏幕称为文档对象模型（DOM）。

三种主要的计算机语言（前端三剑客）会影响用户与前端的交互方式：

• HTML 定义前端结构和不同的 DOM 元素
• 层叠样式表（CSS）定义 Web 应⽤程序的样式，包括布局、字体、颜⾊和视觉样式
• JavaScript 通过操作 DOM 增加⼀层动态功能

JavaScript 可以触发页面上的更改并显示新信息。这意味着前端可以处理基本的⽤户交互（或请求），例如显示日历或检查用户是否输入有效的电子邮件地址。

前端的作用：

交互：当用户与界面进行交互时，前端负责捕获这些交互（如点击按钮或提交表单），并将它们转换为后端可以理解的请求。然后，前端会接收后端返回的响应，并更新用户界面以反映这些变化。

用户界面设计：前端可以创建与用户进行交互的界面。包括布局、颜色、字体、图标等视觉元素的设计，以及如何响应用户的各种输入，如点击、输入文本等。

后端

什么是后端

后端：后端是处理请求，数据，逻辑和与前端（用户界面）进行交互的服务器端部分。

后端的工作原理

后端用于管理 Web 应用程序的整体功能。当用户与前端交互时，此交互会以 HTTP 格式向后端发送请求。后端处理请求并返回响应。

后端的组成

一个简单的后端由，服务器，数据库，操作系统，中间件，API，源码等组成。

浏览器

浏览器是指一种用于显示网页内容的应用程序，通过HTTP或HTTPS协议与网页服务器交互并获取网页，在用户设备上以图形化界面展示。

浏览器的基本功能

1. 用户界面：包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示请求的页面外，其他所有显示的页面元素都属于用户界面。

2. 浏览器引擎：在用户界面和渲染引擎之间传送指令。

3. 渲染引擎：负责显示请求的内容。如果请求的内容是HTML，它就负责解析HTML和CSS内容，并将解析后的内容显示在屏幕上。

4. 网络组件：负责网络调用，如HTTP请求。它包括了平台无关的接口，下层通过平台相关的接口实现，接口通常以库的形式提供。

5. JavaScript解释器：用于解析和执行JavaScript代码，使得网页具有交互性。

6. 数据存储：浏览器需要在硬盘上保存各种各样的数据，例如Cookie。新的HTML规范（如HTML5）定义了“网络存储”的API，这是一种更安全、更强大的数据存储方法。

7. UI后端：用于绘制基本的窗口小部件，如组合框和窗口。这个后端公开了与平台无关的通用接口，而在底层使用操作系统的用户接口方法。

小提问：当你在浏览器的地址栏中输入URL后到页面显示出来之前发生了什么？

1. 查看缓存：浏览器会查看浏览器缓存，操作系统缓存，本地dns缓存，ISP缓存等，如果找到缓存，就会直接发送请求。
2. DNS解析：当浏览器找不到缓存时，本地dns服务器会向根域名服务器发送请求，根域名服务器返回查询某个顶级域名服务器；再向顶级域名服务器发送请求，返回查询某个权限域名服务器；再向权限域名服务器发送请求，返回需要的IP地址。
3. 获取端口号。
4. 建立tcp连接：三次握手。
5. 发送http请求：发送端在不同的体系层给数据增添首部，接收端删除首部。
6. 释放tcp连接：四次挥手。

假设你要查询www.baidu.com的IP地址:

（1）首先会查找浏览器的缓存，看看是否能找到www.baidu.com对应的IP地址，找到就直接返回，否则进行下一步。 （2）将请求发往给本地DNS服务器，如果查找到也直接返回，否则继续进行下一步。 （3）本地DNS服务器向根域名服务器发送请求，根域名服务器返回负责.com的顶级域名服务器的IP地址的列表。 （4）本地DNS服务器再向其中一个负责.com的顶级域名服务器发送一个请求，返回负责.baidu的权威域名服务器的IP地址列表。 （5）本地DNS服务器再向其中一个权威域名服务器发送一个请求，返回www.baidu.com所对应的IP地址。