2024 高级前端面试题之 浏览器模块 「精选篇」

该内容主要整理关于 浏览器模块 的相关面试题，其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。

---

1. 跨标签页通讯

不同标签页间的通讯，本质原理就是去运用一些可以 共享的中间介质，因此比较常用的有以下方法:

• 通过父页面window.open()和子页面postMessage
  • 异步下，通过 window.open('about: blank') 和 tab.location.href = '*'
• 设置同域下共享的localStorage与监听window.onstorage
  • 重复写入相同的值无法触发
  • 会受到浏览器隐身模式等的限制
• 设置共享cookie与不断轮询脏检查(setInterval)
• 借助服务端或者中间层实现

2. 浏览器架构

• 用户界面
• 主进程
• 内核
  • 渲染引擎
  • JS 引擎
    • 执行栈
• 事件触发线程
  • 消息队列
    • 微任务
    • 宏任务
• 网络异步线程
• 定时器线程

3. 渲染机制

3.1 浏览器的渲染机制一般分为以下几个步骤

1. 处理 HTML 并构建 DOM 树。
2. 处理 CSS 构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，计算每个节点的位置。
5. 调用 GPU 绘制，合成图层，显示在屏幕上

• 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢。
• css 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间
• 当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。并且 CSS 也会影响 JS 的执行，只有当解析完样式表才会执行 JS，所以也可以认为这种情况下，CSS 也会暂停构建 DOM

3.2 图层

一般来说，可以把普通文档流看成一个图层。特定的属性可以生成一个新的图层。不同的图层渲染互不影响，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。但也不能生成过多的图层，会引起反作用

通过以下几个常用属性可以生成新图层

• 3D变换：translate3d、translateZ
• will-change
• video、iframe 标签
• 通过动画实现的 opacity 动画转换
• position: fixed

3.3 重绘与回流

当元素的样式发生变化时，浏览器需要触发更新，重新绘制元素。这个过程中，有两种类型的操作，即重绘与回流。

• 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少
• 回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。

【此题目前面CSS模块中有做讲解，不清楚的小伙伴可以去看一下哟（CSS精选篇）】

3.4 JavaScript 会阻塞 DOM 生成

JavaScript 会阻塞 DOM生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的

当渲染进程接收 HTML 文件字节流时，会先开启一个预解析线程，如果遇到 JavaScript 文件或者 CSS 文件，那么预解析线程会提前下载这些数据

• 如果代码里引用了外部的 CSS 文件，那么在执行 JavaScript 之前，还需要等待外部的 CSS 文件下载完成，并解析生成 CSSOM 对象之后，才能执行 JavaScript 脚本。
• 而 JavaScript 引擎在解析 JavaScript 之前，是不知道 JavaScript 是否操纵了 CSSOM 的，所以渲染引擎在遇到 JavaScript 脚本时，不管该脚本是否操纵了 CSSOM，都会执行 CSS 文件下载，解析操作，再执行 JavaScript 脚本。
• 不管 CSS 文件和 JavaScript 文件谁先到达，都要先等到 CSS 文件下载完成并生成 CSSOM，然后再执行 JavaScript 脚本，最后再继续构建 DOM，构建布局树，绘制页面

3.5 缩短白屏时长，可以有以下策略

• 通过内联 JavaScript、内联 CSS 来移除这两种类型的文件下载，这样获取到 HTML 文件之后就可以直接开始渲染流程了。
• 但并不是所有的场合都适合内联，那么还可以尽量减少文件大小，比如通过 webpack 等工具移除一些不必要的注释，并压缩 JavaScript 文件。
• 还可以将一些不需要在解析 HTML 阶段使用的 JavaScript 标记上 sync 或者 defer
• 对于大的 CSS 文件，可以通过媒体查询属性，将其拆分为多个不同用途的 CSS 文件，这样只有在特定的场景下才会加载特定的 CSS 文件。

4. 跨域

1. JSONP
2. CORS
3. nginx反向代理
4. Node 中间层接口转发
5. Proxy
6. websocket
7. document.domain（不常用）
8. postMessage（不常用）
9. window.name（不常用）
10. 扩展阅读

5. 浏览器缓存

1. 强缓存
2. 协商缓存（对比缓存）
3. 缓存场景
4. 讲讲304
5. 强缓存、协商缓存什么时候用哪个
6. 缓存总结
7. cookie和localSrorage、session、indexDB 的区别
8. 什么是 Cookie
9. 什么是 Session
10. Cookie 和 Session 的区别

6. 内存泄露

7. 浏览器API

1. Web Worker
2. Service Worker
3. requestAnimationFrame用法
4. 页面可见
5. 动画帧请求回调函数列表
6. 屏幕刷新频率
7. 动画原理
8. requestAnimationFrame用法
9. 与setTimeout对比
10. 优雅降级

8. 页面加载执行

1. 浏览器事件循环
2. 怎么判断页面是否加载完成
3. css 加载会造成阻塞吗 ？
4. 为什么 JS 阻塞页面加载 ?
5. DOMContentLoaded 与 load 的区别 ?
6. 什么是 CRP,即关键渲染路径? 如何优化

9. history路由和hash路由

10. performance相关

• window.performance.getEntries()