前端常见面试题⑤

41、您对 React 的最新更新有何看法 - 回顾一下 React Hooks 的优点和用途。

React Hooks 引入了一种在功能组件中编写可重用和有状态逻辑的新方法。它们简化了组件组合，减少了对类组件的需求，并通过允许在不编写类的情况下使用状态和其他 React 功能来提高代码的可读性和可维护性。

42、虚拟 DOM 和 Shadow DOM 实现。React 协调是如何工作的？

React 使用虚拟 DOM 来高效地更新和渲染组件。它创建实际 DOM 的轻量级表示，并执行比较算法来确定更新真实 DOM 所需的最小更改集。React 的协调过程使虚拟 DOM 更改与实际 DOM 保持一致，从而优化渲染。

43、如何扩展网站？

扩展网站涉及各种策略，例如优化代码和资产、实施缓存机制、利用内容交付网络 (CDN)、负载平衡以及通过添加更多服务器进行水平扩展。此外，数据库优化、高效的资源利用和性能监控对于扩展网站至关重要。

44、JavaScript 中的 polyfill 是什么？

Polyfill 是一段代码，可以在本机不支持它的旧浏览器上提供现代功能。它通过使用 JavaScript 实现缺失的功能或 API 来填补浏览器兼容性方面的空白。Polyfill 允许开发人员使用最新标准编写代码，同时确保向后兼容性。

45、“use strict”有什么作用？

“use strict”是一个启用严格模式的 JavaScript 指令。当在脚本或函数的开头使用时，它会强制执行更严格的规则并防止常见错误。严格模式会禁用某些容易出错的功能，帮助捕获无声错误，并促进更安全、更可靠的代码。

46、块元素和行内元素有什么区别？

块元素被格式化为块并从新行开始，占据可用的整个宽度。它们可以应用宽度、高度、边距和填充属性。

内联元素在文本流中格式化，并且不从新行开始。它们仅根据其内容占用必要的空间，并且不能应用宽度、高度或边距。

47、使用 typeof、instanceof 和 Object.prototype.toString 解释类型强制。

类型强制是 JavaScript 中值从一种类型自动转换为另一种类型。typeof 是一个一元运算符，它返回一个指示操作数类型的字符串。instanceof 用于检查对象是否是特定构造函数的实例。

Object.prototype.toString 是一种返回对象类型的字符串表示形式的方法。

48、回流焊和重涂有什么区别？

当对元素的样式进行不影响其布局的更改（例如更改背景颜色）时，就会发生重绘。重绘相对较快，因为它们只涉及重绘像素。

另一方面，当对元素的布局进行更改（例如更改其尺寸或位置）时，就会发生重排。回流的计算成本更高，因为它们涉及重新计算受影响元素的布局。

49、什么是关键渲染路径？

关键渲染路径是指浏览器渲染网页所采取的步骤顺序。它包括解析 HTML、构建 DOM 树、渲染 CSSOM、执行布局以及在屏幕上绘制像素。优化关键渲染路径有助于提高页面的加载和渲染性能。

50、如何使用 Web API 在 div 元素内添加 span 元素？

您可以使用 DOM API 的“createElement”和“appendChild”方法创建新的“span”元素并将其作为子元素附加到“div”元素。

const divElement = document.createElement(‘div’);​​​​​​​

const spanElement = document.createElement(‘span’);​​​​​​​

divElement.appendChild(spanElement);