前端面试问题汇总 - 浏览器篇

1. 本地存储有哪些，区别是什么？

Cookies（Cookie）：是存储在用户计算机上的小型文本文件，由网站服务器发送到用户的浏览器，然后在用户访问网站时由浏览器发送回服务器。Cookies 可以用来存储用户的会话信息、登录状态、购物车内容等。
Web Storage（Web 存储）：包括 localStorage 和 sessionStorage 两种类型。它们允许浏览器在用户计算机上本地存储键值对数据，供同一网站的页面使用。
- localStorage：存储的数据没有过期时间，除非被清除或手动删除。
- sessionStorage：存储的数据在当前会话结束时被清除，关闭浏览器窗口或标签页时会话也会结束。
IndexedDB（Indexed Database）：是一种低级 API，用于客户端存储大量结构化数据（例如对象、文件）。IndexedDB 提供了比 Web Storage 更强大和灵活的数据存储能力，允许对存储的数据进行高级查询和索引。
Cache Storage：用于存储缓存的响应，包括来自网络的响应、脚本、样式表、图像等资源。Cache Storage API 可以让开发者控制哪些资源被缓存以及如何使用这些缓存。

2. Url 到浏览器的一个过程有哪些步骤？

URL 解析：浏览器会解析 URL，提取出协议（例如 HTTP、HTTPS）、主机名（例如 www.example.com）、端口号（如果有）、路径等信息。
DNS 查询：如果主机名是一个域名，浏览器会将其发送到 DNS（域名系统）服务器，以获取与该域名相对应的 IP 地址。如果 IP 地址已经存在于浏览器的缓存中，或者是在操作系统的缓存中，那么这一步可以跳过。
建立 TCP 连接：浏览器使用获得的 IP 地址和端口号，与服务器建立 TCP 连接。如果是 HTTPS 协议，还需要进行 SSL/TLS 握手过程建立安全连接。
发起 HTTP 请求：一旦建立了 TCP 连接，浏览器会发送一个 HTTP 请求到服务器，请求的内容包括请求方法（GET、POST 等）、URL、HTTP 头部（包括用户代理、接受的内容类型等信息）以及可选的请求体（对于 POST 请求）。
服务器处理请求：服务器收到请求后，会根据请求的 URL、头部信息等进行相应的处理，可能是查找对应的文件或资源、执行后端代码、查询数据库等。
服务器响应：服务器处理完请求后，会生成一个 HTTP 响应，包括状态码（例如 200 表示成功、404 表示未找到等）、响应头部（包括服务器类型、内容类型等信息）以及响应体（实际返回的内容）。
接收响应：浏览器接收到服务器的响应后，会开始解析响应，根据响应头部的内容类型确定如何处理响应体。对于 HTML 页面，浏览器会解析并渲染页面，对于其他类型的资源（如图像、样式表、JavaScript 文件等），会根据其类型进行相应的处理。
关闭连接：在所有内容都被下载完毕后，浏览器会关闭与服务器的 TCP 连接，除非要继续保持持久连接（HTTP Keep-Alive）以便后续请求。
渲染页面：浏览器会将接收到的 HTML 内容解析成 DOM（文档对象模型），将 CSS 样式应用到文档，执行 JavaScript 代码，并将最终的页面呈现给用户。

3. 渲染和重绘、重排、回流

在前端开发中，"渲染"、"重绘"、"重排"和"回流"都是与页面性能和渲染流程相关的概念，它们之间有些微妙的区别：

渲染：
- 渲染是指将 DOM 树和 CSS 样式表转换为屏幕上的像素的过程。
- 渲染包括了重排和重绘，以及合成步骤。
重绘 (Repaint)：
- 重绘指的是当 DOM 元素的样式发生改变，但不影响其在文档流中的位置时，浏览器会重新绘制该元素的过程。
- 例如，改变颜色、背景颜色等属性。
重排 (Reflow)：
- 重排是指当 DOM 的变化影响了元素的几何属性（宽度、高度、位置等），浏览器需要重新计算元素的几何属性，并重新构建渲染树的过程。
- 重排会触发重绘。
- 重排的成本较高，因为它会涉及到整个页面布局的重新计算。
回流 (Layout)：
- 回流是重排的一种特殊形式，它指的是当 DOM 的变化导致了部分或全部的页面布局发生改变时，浏览器需要重新计算并重新渲染部分或全部的文档的过程。
- 回流是一种比重排更加严重的性能问题，它会影响到页面的所有部分，因此应该尽量避免。

在前端开发中，为了提高页面性能，应尽量减少重排和回流的次数。一些常见的导致重排和回流的操作包括改变元素的尺寸、位置、边距、填充、字体等。因此，在编写代码时应该尽量避免频繁地修改页面布局，并采取一些优化策略，例如使用 CSS3 动画代替 JavaScript 动画、使用 documentFragment 批量操作 DOM、使用 CSS 属性transform和opacity来优化动画等。

4. 进程和线程

进程（Process）和线程（Thread）是计算机操作系统中用于执行程序的两个重要概念，它们之间有一些区别和联系：

进程（Process）：
- 进程是操作系统分配资源的基本单位，每个进程拥有独立的内存空间、代码和数据，彼此之间相互独立，不能直接访问其他进程的资源。
- 每个进程都有自己的地址空间，包括代码段、数据段和堆栈段等，可以在自己的地址空间中进行读写操作，不会被其他进程干扰。
- 进程之间可以通过进程间通信（IPC，Inter-Process Communication）来进行数据交换和共享资源。
线程（Thread）：
- 线程是进程内的执行单元，是 CPU 调度的基本单位。一个进程可以包含多个线程，这些线程共享进程的地址空间和资源。
- 同一个进程内的线程之间可以直接访问共享的内存空间和资源，可以方便地进行数据交换和通信。
- 多线程可以提高程序的并发性和响应速度，可以同时执行多个任务，提高了 CPU 的利用率。
区别：
- 进程是资源分配的基本单位，每个进程有独立的内存空间，相互之间独立；而线程是 CPU 调度的基本单位，同一进程内的线程共享进程的内存空间和资源。
- 进程之间的切换需要切换地址空间和上下文，开销较大；而线程之间的切换只需切换线程的上下文，开销较小。
- 进程之间的通信需要通过 IPC 实现；线程之间可以直接访问共享的内存空间，实现数据共享和通信。

总的来说，进程和线程是操作系统中用于执行程序的两个基本概念，它们在资源分配、内存管理、调度机制和通信方式等方面有所区别，但又有一定的联系，共同完成了程序的执行和资源管理任务。

5. 浏览器渲染原理

获取页面资源：
1. 浏览器首先通过 HTTP 请求从服务器获取页面的 HTML、CSS、JavaScript 和其他资源。
2. HTML 文件定义了页面的结构和内容，CSS 文件定义了页面的样式，JavaScript 文件定义了页面的行为和交互。
构建 DOM 树和 CSSOM 树：
1. 浏览器将获取到的 HTML 解析成 DOM（Document Object Model）树，表示页面的结构和内容。
2. 同时，浏览器也会解析 CSS 文件，构建 CSSOM（CSS Object Model）树，表示页面的样式信息。
3. DOM 树和 CSSOM 树的构建是并行进行的。
生成渲染树（Render Tree）：
1. 浏览器将 DOM 树和 CSSOM 树合并成渲染树，渲染树只包含需要显示的节点和其样式信息。
2. 渲染树中不包含不可见的节点，例如 <head>、display: none 的节点等。
布局（Layout 或 Reflow）：
1. 浏览器根据渲染树中的节点计算它们在页面上的位置和大小。
2. 浏览器会进行布局计算，确定每个节点的几何属性（位置、尺寸等），这个过程也被称为回流（Reflow）。
绘制（Painting）：
1. 浏览器根据渲染树和布局信息，将页面内容绘制到屏幕上。
2. 绘制过程包括绘制页面的背景色、文字、图像、边框等。
合成（Composite）：
1. 浏览器将不同图层（Layer）的绘制结果合成到一起，形成最终的页面。
2. 合成过程利用了硬件加速，提高了页面渲染的性能和效果。

6. 声明变量时，浏览器做了什么？

词法分析（Lexical Analysis）：

浏览器首先对代码进行词法分析，将代码分解成标记（token），包括关键字、标识符、操作符等。

语法解析（Syntax Parsing）：

浏览器解析标记，构建语法树（Syntax Tree），以理解代码的结构和含义。

变量声明提升（Variable Hoisting）：

对于使用 var 声明的变量，浏览器会在编译阶段将它们的声明提升到当前作用域的顶部。
变量的初始化（赋值）部分不会被提升，只有声明部分会被提升。

内存分配（Memory Allocation）：

在变量声明被提升后，浏览器会在内存中分配空间来存储变量的值。
对于简单类型（如数字、布尔值），浏览器会直接在栈内存中分配空间。
对于引用类型（如对象、数组），浏览器会在堆内存中分配空间，并在栈内存中存储对堆内存中对象的引用。

标识符绑定（Identifier Binding）：

浏览器将变量名和存储在内存中的值进行关联，以便在代码执行时能够正确访问和操作变量的值。

初始化（Initialization）：

对于使用 var 声明的变量，浏览器会将其初始化为 undefined，直到实际赋值操作执行。
对于使用 let 或 const 声明的变量，浏览器不会初始化变量，直到变量的初始化语句执行之前，访问该变量会报错（暂时性死区）。