WEB前端·概述

网络访问事件

网络访问过程可以简单地概括为dns过程+http过程
更广义地应包括dns+http+server+http+render过程

1.DNS解析过程

域名系统（英文：Domain Name System，缩写：DNS）。
它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS使用UDP端口53。当前，对于每一级域名长度的限制是63个字符，域名总长度则不能超过253个字符。

根服务器.
根服务器主要用来管理互联网的主目录，最早是IPV4，全球只有13台（这13台IPv4根域名服务器名字分别为“A”至“M”）

IPV4：网际协议版本4（InternetProtocolversion4，IPv4）
地址空间：IPv4使用32位地址空间，理论上可以提供约42.9亿个IP地址。
地址表示法：IPv4地址由四个十进制数表示，例如192.168.0.1，这种表示法被称为点分十进制表示法。

IPV6：网际协议版本6（InternetProtocolversion6，IPv6）
地址空间：IPv6使用128位地址空间，理论上可以提供约340亿亿亿个IP地址。
地址表示法：IPv6地址由八个四位十六进制数表示，例如2001:0DB8:AC10:FE01::。这种表示法采用了冒号分隔的八进制表示法，并且允许地址中的某些部分被省略，用双冒号（::）表示连续的零组。

雪人计划
基于全新技术架构的全球下一代互联网（IPv6）根服务器测试和运营实验项目，旨在打破现有的根服务器困局，为下一代互联网提供更多的根服务器解决方案。
2016年在16个国家完成25台IPv6根服务器架设，形成了13台原有根加25台IPv6根的新格局，为建立多边、民主、透明的国际互联网治理体系打下坚实基础。

2.HTTP过程

HTTP（超文本传输协议，Hypertext Transfer Protocol）
是一种用于从网络传输超文本到本地浏览器的传输协议。它定义了客户端与服务器之间请求和响应的格式。HTTP 工作在 TCP/IP 模型之上，通常使用端口 80。

HTTPS（超文本传输安全协议，Hypertext Transfer Protocol Secure）
是 HTTP 的安全版本，它在 HTTP 下增加了 SSL/TLS 协议，提供了数据加密、完整性校验和身份验证。HTTPS 通常使用端口 443。

客户端发送request
客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成，下图给出了请求报文的一般格式。

服务端响应response
HTTP 响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

3.server过程

server过程
即是服务器通过编程语言环境生成HTTP响应信息的过程（生成HTML代码的过程）

4.render过程

渲染过程
即是浏览器将html、css、javaScrip等画成用户可见的画面
大致有：构造DOM树-样式计算-布局-图层-绘制-光栅化-合成和现实等阶段

什么是前端？

前端用来干什么？

展示+交互

前端的功能

├──展示
│   ├── 1. 文字 (Text)
│   ├── 2. 图片 (Image)
│   ├── 3. 音频 (Audio)
│   ├── 4. 视频 (Video)
│   └── 5. 其他 (Others)
├──搜集与提交
│   ├── 1. 搜集客户端信息
│   │   ├── 用户输入信息 (User Input)
│   │   │   ├── 表单 (Forms)：文本、选择、上传
│   │   │   ├── 点击/触摸行为 (Clicks/Taps)
│   │   │   └── 麦克风/摄像头 (Microphone/Camera)
│   │   ├── 设备信息 (Device Info)
│   │   │   ├── 操作系统
│   │   │   ├── 浏览器/App版本 (Browser/App Version)
│   │   │   ├── 屏幕分辨率 (Screen Resolution)
│   │   │   └── 设备标识 (Device ID) 
│   │   ├── 行为数据 (Behavioral Data)
│   │   │   ├── 停留时长 (Dwell Time)
│   │   │   ├── 浏览路径 (Click Path)
│   │   │   └── 滚动深度 (Scroll Depth)
│   │   └── 位置信息等 
│   │
│   └── 2. 向服务端提交 (Submit)
│       ├── 提交方式 (Submission Methods)
│       │   ├── HTTP请求 (HTTP Requests)
│       │   │   ├── GET
│       │   │   └── POST (最常用)
│       │   ├── WebSocket (实时)
│       │   └── 长轮询 (Long Polling)
│       ├── 数据格式 (Data Format)
│       │   ├── JSON (最常用)
│       │   ├── FormData (用于文件上传)
│       │   ├── XML
│       │   └── URL Encoded
│       └── 安全与隐私 (Security & Privacy)
│           ├── 加密传输 (HTTPS/SSL)
│           ├── 数据脱敏 (Data Masking)
│           ├── 用户授权 (User Consent)
│           └── 遵守GDPR/《网络安全法》 (Compliance)
│
└──响应与展示
    ├── 1. 接收服务端消息 (Receive Server Message)
    │   ├── 成功响应 (Success Response)
    │   │   ├── 操作成功确认 (Success Confirmation)
    │   │   ├── 请求的数据 (Requested Data)
    │   │   └── 下一步指令 (Next Instruction)
    │   ├── 错误响应 (Error Response)
    │   │   ├── 错误码 (Error Code)
    │   │   ├── 错误信息 (Error Message)
    │   │   └── 友好提示 (User-friendly Tips)
    │   └── 推送消息 (Push Notification)
    │       ├── 站内信 (In-app Message)
    │       ├── 实时通知 (Real-time Alert)
    │       └── 后台广播 (Broadcast)
    │
    └── 2. 处理并展示 (Process & Display)
        ├── 解析数据 (Parse Data)
        │   ├── 解析JSON (Parse JSON)
        │   └── 验证数据有效性 (Validate Data)
        ├── 更新界面 (Update UI)
        │   ├── 无刷新更新 (DOM Manipulation)
        │   │   ├── 更改文本内容 (Change Text)
        │   │   ├── 切换图片/视频源 (Change Src)
        │   │   ├── 显示/隐藏元素 (Show/Hide Elements)
        │   │   └── 动态添加列表 (Append List Items)
        │   └── 有刷新更新 (Page Reload/Navigate)
        ├── 用户反馈 (User Feedback)
        │   ├── 成功提示 (Success Toast/Modal)
        │   ├── 错误提示 (Error Toast/Modal)
        │   ├── 加载状态 (Loading Animation)
        │   └── 动画效果 (Animation Effects)
        └── 触发后续动作 (Trigger Follow-up Actions)
            ├── 跳转页面 (Redirect to another page)
            ├── 播放媒体 (Auto-play Media)
            └── 预加载资源 (Preload Resources)