Zoom社招前端面经

1. 了解事件循环机制么？

JS 中的事件循环（Event Loop）是一种用于管理和调度异步任务执行的机制。它使得 JS 可以处理异步操作，如定时器、事件处理、网络请求等，而不会阻塞主线程的执行。

2. 说一下什么是宏任务微任务，为什么要定义这两种任务类型？

宏任务（macro tasks）和微任务（micro tasks）是 JavaScript 引擎中用于管理异步任务执行顺序的两种任务类型。

宏任务（Macro tasks）： 是指那些需要在主线程中执行的任务，它们包括但不限于：

  • 定时器任务（Timers）：通过 setTimeout、setInterval 创建的任务。
  • I/O 操作任务（I/O operations）：例如文件读写、网络请求等异步操作。
  • 渲染事件（UI Rendering）：处理用户交互事件（例如鼠标点击、键盘事件等）的任务。
  • 事件处理器任务（Event handlers）：事件监听器、事件回调等。
    微任务（Micro tasks）： 是指在当前任务执行完成后立即执行的任务，它们通常包括：
  • Promise 回调（Promise callbacks）：使用 Promise 对象的 then 方法添加的回调函数。
  • MutationObserver 回调：通过 MutationObserver 观察 DOM 变化并触发的任务。
  • process.nextTick（在 Node.js 环境中）：在事件循环的当前回合结束时执行的任务。
    宏任务和微任务的引入使得 JavaScript 引擎能够更好地处理异步任务。宏任务用于表示一组相对较大的任务单元，而微任务用于表示一组相对较小、优先级较高的任务单元。通过微任务，我们可以在宏任务执行完成后立即执行一些重要的任务，如更新 UI、处理 Promise 的回调等，以提高应用的响应速度和用户体验。

3. ES 模块和 CommonJS 模块化方案有什么区别？ - 规范来源：

ES（ECMAScript）： ES 模块化是由 ECMAScript 标准规定的，属于 JavaScript 语言本身的一部分。它在 ES6（ECMAScript 2015）中被引入，并已成为 JavaScript 的标准模块化方案。

CommonJS：CommonJS 是 Node.js 中使用的模块化规范，最初是为了解决 JavaScript 在服务器端的模块化问题而创建的。虽然它不是 JavaScript 语言的一部分，但在 Node.js 生态系统中得到了广泛应用。 - 语法和特性：

ES 模块：ES 模块使用 import 和 export 关键字来导入和导出模块。它支持静态解析，模块加载是异步的，模块的引用是动态的。

CommonJS：CommonJS 使用 require() 函数来导入模块，使用 module.exports 或 exports 来导出模块。它是同步加载的，模块的引用是静态的。

用途和环境：

  • ES 模块：ES 模块广泛应用于现代的 Web 开发中，可以在浏览器环境和 Node.js 环境中使用。
  • CommonJS：CommonJS 主要用于 Node.js 环境，用于组织服务器端的 JavaScript 代码，例如构建 web 服务器、文件系统操作等。

动态性：

  • ES 模块：ES 模块的静态解析意味着模块的依赖关系在代码执行前已经确定，因此它不支持动态导入。
  • CommonJS：CommonJS 支持动态导入，可以在运行时根据条件加载模块。

4. ES 模块中 export 出去的对象能被修改么？

在 ES 模块中，export 出去的对象默认是只读的，不能被修改。当一个对象被导出后，在其他模块中引入该对象时，只能读取其属性和方法，而不能修改它们。

5. ES 和 CommonJS 分别是如何处理循环引用的？

ES 模块：ES 模块对循环引用有着严格的限制，当发生循环引用时，ES 模块会将被引用的模块视为尚未准备好，因此会导致循环引用的模块导出一个空的对象或空值。

CommonJS 在处理循环引用时更为宽松，它会在加载模块时记录模块的导出值，即使发生循环引用也不会导致问题。CommonJS 模块系统允许循环引用中的模块导出部分已经准备好的值。

6. 使用过 decorator 和 symbol 么？

装饰器（Decorator）： 装饰器是一种用于修改类、方法、属性或参数的声明性语法。它们以 @ 符号开头，通常放置在类、方法或属性之前，并可以通过添加元数据或修改行为来扩展或修改它们的行为。

符号（Symbol）： 符号是 JavaScript 中的一种基本数据类型，用于创建唯一的、不可变的标识符。符号可以用来创建对象的私有成员、隐藏内部实现细节，或用作对象属性的键，以确保属性名称的唯一性。

7. TS 中 never 和 void 有什么区别？

void： - void 表示函数没有返回值，或者说函数返回的是 undefined。 - 当一个函数没有显式指定返回值类型时，它的返回类型默认为 void。 - 不能对 void 类型的变量赋予除 undefined 以外的值。

never: - never 表示函数永远不会正常返回，或者说函数会抛出异常或无限循环。 - 通常 never 类型用于表示永远不会执行完的函数或抛出异常的函数，或者在类型系统中表示不可能发生的情况。 - 可以将 never 类型赋值给任何其他类型，但是反过来不行。

8. 如何避免 React 多次重复渲染？

使用 PureComponent 或 React.memo使用 useCallback 和 useMemo 进行性能优化使用 React.lazy 延迟组件创建

9. 说一下 git rebase, git cherry-pick 的用法？

rebase:

git rebase <base>
git checkout <branch>

其中 是要重新应用提交的目标分支， 是重新应用提交的基准点（通常是另一个分支）。这将会将 上的提交按顺序逐个应用到 上，并移动 指向的提交记录。
cherry-pick:

git cherry-pick <commit-hash>

git cherry-pick 用于选择并应用一个或多个提交到当前分支上，它可以用来将某个分支上的特定提交应用到当前分支上，而不需要将整个分支合并过来。

10. 说一下什么是重绘，重排？getBoundingClientRect 会导致重排么？

重绘（Repaint）：

重绘是指当元素样式发生变化，但不影响其几何属性（如位置和大小）时，浏览器重新绘制元素的过程。换句话说，重绘只会更新元素的样式，而不会影响元素的布局。

重排（Reflow）：

重排是指当元素的几何属性发生变化，例如尺寸、位置、隐藏或显示等，导致浏览器重新计算元素的几何属性和页面布局的过程。重排可能会导致整个页面的重新布局，对性能有较大影响。

getBoundingClientRect 不会导致重排

11. position:fixed 会失效么？在哪些场景会失效？

父级元素使用了 transform 或 perspective 属性 - 父级元素使用了 overflow: hidden 属性

12.requestAnimationFrame 和 requestIdleCallback 有什么区别？

requestAnimationFrame: requestAnimationFrame 是一个用于在下一次浏览器重绘之前执行指定的回调函数的方法。它通常用于执行与动画相关的任务，以确保动画的流畅性和性能。

调用时机：requestAnimationFrame 的回调函数会在浏览器下一次绘制之前执行，通常在每秒约 60 次的频率下执行，这与浏览器的刷新率相匹配（通常为每秒 60 次）。

用途：requestAnimationFrame 适用于需要在动画中更新界面状态的场景，如实现平滑的动画效果、制作游戏等。

requestIdleCallback：: requestIdleCallback 是一个用于在浏览器空闲时执行指定的回调函数的方法。它通常用于执行一些低优先级的任务，以确保不会影响到页面的交互和动画性能。

调用时机：requestIdleCallback 的回调函数会在浏览器空闲时执行，即在浏览器没有其他任务需要执行时，会尽快执行注册的回调函数。

用途：requestIdleCallback 适用于执行一些低优先级的任务，如执行分析、预加载资源、后台数据同步等。

13. react 中组件销毁时会自动回收 ref 么？

在 React 中，组件销毁时并不会自动回收 ref。ref 是一个特殊的属性，用于引用组件实例或 DOM 元素，在组件销毁时，ref 引用的对象并不会自动被销毁，而是需要手动进行清理操作。

  1. 以下代码的输出结果是什么？
async function async1() {console.log("async1 start");await async2();console.log("async1 end");
}async function async2() {console.log("async2");
}console.log("script start");setTimeout(function () {console.log("setTimeout");
}, 0);async1();new Promise(function (resolve) {console.log("promise1");resolve();
}).then(function () {console.log("promise2");
});console.log("script end");

answer:

"script start";
"async1 start";
"async2";
"promise1";
"script end";
"async1 end";
"promise2";
"setTimeout";
  1. 按要求实现以下功能：
    实现前端一个并发请求控制函数 1. 输入URL数组 和 限制请求数 2. 按照 限制请求数 控制前端同时可以并发请求数量 3. 请求操作直接用 window.fetch

Answer:

// Example usage
const urls = ['https://api.example.com/data1','https://api.example.com/data2','https://api.example.com/data3',// Add more URLs as needed
];const limit = 2;async function concurrentRequests(urls, limit) {const results = [];const inFlightRequests = [];async function makeRequest(url) {try {const response = await fetch(url);const data = await response.json();results.push(data);} catch (error) {results.push({ error: error.message });}}for (let i = 0; i < urls.length; i++) {const request = makeRequest(urls[i]);inFlightRequests.push(request);if (inFlightRequests.length === limit || i === urls.length - 1) {await Promise.all(inFlightRequests);inFlightRequests.length = 0;}}return results;
}concurrentRequests(urls, limit).then(results => console.log(results)).catch(error => console.error(error));

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/861937.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

群晖系统百度网盘套件卸载之后无法再次安装 ContainerManager项目无法删除

群晖系统百度网盘套件卸载之后无法再次安装 ContainerManager项目无法删除

前言 最近重新组了个NAS&#xff0c;在套件迁移的时候遇到个头疼的问题。在用矿神的百度网盘在迁移的时候出错了&#xff0c;于是我自己删掉baiduapp得容器和镜像然后卸载套件。不知道中间出了啥问题&#xff0c;套件是已经卸载了&#xff0c;但是群晖ContainerManager套件中的…
阅读更多...
Adobe Indesign 操作

Adobe Indesign 操作

页面设计 页面设置 版面&#xff1a;图文和空白部分的总和。 版心&#xff1a;规划在版面中排印文本和图片的部分。 开本&#xff1a;单个页面的宽度和高度。 如图所示&#xff0c;新建文件&#xff0c;自定义是210297毫米。这个数据是开本大小。 点击“边距和分栏”&#…
阅读更多...
Vue3学习笔记＜-＞创建第一个vue项目

Vue3学习笔记＜-＞创建第一个vue项目

新建一个项目目录 找一个盘新建一个目录&#xff0c;我这里在D盘创建一个vuedemo目录作为项目存放的目录。使用idea打开目录。   单击ieda底部的按钮“Terminal”&#xff0c;打开命令行窗口&#xff0c;如果命令行窗口当前目录不是“vuedemo”&#xff0c;就切换到“vuedem…
阅读更多...
抖音营销新策略：MessageBox与HubSpot集成，引领企业获客新潮流

抖音营销新策略：MessageBox与HubSpot集成，引领企业获客新潮流

在全球数字化浪潮中&#xff0c;抖音以其独特的短视频形式、庞大的用户群体和高度互动性&#xff0c;成为了企业出海战略中不可或缺的一环。抖音营销不仅仅是简单的内容发布和互动&#xff0c;它更是一种深度策略和创新思维的体现。今天将深入探讨抖音营销的核心价值、应用场景…
阅读更多...
shell：使用结构化语句（for、while循环）

shell：使用结构化语句（for、while循环）

1. for命令 下面是bash shell中for命令的基本格式。 for var in list docommands done每次for命令遍历值列表&#xff0c;它都会将列表中的下个值赋给$test变量。$test变量可以像for 命令语句中的其他脚本变量一样使用。在最后一次迭代后&#xff0c;$test变量的值会在shell脚…
阅读更多...
了解和解决“vcruntime140_1.dll”相关问题，有效修复vcruntime140_1.dll错误弹窗问题

了解和解决“vcruntime140_1.dll”相关问题，有效修复vcruntime140_1.dll错误弹窗问题

在Windows操作系统中&#xff0c;经常会遇到各种DLL&#xff08;动态链接库&#xff09;错误&#xff0c;它们是Windows应用运行不可或缺的一部分。其中&#xff0c;“vcruntime140_1.dll”是一个常见的DLL文件&#xff0c;这个文件与Microsoft Visual Studio C 运行时相关联。…
阅读更多...
使用Python Selenium，动态网页不再是难题！

使用Python Selenium，动态网页不再是难题！

目录 1、直接执行JS代码 🌐 1.1 execute_script基础用法 1.2 带参数执行JS函数 1.3 获取执行结果 2、使用execute_async_script异步执行 🔄 2.1 适用场景分析 2.2 实现异步操作示例 2.3 错误处理与调试技巧 3、JS与页面元素交互 👤 3.1 修改DOM属性 3.2 触发事…
阅读更多...
C# 23设计模式备忘

C# 23设计模式备忘

创建型模式&#xff1a;单例&#xff08;Singleton&#xff09;模式&#xff1a;某个类只能生成一个实例&#xff0c;该类提供了一个全局访问点供外部获取该实例&#xff0c;其拓展是有限多例模式。 原型&#xff08;Prototype&#xff09;模式&#xff1a;将一个对象作为原型&…
阅读更多...
下载和使用SLUN数据集

下载和使用SLUN数据集

1. 下载数据集 网址在https://opendatalab.com/OpenDataLab/lsun/tree/main/raw/scenes 下载bedroom_val_lmdb.zip 然后解压后会又两个文件&#xff0c;一个data.mdb&#xff0c;另一个lock.mdb。 2. 使用torchvison使用LSUN数据集 我把解压后的bedroom_val_lmdb放在/home/…
阅读更多...
Linux-笔记 udev机制介绍

Linux-笔记 udev机制介绍

目录 前言 概念 规则文件 规则文件的命名 规则文件的语法 匹配条件 赋值指令 例子 前言 由于之前利用udev机制实现了一个自动配置某功能的项目&#xff0c;所以这里做一下笔记总结&#xff0c;什么是udev&#xff1f;怎么用&#xff1f; 概念 udev其实是linux系统中一…
阅读更多...
TypeScrip环境安装与基础

TypeScrip环境安装与基础

TS环境安装与基础 文章目录 一、什么是TypeScript&#xff08;微软开发的&#xff09;二、TypeScript的特性三、环境安装node安装配置详解&#xff08;常用&#xff1a;outDir&#xff0c;strict &#xff09; 四、注释方式五、数据类型 一、什么是TypeScript&#xff08;微软开…
阅读更多...
MySQL如何定位慢查询以及使用EXPLAIN对SQL进行性能分析

MySQL如何定位慢查询以及使用EXPLAIN对SQL进行性能分析

在数据库的日常运维和开发中&#xff0c;SQL慢查询是一个常见且必须高度关注的问题。它不仅会影响用户体验&#xff0c;还可能对系统稳定性构成严重威胁。尤其是在数据量激增的情况下&#xff0c;如从几千到1万的数据增长到百万级&#xff0c;SQL查询的性能问题尤为突出。最近&…
阅读更多...
iOS 其他应用的文件如何在分享中使用自己的应用打开

iOS 其他应用的文件如何在分享中使用自己的应用打开

废话少说 一、第一步&#xff1a;先配置好plist文件 右击info.plist如下图文件打开 根据自己需要配置支持的文件类型&#xff0c;也可使用property List中配置&#xff0c;一样的 其他的文件可是参考文档&#xff1a;System-Declared Uniform Type Identifiers 可复制的代码&am…
阅读更多...
我只有一点Python基础，对学习WebGIS开发有帮助吗？

我只有一点Python基础，对学习WebGIS开发有帮助吗？

经常有人后台私信问&#xff0c;我只有一点Python基础&#xff0c;对学习GIS开发有帮助吗&#xff1f; 关于这个问题的答案是&#xff0c;当然有&#xff01;Python适用于WebGIS开发。WebGIS是地理信息系统&#xff08;GIS&#xff09;技术与Web技术的结合&#xff0c;而Pytho…
阅读更多...
第1章 框架学习的基石与实战策略

第1章 框架学习的基石与实战策略

第1章框架学习的基石与实战策略 1.1 框架学习的引路人&#xff1a;权威教程的重要性 在编程的世界里&#xff0c;掌握一个框架就像是装备了一套精良的工具&#xff0c;这不仅能显著提升开发速度&#xff0c;还能展现一个程序员的专业水平。对于那些刚刚踏入编程领域的初学者来…
阅读更多...
使用sorted对字典排序

使用sorted对字典排序

有时我们需要按照字典数据的键值对进行排序&#xff0c;这个时候就可以用到sorted函数。 import operator dic{"testA":3,"testC":1,"testB":4,"testD":2} dicnsorted(dic.items(),keyoperator.itemgetter(0)) print(dicn) 比如我们要…
阅读更多...
秋招Java后端开发冲刺——设计模式

秋招Java后端开发冲刺——设计模式

本文介绍Java中的代理模式&#xff0c;及一些常见的模式应用。 一、Java设计模式 Java中最常见的设计模式主要有23种&#xff0c;如表所示&#xff1a; 表格&#xff1a;Java设计模式分类 类型设计模式创建型模式单例模式&#xff08;Singleton Pattern&#xff09;工厂方法…
阅读更多...
MYSQL 四、mysql进阶 5（InnoDB数据存储结构）

MYSQL 四、mysql进阶 5（InnoDB数据存储结构）

一、数据库的存储结构&#xff1a;页 索引结构给我们提供了高效的索引方式&#xff0c;不过索引信息以及数据记录都是保存在文件上的&#xff0c;确切说时存储在页结构中&#xff0c;另一方面&#xff0c;索引是在存储引擎中实现的&#xff0c;Mysql服务器上的存储引擎负责对表…
阅读更多...
Cesium 实战 - 自定义纹理材质系列之 - 动态扩散效果

Cesium 实战 - 自定义纹理材质系列之 - 动态扩散效果

Cesium 实战 - 自定义纹理材质系列之 - 动态扩散效果 核心代码完整代码在线示例Cesium 给实体对象（Entity）提供了很多实用的样式，基本满足普通项目需求； 但是作为 WebGL 引擎，肯定不够丰富，尤其是动态效果样式。 对于实体对象（Entity），可以通过自定义材质，实现各种…
阅读更多...
World of Warcraft [CLASSIC] Level 70 Dire Maul （DM）

World of Warcraft [CLASSIC] Level 70 Dire Maul （DM）

[月牙钥匙] [大型爆盐炸弹] World of Warcraft [CLASSIC] Level 70 厄运之槌&#xff0c;完美贡品&#xff0c;Dire Maul &#xff08;DM&#xff09; Foror‘s Compendium of Dragon Slaying 佛洛尔的屠龙技术纲要 因为不是兽王宝宝&#xff0c;而且开始位置放的不对&am…
阅读更多...
最新文章

Copyright @ 2022~2023