面试题-浏览器

浏览器面试核心知识点

一、从URL输入到页面加载的全过程

1. 整体流程概述

1. 输入URL：用户在浏览器地址栏中输入URL
2. 缓存查找：浏览器先查看各级缓存是否有该地址页面
3. DNS域名解析：解析URL中的域名对应IP地址
4. TCP连接建立：与服务器建立TCP连接（三次握手）
5. HTTP请求发送：发送HTTP请求报文
6. 服务器响应：服务器处理请求并返回响应内容
7. TCP连接关闭：通过四次挥手释放TCP连接
8. 浏览器渲染：解析HTML、CSS、JavaScript并渲染页面

2. 缓存查找过程

• 浏览器缓存：浏览器记录DNS一段时间，是第一个解析DNS的地方
• 操作系统缓存：若浏览器缓存无记录，则调用操作系统记录
• 路由器缓存：若上述均失败，继续搜索路由器缓存
• ISP缓存：最后向ISP(互联网服务提供商)搜索

3. DNS域名解析

• DNS服务器基于UDP协议
• 支持递归查询和迭代查询两种方式
• 从根域名服务器开始，依次查询顶级域名服务器、权威域名服务器等

4. 浏览器渲染流程

1. 构建DOM树：解析HTML生成DOM树
2. 构建CSS规则树：解析CSS生成CSSOM树
3. 构建渲染树：结合DOM和CSSOM构建渲染树
4. 布局（Layout）：计算每个节点的屏幕位置
5. 绘制（Painting）：遍历渲染树并绘制每个节点
6. JavaScript解析执行：创建执行上下文，处理变量提升、函数提升等

从输入URL到页面加载的主干流程

二、浏览器渲染机制

1. 浏览器主要组成部分

1. 用户界面：地址栏、前进/后退按钮、书签菜单等
2. 浏览器引擎：在用户界面和呈现引擎之间传送指令
3. 呈现引擎：负责解析HTML和CSS并渲染内容
4. 网络：处理网络请求如HTTP请求，提供平台无关接口
5. 用户界面后端：绘制基本窗口小部件
6. JavaScript解释器：解析和执行JavaScript代码
7. 数据存储：持久层，如Cookie、localStorage等

Chrome浏览器每个标签页对应一个独立的呈现引擎实例和进程

2. DOM树构建过程

1. 转码：将接收到的二进制数据按指定编码转为HTML字符串
2. 生成Tokens：将HTML字符串解析成Tokens
3. 构建Nodes：为Node添加属性，确定父子兄弟关系
4. 生成DOM Tree：通过节点间的指针关系构建完整DOM树

3. 重排(Reflow)与重绘(Repaint)

• 重排/回流：当DOM变化影响元素几何信息时，浏览器重新计算元素位置和大小的过程
• 重绘：元素外观变化但不影响布局时，重新绘制元素的过程

重排必然导致重绘，但重绘不一定导致重排

4. 触发重排和重绘的操作

• 添加、删除、更新DOM节点
• 隐藏DOM节点（display: none触发重排和重绘；visibility: hidden只触发重绘）
• 移动或为DOM节点添加动画
• 修改CSS样式属性
• 用户交互（调整窗口大小、改变字号、滚动等）

5. 避免重排和重绘的方法

1. 集中改变样式：避免逐条修改DOM样式
2. 避免循环读取DOM属性：不要在循环中将DOM属性作为变量
3. 使用fixed/absolute定位：修改这类元素的CSS不会触发重排
4. 避免使用table布局：小改动可能导致整个table重新布局
5. 动画使用GPU加速：使用3D变换触发GPU加速
6. 提升为合成层：使用will-change属性创建独立渲染层

#target {
  will-change: transform;
}

三、浏览器缓存机制

1. 缓存机制概述

浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档，而不需要再次向服务器发出请求。

2. 强制缓存

强制缓存是浏览器直接从本地缓存中读取资源，不向服务器发送请求的过程。控制强制缓存的HTTP头字段有：

• Expires：HTTP/1.0的产物，表示资源过期时间（绝对时间）
• Cache-Control：HTTP/1.1的产物，优先级高于Expires，可设置多种指令
  • max-age：资源最大缓存时间（相对时间，单位秒）
  • no-cache：需要协商缓存验证
  • no-store：禁止缓存

3. 协商缓存

强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器决定是否使用缓存的过程。控制协商缓存的HTTP头字段有：

• Last-Modified/If-Modified-Since：基于资源修改时间的验证
• ETag/If-None-Match：基于资源唯一标识的验证，优先级高于Last-Modified

4. 304状态码过程

1. 浏览器请求资源时首先检查强缓存（Expires和Cache-Control）
2. 强缓存失效后，进入协商缓存阶段，验证ETag
3. 然后验证Last-Modify/If-Modify-Since
4. 如果资源未修改，服务器返回304状态码，浏览器使用本地缓存

浏览器缓存机制

四、浏览器存储

Cookie、sessionStorage、localStorage的区别

特性	Cookie	sessionStorage	localStorage
存储大小	不超过4KB	约5MB	约5MB
过期时间	可设置过期时间，未设置则会话结束后失效	当前浏览器窗口关闭后自动删除	永久存储，除非主动删除
作用域	可设置path限制，默认同域名共享	仅当前窗口或标签页	同域名共享
与服务器通信	每次请求自动携带	不与服务器通信	不与服务器通信

五、进程、线程与协程

1. 基本概念

• 进程：具有独立功能的程序在数据集上的动态执行过程，是操作系统资源分配和调度的独立单位
• 线程：程序执行流的最小单元，是处理器调度和分派的基本单位
• 协程：基于线程之上的更轻量级存在，由程序员管理的用户空间线程

2. 进程与线程的区别

• 调度：线程是调度和分配的基本单位，进程是拥有资源的基本单位
• 并发性：不仅进程之间可以并发，同一进程的多个线程之间也可并发
• 资源：进程拥有独立资源，线程共享所属进程的资源
• 系统开销：创建和销毁进程的开销远大于线程
• 健壮性：一个进程崩溃不会影响其他进程，但一个线程崩溃可能导致整个进程崩溃

3. 进程间通信方式

• 管道(Pipe)：半双工，仅用于有亲缘关系的进程间
• 有名管道(Named Pipe)：半双工，允许无亲缘关系进程间通信
• 信号(Signal)：通知接收进程某个事件已发生
• 消息队列(Message Queue)：存放在内核中的消息链表，克服了信号传递信息少等缺点
• 共享内存(Shared Memory)：最快的IPC方式，多个进程可直接访问同一段物理内存
• 信号量(Semaphore)：计数器，用于控制多个进程对共享资源的访问
• 套接字(Socket)：可用于不同机器间的进程通信

六、浏览器兼容性

1. CSS初始化

不同浏览器的CSS默认样式不同，需进行初始化以保证一致性。常见方法：

• 手动重置：* { margin: 0; padding: 0; }
• 使用第三方库：如normalize.css

2. 浏览器私有属性前缀

• Firefox：-moz-
• Chrome、Safari：-webkit-
• Opera：-o- / -xv-
• IE：-ms-（仅IE 8+支持）

3. CSS Hack

• 条件Hack：针对不同IE版本编写不同代码
• 属性级Hack：在CSS属性前添加特定前缀
• 选择符级Hack：针对特定浏览器编写特定选择器

七、JavaScript垃圾回收机制

1. 垃圾回收概述

浏览器的JavaScript具有自动垃圾回收机制(GC: Garbage Collection)，定期找出不再使用的变量并释放其内存。

2. 主要垃圾回收算法

• 标记清除(Mark and Sweep)：最常用的算法，标记"进入环境"和"离开环境"的变量
• 引用计数(Reference Counting)：跟踪每个值被引用的次数，引用次数为0时回收
• 分代收集：根据对象存活时间将内存分为不同代，对不同代采用不同策略

3. 内存泄漏的常见原因

1. 全局变量：未声明的变量会成为全局变量
2. 闭包：闭包会引用父函数的变量，导致无法回收
3. DOM元素引用：当DOM元素被删除但仍有引用时
4. 定时器：未清除的setInterval/setTimeout会导致内存泄漏

4. 内存优化技巧

1. 手动释放内存：将不再使用的变量设为null
2. 避免不必要的全局变量
3. 及时清除定时器和事件监听器
4. 减少闭包的使用

参考资料

• DNS 域名解析过程
• 浏览器的工作原理
• 彻底理解浏览器的缓存机制
• 一文搞懂进程、线程、协程及 JS 协程的发展
• 深入了解现代 Web 浏览器
• 无线性能优化：Composite
• 面试题