saas一面：面试问题记录：
（1）网页加载的过程
1. URL输入与解析 用户输入：用户在浏览器地址栏输入网址（如 https://www.example.com）。 智能补全： 浏览器会根据历史记录、书签或预设规则（如HSTS策略）补全URL。 例如，若用户输入 example.com，浏览器可能自动补全为 https://www.example.com。 URL标准化： 解析协议（HTTP/HTTPS）、域名、端口（默认HTTP:80, HTTPS:443）、路径等。 例如，https://www.example.com 会被解析为协议 HTTPS、主机名 www.example.com、端口 443。
2.查寻缓存、DNS解析（域名解析）** 查看本地缓存是否有服务器资源信息、没有则向路由器等进一步查询。未查询到进行DNS解析。
目标：将域名（如 www.example.com）转换为对应的IP地址（如 192.0.2.1）。 查询过程： 本地缓存检查：浏览器 → 操作系统缓存（如Windows的Hosts文件） → 路由器缓存。 递归查询：若未命中缓存，向本地DNS服务器（ISP或公共DNS如Google DNS）发起查询。 DNS服务器层级查询： 根域名服务器 → 顶级域名服务器（TLD，如.com） → 权威域名服务器。 返回结果：最终获取IP地址并缓存（缓存时间由TTL决定）。 优化： 预解析：浏览器可能提前解析页面中引用的资源域名（如通过 ）。 公共DNS：使用公共DNS（如Cloudflare 1.1.1.1）可减少延迟。
3. 建立TCP连接 目标：在客户端与服务器之间建立可靠的通信通道。 三次握手： SYN：客户端发送同步包（SYN），包含初始序列号。 SYN-ACK：服务器回应同步-确认包（SYN-ACK），附带自己的序列号。 ACK：客户端发送确认包（ACK），连接建立。 优化： TCP快速打开（TFO）：允许在三次握手中携带数据，减少延迟。 持久连接（HTTP Keep-Alive）：复用已建立的TCP连接，避免重复握手。
4. TLS协商（HTTPS场景） 目标：建立加密通道，确保数据安全。 TLS 1.3流程（比旧版本更高效）： Client Hello：客户端发送支持的协议版本、加密套件等。 Server Hello：服务器选择协议版本、加密套件，并发送证书。 密钥交换：客户端与服务器通过非对称加密协商共享密钥。 Finished：双方验证协商结果，开始加密通信。 优化： 会话恢复：通过Session ID或Ticket复用之前的密钥，减少握手时间（0-RTT）。 HTTP/2 + TLS：合并多个请求到单个连接，提升性能。
5. 发送HTTP请求 请求构建： 请求行：方法（GET/POST）、路径（如 /index.html）、协议版本（HTTP/2）。 请求头：包含用户代理（User-Agent）、Cookie、缓存控制（Cache-Control）等。 请求体：POST请求中包含提交的数据。 示例：
http
GET /index.html HTTP/2
Host: www.example.com
Accept-Language: en-US6. 服务器处理请求
解析请求： 服务器解析URL路径（如 /index.html）、请求方法（GET）、Header信息。 资源处理： 静态资源：直接读取文件（如HTML、CSS、JS）。 动态资源：执行后端代码（如PHP、Node.js），可能涉及数据库查询。 响应生成： 状态码：如200（成功）、304（缓存命中）、404（未找到）。 响应头：包含Content-Type、Cache-Control、Set-Cookie等。 响应体：返回HTML内容或其他数据（如JSON/XML）。
7. 浏览器接收响应 解析HTML： 浏览器解析HTML文档，构建DOM树（Document Object Model）。 加载资源： 遇到外部资源（如CSS、JS、图片）时，浏览器会发起额外的HTTP请求。 关键渲染路径：优先加载影响首屏渲染的资源（如CSS和关键JS）。
8. 渲染页面 构建渲染树： CSSOM（CSS对象模型）：解析CSS规则，形成样式表。 渲染树（Render Tree）：将DOM与CSSOM合并，生成带有样式的节点。 布局（Layout）： 计算每个元素的几何位置（如宽度、高度、位置）。 绘制（Paint）： 将渲染树转换为像素，生成位图。 合成（Composite）： 将多个图层（如文字、图片）合成为最终的页面画面。
9. JavaScript执行与动态更新 脚本阻塞： 默认情况下，JavaScript会阻塞HTML解析和渲染。 使用 async 或 defer 属性可异步加载脚本。 动态修改： JavaScript可能通过DOM API动态修改页面内容（如AJAX请求加载数据）。
10. 完成加载与优化 加载完成标志： load 事件触发，表示所有资源（包括图片、脚本）已加载完毕。
性能优化： 懒加载（Lazy Load）：延迟加载非首屏资源（如图片）。 资源压缩：使用Gzip/Brotli压缩文本资源，WebP压缩图片。 CDN加速：通过全球分布的节点分发静态资源，减少传输延迟。 预加载：通过 提前加载关键资源。 关键性能指标 FP（首次绘制）：浏览器首次绘制任何像素的时间。 FCP（首次内容绘制）：首屏主要内容完成绘制的时间。 LCP（最大内容绘制）：页面中最大元素（如图片、文本块）的加载时间。 CLS（累积布局偏移）：衡量页面稳定性（如布局抖动）。
（2）一个完整的URL的结构
包括协议（如http或https）、域名、端口（默认不写）、路径、查询字符串和#锚点。
http://localhost:5173/lab/backend/study1#java基础-2周（3）DNS的存在意义和作用
（1）域名与IP地址的映射 核心功能：将用户输入的域名（如 www.baidu.com）解析为对应的IP地址（如 14.215.177.39），使计算机能够找到目标服务器。
（2）提升访问效率 缓存机制：DNS服务器会缓存已解析的域名结果，减少重复查询的时间。例如，首次访问 www.example.com 时可能需要多次查询，但后续访问可以直接从缓存中获取IP地址。 负载均衡与加速：某些公共DNS服务（如 Google DNS、Cloudflare DNS）会根据用户的地理位置或网络状况，选择最优的IP地址返回，提升访问速度。
（4）http默认端口号
HTTP默认端口：80（无需显式指定，直接输入域名即可）。
HTTPS默认端口：443（需加密通信时使用）。
非默认端口：需手动指定（如8080、3000等），常见于开发或特殊配置场景。
（5）http和https的区别
HTTPS在HTTP基础上增加了SSL/TLS协议，提供了数据加密、完整性校验和身份验证。
（6）React数据管理包的下载和管理（没懂什么意思，也可能是redux）
在 React 应用中，数据管理通常通过 Redux、MobX 或者 React Context API 等包来实现。
以ReactToolKit为例： 主要步骤：
- 创建管理切片silice（切片名（name）、initialState（初始数据）、reducers（操作数据的方法）
- 导出，在总的store中导入合并。configureStore( { reducer:{...} )
- 在文件入口provider导入store，并使用useSelector（）获取数据。useDispatch（）进行数据操作。
（7）包管理工具
（8）响应式布局的实现
（9）flex布局的属性
包括flex-direction、justify-content、align-items等，控制容器内项目排列和对齐。
（10）flex主轴方向的改变
使用flex-direction属性，可以设置为row、row-reverse、column或column-reverse。
（11）CSS预处理器
（12）实现动画效果的方法
可以通过CSS的@keyframes或JavaScript的动画库（如GreenSock）实现。
（13）CSS角度实现动画
（14）前端CSS单位介绍
包括像素(px)、相对单位(em, rem)、视口宽度(vw)等。
（15）em的标准
em相对于父元素的字体大小，如果没有指定则相对于浏览器默认字体大小。
（16）前端数据存储方法
包括localStorage、sessionStorage、cookies等，用于在客户端存储数据。
（17）版本管理工具的使用
（18）Git的基本概念
（19）Git分支的概念
分支允许从当前代码状态创建一个独立的开发线，便于并行开发和实验。
（20）异步操作的实现过程
描述JavaScript中异步操作的实现，如回调函数、Promises、async/await等。