浏览器原理面试题01

       本章关于浏览器原理部分的内容主要来源于浏览器工作原理，有精力的非常建议阅读。后续继续更新。

目录

常见的浏览器内核有哪些?

浏览器的主要组成部分是什么？

浏览器是如何渲染UI的？

DOM Tree是如何构建的？

浏览器重绘与重排的区别？

如何触发重排和重绘？

可能触发重排的操作：

可能只触发重绘的操作：

什么是浏览器同源策略？

什么是单点登录？

前端渲染和后端渲染，以及他们的优缺点

如何对项目中的图片进行优化

---

常见的浏览器内核有哪些?

1. Trident（Internet Explorer）:浏览器使用的内核。在现代浏览器中已经不再被广泛使用。

2. Gecko（Firefox）: 浏览器采用的内核。它注重开放标准和可扩展性。

3. WebKit（Safari）:浏览器最初采用的内核，也是苹果的 iOS 系统上的默认浏览器内核。Chrome 也在一段时间内采用了 WebKit。

4. Blink（Chrome、Edge）:Chrome 浏览器及基于 Chromium 的浏览器（如 Microsoft Edge）采用的内核。Blink 是由Google发起的开源项目，目的是提高浏览器的性能和稳定性。

5. Servo:Servo 是由 Mozilla 开发的一种实验性的浏览器引擎，旨在提供更好的并行处理和性能。

6. EdgeHTML（旧版 Edge）:旧版 Microsoft Edge 浏览器采用的内核。然而，Microsoft Edge 在2020年底采用了Chromium，切换到了Blink内核。

浏览器的主要组成部分是什么？

用户界面 -用户界面包括浏览器的各种视觉元素，如地址栏、书签栏、导航按钮、标签页和其他控件。用户通过界面与浏览器进行交互。

浏览器引擎 - 浏览器引擎负责解析HTML和CSS，构建DOM树（文档对象模型）和渲染页面。不同的浏览器使用不同的引擎，例如，Chrome使用Blink引擎，Firefox使用Gecko引擎。。

呈现引擎 - 渲染引擎负责将解析后的内容显示在屏幕上。它处理布局、绘制和重绘，确保页面在浏览器窗口中正确显示。

网络 - 浏览器使用网络模块来处理网络请求。这包括向服务器请求页面、资源下载（如图片、样式表、脚本）以及处理Cookie等。

JavaScript解释器（JavaScript Engine）:JavaScript解释器负责解释和执行JavaScript代码。不同的浏览器使用不同的JavaScript引擎，例如，Chrome使用V8引擎，Firefox使用SpiderMonkey。

用户界面后端 - UI后端用于绘制基本的窗口小部件，如下拉框和对话框。它与操作系统的用户界面API进行交互。

JavaScript 解释器。用于解析和执行 JavaScript 代码。

数据存储。这是持久层。浏览器中有多种方式用于存储数据，包括Cookies、Web Storage（LocalStorage和SessionStorage）、IndexedDB等。这些机制允许网页在本地存储数据，以提高性能和用户体验。

安全模块（Security Module）:安全模块确保用户数据的保密性和完整性。它包括SSL/TLS协议的实现，用于加密在浏览器和服务器之间传输的数据。

插件系统（Plug-in System）:浏览器通常支持各