面试浏览器框架八股文十问十答第三期

最新推荐文章于 2024-10-20 17:51:39 发布

程序员小白条

最新推荐文章于 2024-10-20 17:51:39 发布

阅读量1.3k

点赞数 8

分类专栏：面试八股文系列文章标签：面试计算机网络性能优化八股文浏览器前端项目实战

本文链接：https://blog.csdn.net/qq_67358181/article/details/136165478

版权

面试八股文系列专栏收录该内容

147 篇文章 30 订阅

订阅专栏

本文详细介绍了浏览器内核的工作原理，包括渲染引擎、常见内核的比较，以及浏览器的组成和渲染过程。重点讨论了如何优化关键渲染路径以提升用户体验，涉及CSS阻塞、资源加载策略等内容。

摘要由CSDN通过智能技术生成

面试浏览器框架八股文十问十答第三期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）对浏览器内核的理解

浏览器内核是指浏览器用来解析网页内容、渲染页面以及执行 JavaScript 等任务的核心部分。它是浏览器的重要组成部分，直接影响着浏览器的性能、兼容性和功能特性。

浏览器内核通常包括两个主要部分：

渲染引擎（Layout Engine）：也称为排版引擎或呈现引擎，负责解析 HTML、CSS 等网页内容，并将其转换成可视化的页面。渲染引擎会根据网页的结构和样式信息计算页面布局，并将最终的渲染结果呈现给用户。
JavaScript 引擎：负责解析和执行 JavaScript 代码，实现网页的交互功能。JavaScript 引擎会将 JavaScript 代码解释成计算机能够理解和执行的指令，从而实现网页中的动态效果和交互行为。

2）常见的浏览器内核比较

常见的浏览器内核主要包括：

Trident（IE 内核）：由微软开发，主要用于 Internet Explorer 浏览器。在过去，Trident 是市场上最主流的浏览器内核之一，但随着 IE 浏览器的逐渐退出，其影响力逐渐减弱。
Gecko：由 Mozilla 开发，主要用于 Firefox 浏览器。Gecko 内核以其优秀的标准兼容性和强大的功能特性而闻名，被广泛应用于 Firefox 浏览器和其他基于 Mozilla 技术的应用程序中。
WebKit：由苹果公司开发，最初用于 Safari 浏览器。后来，Google 基于 WebKit 开发了自己的渲染引擎 Blink（见下文），并成为了 Chrome 浏览器的内核。WebKit 以其高效的渲染性能和优秀的页面加载速度而受到青睐。
Blink：由 Google 开发，是基于 WebKit 的分支。Blink 内核继承了 WebKit 的优秀特性，并且在性能优化和功能更新方面有着持续的改进。目前，Blink 内核被广泛应用于 Google Chrome 浏览器、Opera 浏览器等多款主流浏览器中。

3）常见浏览器所用内核

一些常见的浏览器及其所用内核包括：

Google Chrome：使用 Blink 渲染引擎。
Mozilla Firefox：使用 Gecko 渲染引擎。
Safari：在 macOS 和 iOS 上使用 WebKit 渲染引擎。
Microsoft Edge：原先使用 Trident 内核，后来转为使用 Chromium 内核，即 Blink 的一个分支。
Internet Explorer：使用 Trident 渲染引擎。

4）浏览器的主要组成部分

浏览器是由多个组件组成的复杂软件系统，其主要组成部分包括：

用户界面（User Interface）：包括地址栏、导航按钮、书签栏等用户可见的部分，用于与用户交互。
浏览器引擎（Browser Engine）：用于管理用户界面和渲染引擎之间的通信，对用户输入进行解释并将其转发到渲染引擎。
渲染引擎（Rendering Engine）：负责解析 HTML、CSS 等页面内容，计算页面布局，并将最终的渲染结果呈现给用户。
网络（Networking）：用于处理网络请求和响应，从服务器获取网页内容和资源。
JavaScript 引擎（JavaScript Engine）：用于解析和执行 JavaScript 代码，实现网页的动态效果和交互行为。
数据存储（Data Storage）：用于存储浏览器的历史记录、Cookie、缓存等数据。
插件系统（Plug-in System）：允许用户安装和使用第三方插件，扩展浏览器的功能。

5）浏览器的渲染过程

浏览器的渲染过程主要包括以下几个步骤：

解析 HTML：浏览器通过网络获取 HTML 文件，并开始解析其中的标签和内容。
构建 DOM 树：解析 HTML 文件时，浏览器会将其中的标签转换成 DOM（Document Object Model）节点，并构建成一棵 DOM 树，用于表示页面的结构。
解析 CSS：浏览器解析 HTML 文件的同时，还会解析其中的 CSS 样式表，构建 CSSOM（CSS Object Model）树，用于表示页面的样式。
合并 DOM 和 CSSOM：浏览器将 DOM 树和 CSSOM 树合并成一棵渲染树（Render Tree），其中只包含需要显示的节点和其样式信息。
布局计算（Layout）：根据渲染树中每个节点的样式和位置信息，浏览器开始计算页面布局，确定每个节点在页面中的精确位置和大小。
绘制（Painting）：根据布局计算得到的结果，浏览器将渲染树中的每个节点转换成实际的像素，并将其绘制在屏幕上，形成最终的渲染结果。
重绘和重排（Repaint & Reflow）：当页面的样式发生变化或者用户交互引起页面结构变化时，浏览器需要重新计算页面布局（重排）和重新绘制页面内容（重绘），以更新页面的显示。

6）浏览器渲染优化

浏览器渲染性能的优化是提高用户体验的关键之一，常见的优化方法包括：

合理使用 CSS 和 JavaScript：减少不必要的 CSS 样式和 JavaScript 代码，优化页面加载速度和渲染性能。
减少重排和重绘：避免频繁地修改页面样式和结构，尽量将修改操作集中在一起执行，以减少浏览器重新计算布局和重新绘制页面的次数。
图片优化：使用合适的图片格式和压缩算法，减小图片文件的大小，加快图片的加载速度。
资源合并和压缩：将多个 CSS 文件和 JavaScript 文件合并成一个，压缩文件大小，减少网络请求次数，提高页面加载速度。
使用 CDN 加速：将静态资源部署到 CDN（Content Delivery Network）上，加速资源的下载和加载。
懒加载和预加载：延迟加载页面中的图片和 JavaScript 脚本，或者提前加载下一页的内容，以优化页面的加载速度和用户体验。

7）渲染过程中遇到 JS 文件如何处理？

当浏览器在渲染过程中遇到 JavaScript 文件时，会暂停 HTML 解析，立即下载并执行 JavaScript 代码。这是因为 JavaScript 可能会修改 DOM 树和 CSSOM 树，对页面的渲染结果产生影响。因此，浏览器会优先加载和执行 JavaScript 代码，以确保页面的渲染和交互行为的正确性。

8）什么是文档的预解析？

文档的预解析是浏览器在解析 HTML 文件时的一个优化过程。在文档预解析阶段，浏览器会提前加载和解析一些特定的资源，以加速页面的加载和渲染过程。预解析的主要工作包括：

提前加载资源：浏览器会提前加载页面中的外部 CSS 文件、JavaScript 文件以及图片等资源，以减少后续页面加载过程中的网络延迟。
解析 HTML 标签：浏览器会解析 HTML 文件中的一些特定标签，例如 <link>、<script>、<img> 等，以提前构建 DOM 树和 CSSOM 树，加速页面的渲染过程。

文档的预解析过程是在浏览器内部进行的，不会对页面的外观和行为产生实质性的影响，但可以显著提升页面的加载速度和用户体验。

9）CSS 如何阻塞文档解析？

在 HTML 文档中，浏览器会按照从上至下的顺序逐行解析，遇到 <link> 和 <style> 标签时，会暂停 HTML 解析，立即开始下载和解析对应的 CSS 文件或者内联 CSS 代码。这意味着 CSS 文件的加载和解析过程会阻塞文档的解析和渲染。

具体来说，CSS 文件的加载和解析会阻塞以下过程：

DOM 树的构建：浏览器会等待 CSS 文件加载完成并解析完毕，才会继续构建 DOM 树。
渲染树的构建：CSS 文件中的样式信息会影响到渲染树的构建，因此浏览器必须等待 CSS 文件解析完成后才能构建渲染树。
页面的首次渲染：浏览器需要等待所有必要的 CSS 文件加载和解析完毕，才能进行页面的首次渲染，否则会出现 FOUC（Flash of Unstyled Content）现象。