1、浏览器渲染过程

• HTML 解析：浏览器首先解析 HTML 文档，构建 DOM 树。在解析过程中，如果遇到外部资源（如 CSS 文件、JavaScript 文件、图片等），会发起相应的请求去获取这些资源。
• CSS 解析：同时，浏览器会解析 CSS 文件，构建 CSSOM（CSS Object Model）树。CSSOM 描述了文档的样式信息，包括每个元素的样式规则。
• 构建渲染树：结合 DOM 树和 CSSOM 树，浏览器构建渲染树。渲染树只包含需要显示的节点和这些节点的样式信息。
• 布局（Layout）：确定每个节点在屏幕上的位置和大小。布局过程会考虑元素的盒模型、定位方式、尺寸等因素。
• 绘制（Painting）：根据渲染树，浏览器将每个节点绘制到屏幕上。绘制过程包括填充颜色、绘制边框、绘制文本等操作。

1. 介绍 flex，适用什么场景，三个核心属性是什么

• Flex 是 CSS 的一种布局方式，全称为 Flexible Box Layout，即弹性盒布局。它提供了一种更加灵活和高效的方式来布局网页元素。

适用场景：

• 自适应布局：可以轻松实现不同屏幕尺寸下的自适应布局，适用于响应式设计。
• 对齐和分布：方便地实现元素的水平和垂直对齐，以及均匀分布。
• 复杂布局：对于复杂的布局需求，如导航栏、表单、卡片布局等，Flex 可以提供简洁的解决方案。

三个核心属性：

• flex-direction：决定主轴的方向，即项目在弹性容器中的排列方向。可以是row（水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。
• flex-wrap：决定当项目在主轴方向上超出弹性容器的尺寸时，是否换行。可以是nowrap（不换行）、wrap（换行）、wrap-reverse（反向换行）。
• justify-content：决定项目在主轴上的对齐方式。可以是flex-start（左对齐或上对齐）、flex-end（右对齐或下对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等）。

1.Electron 底层原理

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它的底层原理主要包括以下几个方面：

• 基于 Chromium 和 Node.js：Electron 结合了 Chromium 浏览器引擎和 Node.js 运行时环境。Chromium 提供了强大的网页渲染能力，而 Node.js 允许在应用程序中使用 JavaScript 进行服务器端编程和访问操作系统的底层功能。
• 主进程和渲染进程：Electron 应用程序分为主进程和渲染进程。主进程负责管理应用程序的生命周期、窗口管理、与操作系统的交互等。渲染进程则负责渲染用户界面，每个窗口都有一个独立的渲染进程。
• 进程间通信：主进程和渲染进程之间可以通过进程间通信（IPC）进行通信。这使得它们可以共享数据、调用对方的功能，并实现复杂的应用程序逻辑。

2.Electron 缺点

• 体积较大：由于包含了 Chromium 和 Node.js 等组件，Electron 应用程序的体积通常比较大。这可能会导致下载和安装时间较长，占用较多的磁盘空间。
• 性能问题：虽然 Electron 提供了强大的功能，但与原生应用程序相比，它可能在性能方面存在一些不足。特别是在处理大量图形渲染、复杂计算或高频率的 I/O 操作时，可能会出现性能瓶颈。
• 安全风险：由于 Electron 应用程序可以访问操作系统的底层功能，存在一定的安全风险。如果应用程序存在漏洞，可能会被攻击者利用来获取系统权限或执行恶意代码。

3. 为什么 Electron 能渲染 DOM

Electron 能渲染 DOM 是因为它结合了 Chromium 浏览器引擎。Chromium 是一个开源的浏览器项目，它具有强大的网页渲染能力，可以解析 HTML、CSS 和 JavaScript，并将其渲染为可视化的用户界面。

Electron 利用 Chromium 的渲染引擎，在应用程序中创建一个或多个窗口，并在这些窗口中加载网页内容。网页内容可以是本地的 HTML 文件、远程服务器上的网页或通过 JavaScript 动态生成的内容。通过这种方式，Electron 可以像浏览器一样渲染 DOM，并提供丰富的用户界面交互功能。

1.async 和 defer，使用 async 要注意什么吗

• async和defer都是用于在 HTML 中加载外部脚本的属性。

async属性的作用是让脚本异步加载，不阻塞页面的渲染。当脚本加载完成后，会立即执行。使用async的注意事项有：

• 脚本的执行顺序不确定：由于脚本是异步加载的，所以它们的执行顺序可能与在 HTML 中出现的顺序不同。如果多个脚本之间存在依赖关系，需要特别注意执行顺序的问题。
• 可能会在页面尚未完全加载时执行：如果脚本的执行依赖于页面的某些元素或状态，可能会出现问题。因为脚本可能在页面尚未完全加载时就执行了。

defer属性的作用是让脚本延迟加载，在页面完全加载后再执行。脚本的执行顺序与在 HTML 中出现的顺序相同。

2. 事件循环

事件循环是 JavaScript 运行时的一种机制，用于处理异步任务和事件。它的主要作用是不断地检查任务队列，当有任务可执行时，就将其取出并执行。

事件循环的工作流程如下：

• 执行同步任务：JavaScript 引擎首先执行同步任务，即代码中按照顺序依次执行的任务。
• 检查任务队列：当同步任务执行完成后，JavaScript 引擎会检查任务队列中是否有可执行的异步任务。异步任务包括定时器、网络请求、事件处理等。
• 执行异步任务：如果任务队列中有可执行的异步任务，JavaScript 引擎会将其取出并执行。执行完成后，继续检查任务队列，重复这个过程。

事件循环使得 JavaScript 可以在不阻塞主线程的情况下处理异步任务，提高了程序的响应性和性能。

3. 宏队列细分为哪些队列

在 JavaScript 中，宏任务队列可以细分为以下几种队列：

• 定时器队列（Timer Queue）：用于存储由setTimeout()和setInterval()设置的定时器任务。
• I/O 队列（I/O Queue）：用于存储由异步 I/O 操作（如文件读取、网络请求等）触发的任务。
• UI 渲染队列（UI Rendering Queue）：用于存储与用户界面渲染相关的任务，如浏览器的重绘和回流操作。

当事件循环检查宏任务队列时，会按照队列的顺序依次取出任务并执行。不同类型的任务可能会在不同的队列中等待执行。

4、js 实现异步的方式有哪些，各个方式之间的区别

• 回调函数

  • 这是最传统的异步实现方式。将一个函数作为参数传递给另一个函数，当异步操作完成后，调用这个回调函数来处理结果。
  • 缺点是容易导致回调地狱，代码可读性和可维护性差。

• Promise

  • Promise 是一种更优雅的异步处理方式。它代表了一个异步操作的最终完成或失败，并提供了一种统一的接口来处理异步操作的结果。
  • Promise 可以链式调用，避免了回调地狱的问题。同时，它还提供了then、catch、finally等方法来处理不同的状态。

• async/await

  • 这是基于 Promise 的语法糖，使异步代码看起来像同步代码一样。使用async关键字定义一个异步函数，在函数内部可以使用await关键字等待一个 Promise 的结果。
  • 大大提高了异步代码的可读性和可维护性，同时也更容易进行错误处理。

• 事件监听和发布 / 订阅模式

  • 通过监听特定的事件，当异步操作完成后触发相应的事件，然后在事件处理函数中处理结果。
  • 发布 / 订阅模式则是一种更通用的事件处理方式，允许不同的组件之间进行松耦合的通信。

1.Webpack 的 loader 和 plugin

• Loader：

  • 作用：Loader 用于将不同类型的文件转换为 Webpack 能够处理的模块。例如，将 CSS 文件转换为 JavaScript 模块，将图片文件转换为数据 URL 等。
  • 工作原理：当 Webpack 遇到需要处理的文件时，会根据文件的类型和配置的 Loader 规则，依次调用相应的 Loader 进行处理。Loader 可以对文件进行转换、压缩、优化等操作，并将处理后的结果返回给 Webpack。

• Plugin：

  • 作用：Plugin 用于扩展 Webpack 的功能。可以在 Webpack 的不同阶段执行自定义的任务，如打包优化、代码分割、生成静态资源等。
  • 工作原理：Plugin 通过在 Webpack 的构建过程中注册特定的事件钩子，在相应的阶段执行自定义的逻辑。Plugin 可以访问 Webpack 的内部状态和配置信息，并对构建过程进行干预和控制。