前端基础常见问题
浏览器的运行原理
- 用户输入 URL 用户在浏览器的地址栏输入 URL，如 https://www.example.com，并按下回车。
- DNS 解析 浏览器会解析域名以获得对应的 IP 地址，这个过程可能会查询本地缓存、操作系统缓存，或者通过 DNS 服务器来获取。
- 发送 HTTP/HTTPS 请求 获取到 IP 地址后，浏览器向该服务器发送 HTTP 或 HTTPS 请求，包括请求的类型（GET, POST 等）、请求头等信息。
- 服务器响应 服务器接收到请求后，处理请求并返回响应，包括状态码（如 200 OK）、响应头和响应体（通常是 HTML 文档）。
- 解析响应 浏览器接收服务器响应并开始解析响应体中的 HTML 内容。
浏览器的渲染过程
- 构建 DOM 树 浏览器首先解析 HTML 文档，逐行读取 HTML 标签，并将其转化为一个由节点（Node）组成的 DOM 树（Document Object Model）。DOM 树表示页面的结构和内容。
- 构建 CSSOM 树 同时，浏览器还会解析 CSS（包括内联样式、嵌入式样式和外部样式表），构建 CSSOM 树（CSS Object Model），表示页面的样式。
- 生成渲染树 浏览器结合 DOM 树和 CSSOM 树生成 渲染树（Render Tree），渲染树包含了每个可见元素的样式和内容。注意，渲染树不包含不可见的元素（如 display: none 的元素）。
- 布局（Reflow） 有了渲染树，浏览器开始计算每个元素的位置和大小。这个过程称为 布局（或称为 回流）。浏览器根据渲染树确定元素在屏幕上的具体位置和占用的空间。
布局过程会考虑页面的流式布局模型（如盒模型、浮动、定位等）来决定每个元素的最终尺寸和位置。
- 绘制（Painting） 布局完成后，浏览器将渲染树中的每个节点转换为实际的像素，并绘制到屏幕上。这个过程称为 绘制。 绘制过程包括背景、边框、文本、阴影等各种视觉样式的绘制。
- 合成和分层 对于复杂的页面，浏览器可能会将页面分成多个层（Layer），这些层可能会独立绘制，然后在合成阶段组合成最终的画面。 浏览器的渲染引擎将这些层合成在一起，生成最终显示给用户的内容。
常见的异步解决方案的原理
- 回调函数
- 发布订阅-事件函数
- Promise:
- Generator
- async、await
防抖和节流
防抖（debounce）：短时间内多次触发同一事件，只执行最后一次（非立即执行），或者只执行最开始的一次（立即执行），中间的不执行。
节流(throttle)：连续触发事件但是在n秒中只执行一次函数。即 2n 秒内执行 2 次… 。节流如字面意思，会稀释函数的执行频率。
函数式编程
函数式编程是一种编程范式，其中的计算过程是由函数调用组成的。函数式编程通常强调不可变数据和无副作用的函数，即一个函数在给定相同输入时总是返回相同输出，而且不会改变程序的状态。 好处：
- 代码简洁，开发快速
- 可读性强，易于理解
- 没有副作用，不会修改状态，只是表达式
如何实现虚拟滚动
-
确定视窗位置：通过获取列表滚动区域的scrollTop属性，确定当前视窗的位置;
-
计算需要渲染的节点：根据视窗位置和子节点的高度，计算出需要真实渲染的节点范围。可以使用Math.floor(scrollTop/itemHeight)和Math.ceil(viewHeight/itemHeight)来确定起始索引和渲染的节点数量;
-
移动渲染的节点到视窗内：将需要渲染的节点移动到视窗内，可以通过修改节点的位置或使用其他方式实现;
-
按需加载数据：根据滚动位置，动态加载相应的数据，只加载当前视窗可见范围内的数据，减少数据量和渲染负担;
-
处理滚动事件：监听滚动事件，根据滚动位置实时更新需要渲染的节点和数据。