面试题收集js实现异步处理有哪些在JavaScript中，实现异步处理的方式有以下几种：回调函数（Callbacks

js实现异步处理有哪些

在JavaScript中，实现异步处理的方式有以下几种：

回调函数（Callbacks） ：这是最早的异步处理机制。通过将一个函数作为参数传递给另一个函数来延迟执行。当异步操作完成时，回调函数会被调用。这种方式容易出现回调地狱（callback hell），即多层嵌套的回调函数导致代码难以维护。
Promises：Promise是一种更先进的异步处理模式。它代表一个最终可能完成（也可能被拒绝）的操作，并返回一个用于获取操作结果的对象。Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。Promise可以链式调用，使得异步操作更加清晰。
Async/Await：这是一种基于Promise的异步处理方式，但提供了更简洁的语法。async关键字用于声明一个函数是异步的，而await关键字用于等待一个Promise完成。这使得异步代码看起来像同步代码，提高了代码的可读性。
事件监听（Event Listeners） ：在浏览器环境中，可以使用事件监听来处理异步操作。例如，当用户点击按钮或数据加载完成时，会触发相应的事件，然后执行相应的回调函数。
Web Workers：Web Workers允许在主线程之外创建独立的工作线程，用于执行耗时的计算任务，避免阻塞主线程。Web Workers通过postMessage方法发送数据，通过onmessage事件接收数据。
Fetch API：Fetch API是一个现代的网络请求API，它返回一个Promise，使得处理网络请求更加简单和一致。
XMLHttpRequest：虽然已经被Fetch API所取代，但XMLHttpRequest仍然是一种实现异步处理的方法，尤其是在旧的浏览器中。
setTimeout和setInterval：这两个函数也可以用来处理异步操作，它们在指定的时间后执行一个函数或定期重复执行一个函数。
requestAnimationFrame：在浏览器环境中，这个函数用于在下一次重绘之前执行一个动画帧更新函数，实现平滑的动画效果。
process.nextTick（Node.js） ：在Node.js环境中，这个函数用于在当前事件循环的下个迭代中执行一个函数，通常用于延迟执行非阻塞的I/O操作。

这些方法可以根据具体的需求和场景来选择使用，以实现更高效、更易于维护的异步处理。

js基础类型和引用类型分别有哪些，在传递时的区别

定义

基础类型： Number String Boolean Null undefined Symbol

引用类型：Object function Array Date Map/Set等集合对象

传递时的区别

基础类型是值传递，引用类型引用传递，传存储地址

vue2中的动态组件和远程组件

动态组件和一部组件都允许开发者根据条件渲染不同的组件，但是她们的实现方式和使用场景有所不同；

1.定义与实现

动态组件：通过component标签和is属性来制定当前应渲染的组件，通常用于本地已经定义的组件切换，例如，一个地方要显示是表单，但是表单类型确定，个数确定，可以使用循环来实现，并且可以绑定一些属性。

远程组件：指的是按需从服务器加载的钻进，这些组件没有被包含在初始的包中，而是在需要时才加载，常用于性能优化和代码分割。

2 .适用场景

动态组件适用于组件相对确定，但是需要根据用户交互或者某些状态来选择显示哪个组件。

远程组件适用于大型应用或需要延迟加载以提升初次加载速度的场景，尤其是当组件体积比较大，不需要在应用初始化时即刻加载的情况。

3.性能考量

动态组件可以利用keep-alive进行缓存，提高性能，避免重复渲染。

远程组件：主要用于减少初始加载时间，通过异步加载组件来减轻首屏加载的压力。

4.开发体验

动态组件因为所有组件都本地可用，开发和调试过程较为简单直观。

远程组件可能需要处理加载延迟和网络异常，增加了开发的复杂度，但更符合实际使用情况。

http1.0 1.1 2.0的区别

他们作为超文本传输协议个版本，主要的区别体现在连接管理、请求效率、以及状态管理；

1.连接管理

1.0：非持久连接，请求一下就要断开，这导致，大量的时间耗费在连接上，尤其在网络延迟较高的情况下。

1.1：支持持久连接，允许在同一连接中发送多个请求和响应，这大大减少了网络的延迟并提高了页面加载速度。

2.0：允许一个连接中并行交错的发送或或接收多个请求和响应，通过头部压缩和二进制传输方式进一步提高了传输效率

2.请求效率

1.0：一个一个请求，请求完断开重连

1.1: 一个一个请求，不断开

2.0：引入了多路复用技术，允许同时处理多个请求和响应，消除了队头阻塞的问题，大幅提高了应用加载速度和用户体验。

3.状态管理

1.0：没有状态协议，借助浏览器管理

1.1 ：也没有，但是引入了缓存机制，比如etag,if-Moddified-Since等来优化状态管理

2.0：沿用，但在传输层通过流和帧的设计更好的支持了请求和响应的追踪管理。

4.数据压缩

1.0不支持数据压缩，明文发送，网络负载比较重

1.1 支持对消息体进行压缩，常用gzip压缩，减少量，加快响应速度

2.0 采用了更为先进的头部压缩技术，对请求和响应头部信息进行压缩，进一步减少数据传输量。

5.安全性

1.0和1.1：需要SSL和TLS来实现加密传输，确保安全

2.0：推荐在安全的TLS上连接运行，http/2 over TLS

6.性能优化

1.0：性能优化主要依靠减少请求次数和减少文件大小

1.1：缓存机制和分块传输编码，有效利用贷款，开启压缩

2.0：支持请求和响应的多路复用，服务器推送，头部压缩等特性，显著提高页面加载速度和性能

如何解决跨域

jsonP
cors 服务器端设置请求头
nginx代理
node中间件，代理前端请求
websocket, 允许跨域

n的阶乘循环实现，阶乘实现

1.循环实现

function factorial(n) {
    if (n === 0) {
        return 1;
    }
    let result = 1;
    for (let i = 1; i <= n; i++) {
        result *= i;
    }
    return result;
}

// 测试代码
console.log(factorial(5));  // 输出：120

2.递归

function factorial(n) {
    if (n === 0) {
        return 1;
    } else {
        return n * factorial(n - 1);
    }
}

// 测试代码
console.log(factorial(5));  // 输出：120

3.es6实现

定义了一个名为factorial的函数，它接受一个参数n，并返回n的阶乘。

首先，使用Array.from()方法创建一个长度为n的新数组，其中每个元素的值为其索引加1（即从1到n）。然后，使用reduce()方法将这个数组中的所有元素相乘，初始值为1。最终的结果就是n的阶乘。

例如，当n等于5时，创建的数组是[1, 2, 3, 4, 5]，然后通过reduce()方法计算它们的乘积，得到结果120。

function factorial(n) {
  return Array.from({ length: n }, (_, i) => i + 1).reduce((acc, num) => acc * num, 1);
}

console.log(factorial(5)); // 输出：120

svg和canvas的渲染区别

1.渲染方式

svg是基于矢量图形的，使用数学公式来描述图形的形状和样式。

canvas是基于像素的，它使用位图来表示图形，因此svg更适合绘制负责的图形和动画，而Canvas更适合处理大量的像素操作和图像处理任务。（滤镜）

2.性能

svg无损缩放和变形，不影响质量，在高分辨率显示器时有优势。canvas性能更好，因为它可以直接操作像素

3.交互性：svg支持事件监听，可以响应用户鼠标和键盘。canvas这方面较弱，需要额外的代码来实现

4.兼容

svg新特性，某些浏览器不支持

canvas所有浏览器都有较好的支持

5.文件大小

svg基于矢量图形，很小，提高加载速度

canvas文件大小取决于图像的分辨率和颜色，可能会比较大，越复杂越大

前端如何处理大数据

1. 数据处理方向

分批拉取：与后端配合，实现api的分页或分批拉取功能，避免一次性加载过多数据。
数据压缩：使用数据压缩算法（如gzip）减少传输的数据量。

2.纯前端处理方向：

虚拟滚动：如果对象数量非常多，以至于超出可视窗口的范围，可以使用虚拟滚动。该技术仅渲染窗口视口中的对象，非可视区域的对象不会被渲染，从而显著减少DOM操作和内存消耗。
canvas或者WebGL：根据需求选择Canvas或者WebGL进行搞笑渲染。Canvas适合2D图形，而WebGL则能更好地处理复杂的3D场景。
组件和资源懒加载：对于非首屏组件和资源，使用代码分割和懒加载技术，如通过webpack的动态import语法实现。
节流和防抖：对于用户交互可能倒置的高频渲染调用，采用节流和防抖技术控制渲染频率。
使用transform和Opacity：在CSS动画和变换中，尽量使用transform和opacity，这些操作不会触发布局重排（reflow）或重绘（repaint）。
避免不必要的重构和回流：批量更新DOM元素，合并样式更改，避免使用表格布局等可能引起全页重新计算额操作。
WebP格式图片：使用WebP格式替换传统图片格式，以减少图片大小并提升加载速度。
服务端渲染（SSR）或静态网站生成（SSG） ：考虑使用服务端渲染或静态网站生成技术改善首屏加载时间和SEO。
监控与分析：使用性能监控工具（如Lighthouse、WebPageTest）持续监测应用表现，基于数据进行针对性优化。
用户体验反馈：提供清晰的加载提示，考虑股价平或加载占位图，以提升用户感知的加载速度。
层叠上下文：主要体现在减少浏览器的渲染计算量
will-change:
使用requestldleCallback: