浏览器原理面试题(01)

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

Trident（Internet Explorer）:
- Internet Explorer 浏览器使用的内核。在现代浏览器中已经不再被广泛使用。
Gecko（Firefox）:
- Mozilla Firefox 浏览器采用的内核。它注重开放标准和可扩展性。
WebKit（Safari）:
- Safari 浏览器最初采用的内核，也是苹果的 iOS 系统上的默认浏览器内核。Chrome 也在一段时间内采用了 WebKit。
Blink（Chrome、Edge）:
- Chrome 浏览器及基于 Chromium 的浏览器（如 Microsoft Edge）采用的内核。Blink 是由Google发起的开源项目，目的是提高浏览器的性能和稳定性。
Servo:
- Servo 是由 Mozilla 开发的一种实验性的浏览器引擎，旨在提供更好的并行处理和性能。
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）: 浏览器通常支持各种插件，如广告拦截器、密码管理器等。插件系统允许用户根据需要扩展浏览器的功能。

浏览器是如何渲染UI的？

HTML解析： 浏览器首先会解析HTML文档。解析过程涉及到构建DOM（文档对象模型），这是一个表示页面结构的树形结构。
CSS解析： 接下来，浏览器解析CSS样式表。这个过程会生成CSS规则树，规定了每个元素如何渲染。
合并DOM和CSSOM： 浏览器将DOM和CSSOM结合起来，形成一个叫做Render Tree（渲染树）的结构。这个树包含了所有需要渲染的节点以及它们的样式信息。
布局（Layout）： 浏览器会根据Render Tree 来计算每个元素在屏幕上的确切位置和大小。这个阶段也叫做"回流"。
绘制（Paint）： 浏览器使用计算好的位置和大小信息来绘制页面上的每个元素。这个阶段也叫做"重绘"。
合成（Composite）： 浏览器将绘制好的元素合成为图层，并将这些图层绘制到屏幕上。这个阶段也叫做"合成"。

这个过程中，浏览器会尽力优化性能，例如使用异步加载脚本、懒加载图片等手段。这就是为什么在一些现代浏览器中你能看到渐进式渲染的效果，页面一边下载一边显示。

需要注意的是，由于现代前端应用通常包含复杂的JavaScript代码，JavaScript的执行也可能触发回流和重绘，因此在写代码时要尽量避免频繁的DOM操作，以提高性能。

DOM Tree是如何构建的？

解析HTML： 当浏览器获取HTML文件后，它开始解析这个文件。解析的过程是逐行读取HTML代码，并将其转化为浏览器能够理解的结构。
创建节点： 解析器根据HTML中的标签创建不同类型的节点。HTML文档中的每个元素（如<div>、<p>）都被表示为一个节点。
构建父子关系： 解析器根据HTML标签的嵌套关系构建父子关系，形成一个树状结构。这个树状结构就是DOM Tree。

举个例子，考虑以下HTML片段：

xml 复制代码

htmlCopy code<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <div>
      <p>Hello, World!</p>
    </div>
  </body>
</html>

相应的DOM Tree可能如下所示：

less 复制代码

markdownCopy code- Document
  - html
    - head
      - title
        - text: "My Page"
    - body
      - div
        - p
          - text: "Hello, World!"

在这个DOM Tree中，每个元素都是一个节点，而标签之间的嵌套关系反映了它们在HTML中的层级结构。文本内容通常作为文本节点的一部分存储在相应的元素节点中。

构建好DOM Tree后，浏览器可以根据这个树状结构来理解文档的结构和层次，然后根据CSS和JavaScript的信息来进行进一步的渲染和交互。

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

重排: 也被称为回流，指的是当 DOM 的结构发生变化，影响了元素的几何属性（比如尺寸、位置等），浏览器会重新计算元素的几何属性，然后重新构建渲染树。
重绘: 当元素的样式（比如颜色、背景等）发生变化，而不影响布局时，浏览器只需重新绘制这个元素的外观，而无需重新计算大小和位置。这个过程开销较小，因为不需要重新布局，只需更新视觉呈现。

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分

重排和重绘代价是非常高的的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。

如何触发重排和重绘？

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

可能触发重排的操作：

添加、删除、更新DOM节点：
- 操作涉及到文档结构的变化会触发重排，因为它可能导致整个页面布局的重新计算。
通过display: none隐藏一个DOM节点：
- 隐藏元素会触发重排，因为它改变了文档的布局。
移动或者给页面中的DOM节点添加动画：
- 这涉及到元素位置的变化，可能导致重排。
用户行为，例如调整窗口大小，改变字号，或者滚动：
- 这些操作通常会引发整个页面布局的重新计算，因此会触发重排。

可能只触发重绘的操作：

通过visibility: hidden隐藏一个DOM节点：
- 隐藏元素虽然会触发重绘，但由于没有影响布局，所以不会触发重排。
添加一个样式表，调整样式属性：
- 修改样式但不影响布局的操作只会触发重绘，而不会触发重排。

什么是浏览器同源策略？

浏览器同源策略是一种安全机制，它限制了来自不同源（指"协议+域名+端口"中任意一个不同）的文档或脚本在浏览器中的交互能力。这限制是为了隔离潜在的恶意文件，防止未经授权的跨站请求，保护用户的隐私和安全。同源策略通过阻止来自不同源的脚本访问对方的 DOM，以及通过 XMLHttpRequest 或 Fetch API 发送跨域请求来实现。

什么是单点登录？

单点登录（Single Sign On，SSO）是一种解决方案，允许用户在多个应用系统中进行一次登录，之后就能够访问所有相互信任的应用系统，而无需重新登录。SSO 通常涉及一个独立的认证中心（passport），用户登录通过认证中心，然后获得一个令牌，该令牌用于在各个子系统之间传递身份信息。这样，用户在登录一次后就可以无缝访问其他系统，提高了用户体验和管理效率。

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

前端渲染： 前端渲染是指在浏览器端使用 JavaScript 根据后端返回的 JSON 数据动态生成页面。前端渲染的优点包括更快的页面加载速度、更流畅的用户交互体验，但缺点是对搜索引擎的友好度较低，且对浏览器性能要求较高。

后端渲染： 后端渲染是指在服务器端直接生成完整的 HTML 页面，然后将其发送给浏览器。后端渲染的优点包括对搜索引擎友好、对浏览器性能要求较低，但缺点是页面加载速度可能较慢，用户体验相对较差。

在实际项目中，可以根据具体需求选择前端渲染或后端渲染，或者采用两者结合的方式（如服务端渲染）来兼顾优势。

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

不用图片： 对于修饰类图片，可以考虑用 CSS 代替，减少对带宽的浪费。
基于屏幕宽度加载图片： 使用 CDN 加载图片，并根据屏幕宽度计算适配尺寸，请求相应裁剪好的图片。
使用 Base64 格式： 对小图标等小图片，可以将其转换为 Base64 格式，减少 HTTP 请求。
雪碧图（Sprite）： 将多个图标整合到一张图片中，减少多个小图标的单独请求。
选择正确的图片格式：
- 使用 WebP 格式（兼容性考虑）。
- 小图使用 PNG 或 SVG。
- 照片使用 JPEG。

通过这些优化策略，可以有效减少页面加载时间，提升用户体验。

题外话：

最近发现了一个副业网站（gaoqian.xwbdktzm.top/#/），分享给准备做副业的铁子们，里面有各样的网创项目，如果进不去的可以试下。如果觉得没用的直接忽略。