第一节：前端简介

第一节：前端基础

前端

概念：

什么是前端

前后端差别：

前端和后端是任何应用程序的两个关键方面。前端是用户所看到的，包括按钮、复选框、图形和文本消息等视觉元素。允许您的用户与您的应用程序进行交互。后端是使您的应用程序正常运行的数据和基础设施。为您的用户存储和处理应用程序数据。

前端工作原理

概念

• HTML：定义前端结构结构和不同的DOM元素
• CSS：定义Web应用程序的样式（布局，字体，颜色，视觉样式）
• JavaScript：通过操作DOM增加一层动态功能

后端工作原理

概念

• 用于检索或修改相关数据的数据库服务器
• 执行用户所请求任务子集的微服务
• 用于收集额外信息或执行其他功能的第三方 API

浏览器

功能概念：

是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI(UniformResourceIdentifier统一资源标识符）来指定所请求资源的位置。

组件：

• 用户界面：地址栏，前进后退按钮…
• 浏览器引擎：用来查询及操作渲染引擎的接口
• 渲染引擎：用来显示请求的内容，例如，如果请求内容为html，它负责解析html及cSS，并将解析后的结果显示出来。
• 网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
• UI后端：来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
• JS解释器：用来解释执行JS代码。
• 数据存储：于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了webdatabase技术，这是一种轻量级完整的客户端存储技术。

输入URL的过程

1. 域名详解
2. 查看浏览器缓存
3. DNS域名解析
4. 获取端口号
5. 建立TCP连接
6. HTTP请求
7. TCP终止
8. 浏览器解析渲染