一文搞懂Swiper原理

1.Swiper的原理

Swiper 是一个流行的开源 JavaScript 滑动库，用于在移动设备和桌面浏览器上实现触摸滑动功能。它的原理可以简单概括如下：

DOM 结构：Swiper 基于 HTML 的 DOM 结构构建，通常包含一个容器元素作为滑动容器，其中包含一组项目元素，这些项目元素将在滑动过程中进行切换。
触摸事件监听：Swiper 通过监听触摸事件（如 touchstart、touchmove 和 touchend）来检测用户在滑动容器上的触摸操作。它会跟踪用户手指的位置和移动方向。
滑动计算：Swiper 通过计算用户触摸操作期间的滑动距离、速度和方向来确定滑动行为。根据不同的滑动距离和速度阈值，Swiper 可以识别滑动动作（如滑动到下一个项目或返回到前一个项目）。
动画切换：一旦 Swiper 确定了要进行滑动切换的方向和距离，它会通过 CSS3 的过渡或动画效果来实现平滑的切换过程。这可以使用 transform 属性来改变项目元素的位置，从而创建流畅的滑动过渡效果。
自动播放和循环：Swiper 还提供了自动播放和循环滑动的功能。自动播放会自动切换项目元素，循环滑动可以使用户在滑到最后一个项目时继续滑动回到第一个项目。

总之，Swiper 的原理是基于监听触摸事件、计算滑动距离和速度，并通过 CSS3 动画来实现滑动切换效果。它提供了丰富的配置选项和功能，使开发人员可以轻松地创建各种滑动交互效果。

2.原生写法实现一个简单的swiper（滑动版）

以下是一个使用原生 JavaScript 实现简单的 Swiper 的示例代码：

HTML 代码：

html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

CSS 代码：

css

.swiper-container { /*这是显示当前轮播到的元素的窗口*/
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

.swiper-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
}

JavaScript 代码：

// 获取滑动容器和轮播项的 DOM 元素
const container = document.querySelector('.swiper-container');
const wrapper = document.querySelector('.swiper-wrapper');
const slides = document.querySelectorAll('.swiper-slide');

// 设置初始索引和滑动位置
let currentIndex = 0;
let startPos = 0;
let isDragging = false;

// 添加滑动事件监听
container.addEventListener('mousedown', startDrag);
container.addEventListener('touchstart', startDrag);

container.addEventListener('mousemove', drag);
container.addEventListener('touchmove', drag);

container.addEventListener('mouseup', endDrag);
container.addEventListener('mouseleave', endDrag);
container.addEventListener('touchend', endDrag);

// 开始拖动
function startDrag(event) {
  if (event.type === 'mousedown') {
    startPos = event.clientX;
  } else if (event.type === 'touchstart') {
    startPos = event.touches[0].clientX; //记录滑动的起始位置
  }
  isDragging = true;
}

// 拖动过程中更新偏移值
function drag(event) {
  if (!isDragging) return;

  event.preventDefault();

  let currentPos;

  if (event.type === 'mousemove') {
    currentPos = event.clientX;
  } else if (event.type === 'touchmove') {
    currentPos = event.touches[0].clientX; //记录滑动过程中的位置
  }

  const dist = currentPos - startPos; //计算本次滑动的距离
  translateSlides(dist); //进行元素的偏移！
}

// 结束拖动
function endDrag(event) {
  if (!isDragging) return;

  let dist;

  if (event.type === 'mouseup' || event.type === 'mouseleave') {
    dist = event.clientX - startPos;
  } else if (event.type === 'touchend') {
    dist = event.changedTouches[0].clientX - startPos;
  }

  if (Math.abs(dist) > 50) { //动态计算当前展示的dom项的索引（只有滑动距离超过50才会改变当前项，否则会复原！）
    if (dist > 0) { //判断是正向滑动还是负向滑动，且每次不管滑动了多少距离，只移动一项！
      currentIndex = Math.max(currentIndex - 1, 0); //正向滑动（向右），不能超过最左边
    } else {
      currentIndex = Math.min(currentIndex + 1, slides.length - 1); //负向滑动（向左），不能超过最右边
    }
  }

  const slideWidth = container.offsetWidth;
  const translateX = -currentIndex * slideWidth; //最终的translateX，即偏移到的位置一定是<=0的！不可能大于0，因为大于0会出现空白！currentIndex一定>=0
  //最终本次需要偏移到的位置 = 当前应该展示的项的索引（也就是应该被偏移的项数） * 每一个项的宽度

  wrapper.style.transform = `translateX(${translateX}px)`; //偏移到相应的位置
  wrapper.style.transition = 'transform 0.3s ease';

  isDragging = false;
}

// 滑动偏移动画
function translateSlides(dist) {
  const slideWidth = container.offsetWidth;
  const translateX = -currentIndex * slideWidth + dist ; //滑动过程需要偏移到的位置 = 当前已经偏移到的位置 + 本次滑动的距离

  wrapper.style.transform = `translateX(${translateX}px)`; //偏移到相应的位置
  wrapper.style.transition = 'none';
}

这个简单的 Swiper 实现了基本的左右滑动功能。滑动容器包含一个轮播项的容器（.swiper-wrapper）和一组轮播项（.swiper-slide）。通过监听鼠标或触摸事件，计算拖动的距离，并根据拖动距离切换当前展示的轮播项。

注意：以上代码是一个基本的示例，没有处理一些高级功能（如循环播放、自动播放、指示器等），以及没有针对移动设备的触摸事件优化。实际应用中可能需要添加更多的逻辑和处理，以满足特定需求。

希望这个原生 JavaScript 实现的简单 Swiper 代码对你有帮助！如有任何进一步的问题，请随时提问。

mousedown和touchstart的区别？为什么要监听两种事件？

mousedown 和 touchstart 是两种不同的事件，它们在以下方面有所区别：

触发方式：mousedown 事件是鼠标按下的时候触发，而 touchstart 事件是触摸屏幕时触发。
触发元素：mousedown 事件只能由鼠标在页面上的元素上触发，而 touchstart 事件可以由手指在触摸屏幕上的任意位置触发。
事件对象：mousedown 事件的事件对象是 MouseEvent，而 touchstart 事件的事件对象是 TouchEvent。这两个事件对象包含了与事件相关的信息，如触发位置、触发时间等。

所以说，监听两种事件主要是为了适配web端和移动端两种！

mouseup和mouseleave的区别？

mouseup事件： mouseup事件在鼠标按键释放时触发。当用户按下鼠标按键（通常是左键）然后释放时，会触发mouseup事件。这个事件通常与mousedown事件配对使用，用于检测鼠标点击操作。mouseup事件常用于处理鼠标点击后的响应行为，例如触发一个动作或执行特定的代码。
mouseleave事件： mouseleave事件在鼠标光标离开指定元素时触发。当鼠标在一个元素上，然后移出到另一个元素或浏览器窗口时，会触发mouseleave事件。这个事件通常用于处理鼠标移出元素时的响应行为，例如停止某个动作或隐藏特定的内容。

我的理解和感悟

在移动的过程中和在移动结束之后两种情况下，都要进行下面三个步骤：

1.通过上面的过程我们发现滑动版的swiper主要是通过监听鼠标按下（开始、移动、结束）事件，或者触摸（开始、移动、结束）事件

在每一次触发事件时记录滑动过程中第一个元素的位置clientX

// 添加滑动事件监听
container.addEventListener('mousedown', startDrag);
container.addEventListener('touchstart', startDrag);

container.addEventListener('mousemove', drag);
container.addEventListener('touchmove', drag);

container.addEventListener('mouseup', endDrag);
container.addEventListener('mouseleave', endDrag);
container.addEventListener('touchend', endDrag);

2.然后动态计算移动的距离和应该偏移到的位置：四个公式
3和4是不一样的，因为滑动过程中怎么变都行，但是最终偏移只能一次偏移1个！
注意：transform:translateX中的translateX具体数值，是指的容器整体的偏移量，而不是本次应该移动的距离，要把偏移和移动区分清楚（偏移是相对于最开始，而移动是相对于本次）

（1）本次滑动的距离（右正左负）= 第一个元素的位置clientX最终值-起始值

（2）当前已经偏移了的距离（<=0） = 当前展示项的索引 * 每一个项的宽度

（3）在移动的过程中：滑动过程需要偏移到的位置（不一定） = 当前已经偏移到的位置（<=0）+ 本次滑动的距离（右正左负）

  const slideWidth = container.offsetWidth;
  const translateX = -currentIndex * slideWidth + dist ; //滑动过程需要偏移到的位置 = 当前已经偏移到的位置 + 本次滑动的距离
  wrapper.style.transform = `translateX(${translateX}px)`; //偏移到相应的位置

（4）在移动结束之后：最终本次需要偏移到的位置（<=0） = 当前应该展示的项的索引（也就是应该被偏移的项数） * 每一个项的宽度

  if (Math.abs(dist) > 50) { //动态计算当前展示的dom项的索引（只有滑动距离超过50才会改变当前项，否则会复原！）
    if (dist > 0) { //判断是正向滑动还是负向滑动，且每次不管滑动了多少距离，只移动一项！
      currentIndex = Math.max(currentIndex - 1, 0); //正向滑动（向右），不能超过最左边
    } else {
      currentIndex = Math.min(currentIndex + 1, slides.length - 1); //负向滑动（向左），不能超过最右边
    }
  }

  const slideWidth = container.offsetWidth;
  const translateX = -currentIndex * slideWidth; //最终的translateX，即偏移到的位置一定是<=0的！不可能大于0，因为大于0会出现空白！currentIndex一定>=0

  wrapper.style.transform = `translateX(${translateX}px)`;

注意：我们这里每次只移动一项，不管滑动过程中滑动了几项！

3.然后使用transform:translateX()来进行元素的移动

注意：本质上鼠标或者手指滑动是不会带动元素的，我们要想带动元素移动，底层是一定要使用css的translate才可以的！

3.原生实现循环播放轮播图（也可以当作原生swiper的改造）

1.基本实现：setInterval

// 获取元素
const container = document.querySelector('.swiper-container');
const wrapper = document.querySelector('.swiper-wrapper');
const slides = document.querySelectorAll('.swiper-slide');

// 设置初始索引和偏移量
let currentIndex = 0;
let translateX = 0; //总的当前偏移量

// 计算每个滑块的宽度
const slideWidth = slides[0].offsetWidth;

// 自动循环播放
function autoplay() {
  setInterval(() => {
    currentIndex = (currentIndex + 1) % slides.length; //这样可以保证不会超过slides.length这个数字，如果slides.length是10，那么11%10就会变为1
    translateX = -currentIndex * slideWidth;
    wrapper.style.transform = `translateX(${translateX}px)`;
  }, 2000);
}

// 初始化
function init() {
  // 设置包裹容器宽度
  wrapper.style.width = `${slideWidth * slides.length}px`;
  // 启动自动播放
  autoplay();
}

// 调用初始化函数
init();

2.当自动播放到超过最后一个元素索引，变成第一个索引的时候，如何避免页面的闪动呢？

注意：这里的页面的闪动指的是突然滚动过去，我们希望的是直接展示第一个项，而不是滚过来！

在CSS样式中，为.swiper-wrapper添加transition属性来定义过渡效果的持续时间和动画函数。以下是修改后的CSS代码：

css

.swiper-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.3s ease-in-out; /*这是正常情况下的过渡效果*/
}

这里，我们添加了ease-in-out动画函数，以实现更平滑的过渡效果。

在JavaScript代码中，我们需要对切换到第一个索引时的情况进行处理。你可以使用事件监听和过渡结束的回调来实现这一点。以下是修改后的JavaScript代码：

// 自动循环播放
function autoplay() {
  setInterval(() => {
    currentIndex = (currentIndex + 1) % slides.length;
    if (currentIndex === 0) { //如果是要定位到第一个元素，那么就立即定位过去！
      handleTransitionEnd();
    } else { //如果不是，那么就直接移动
      offset = -currentIndex * slideWidth;
      wrapper.style.transform = `translateX(${offset}px)`;
    }
  }, 2000);
}

// 处理过渡结束事件
function handleTransitionEnd() {
  wrapper.style.transition = 'none';
  translateX = 0;
  wrapper.style.transform = `translateX(${translateX}px)`;
  void wrapper.offsetWidth; // 重点：强制重排（回流），立即将元素定位到第一个元素的位置
  wrapper.style.transition = 'transform 0.3s ease-in-out'; //因为本身是有transition的，我们现在搞没了，所以需要手动设置回去！所以在这之前要强制重拍！
  wrapper.removeEventListener('transitionend', handleTransitionEnd);
}

// 初始化
function init() {
  // 设置包裹容器宽度
  wrapper.style.width = `${slideWidth * slides.length}px`;
  // 启动自动播放
  autoplay();
}

// 调用初始化函数
init();

在这个修改后的代码中，我们监听了transitionend事件，并在第一个元素切换完毕后触发handleTransitionEnd函数。在这个函数中，我们先将过渡设置为none，然后将偏移量重设为0，并立即定位元素到第一个元素的位置，这通过使用offsetWidth属性来实现。最后，我们再将过渡重新设置为原来的值，以实现平滑的过渡效果。通过这样的处理，当自动播放循环到最后一个元素并切换回第一个元素时，页面将不再出现闪动现象，而是平滑地切换到第一个元素。

3.transition:none

将CSS中的过渡（transition）设置为"none"将会禁用元素的过渡效果。过渡效果通常用于在元素属性发生更改时创建平滑的动画效果，比如改变元素的宽度、高度、颜色、位置等。

当你将过渡设置为"none"时，元素的属性更改将会立即生效，没有过渡动画效果。这意味着，如果你在元素的属性发生变化时不希望触发任何过渡动画，你可以将过渡设置为"none"。

以下是一个示例，展示了将过渡设置为"none"的效果：

HTML:

html

<div id="box"></div>
<button onclick="changeWidth()">改变宽度</button>

CSS:

css

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
}

button {
  margin-top: 10px;
}

JavaScript:

function changeWidth() {
  var box = document.getElementById('box');
  box.style.transition = 'none'; // 将过渡设置为none
  box.style.width = '200px'; // 更改宽度，没有过渡效果
}

在上述示例中，当点击按钮时，会将元素的宽度从100px更改为200px，但没有过渡动画效果。过渡设置为"none"将禁用宽度更改的过渡效果，使更改立即生效。

4.强制重排

在前端开发中，强制重排（reflow）是指浏览器重新计算元素的布局和几何属性，以确保在渲染页面或执行某些操作时元素的位置和大小是最新的。

一种常见的强制重排的技术是使用offsetWidth属性。offsetWidth是一个只读属性，返回元素的像素宽度，包括元素的宽度、内边距和边框。当读取该属性时，浏览器被迫执行一次重排，以确保返回的值是最新的。

void wrapper.offsetWidth是一种常见的技巧，通过在offsetWidth前使用void操作符来避免返回的值对代码的其他部分产生副作用。这种技巧确保了只进行了重排操作而没有其他意外的副作用。

以下是一个示例展示了如何使用void wrapper.offsetWidth强制进行重排：

// 获取元素的宽度，并强制进行重排
void wrapper.offsetWidth;

// 在重排后进行一些操作
// ...

请注意，强制重排是一个相对较消耗性能的操作，特别是在某些情况下频繁地进行重排可能会导致性能问题。因此，应该避免滥用强制重排操作，只在必要的情况下使用，以尽量减少页面性能的影响。如果可能的话，可以通过优化布局和样式，以及使用其他技术来避免不必要的强制重排。

强制重排的作用？

注意：由于重拍必重绘，所以强制重排也相当于强制重绘了！

强制重排（reflow）在前端开发中有以下几个作用：

更新元素的布局和几何属性：通过强制重排，浏览器会重新计算元素的位置、大小和其他相关属性，以确保页面在渲染时的呈现是最新的。这对于响应式设计和动态布局尤为重要，可以确保元素按照预期的方式进行定位和渲染。
解决渲染问题：**当修改了元素的样式或内容后，浏览器可能需要重新计算并更新页面的渲染。**强制重排可以使浏览器重新计算并应用这些更改，确保页面得到正确的渲染。
获取准确的元素尺寸和位置信息：有时候，我们需要获取元素的实际尺寸或位置信息，例如计算元素的偏移量、检测元素是否可见等。在这种情况下，强制重排可以确保我们获取到的是最新的元素属性，而不是缓存的旧值。
优化动画和过渡效果：在实现动画和过渡效果时，我们通常希望元素的属性更改能够平滑地过渡。通过强制重排可以触发浏览器的重绘过程，帮助我们实现平滑的动画效果，避免不连续或闪烁的效果。

拿上面的例子来说：

wrapper.style.transition = 'none';
translateX = 0;
wrapper.style.transform = `translateX(${translateX}px)`;
void wrapper.offsetWidth; // 重点：强制重排（回流），立即将渲染页面
wrapper.style.transition = 'transform 0.3s ease-in-out'; //因为本身是有transition的，我们现在搞没了，所以需要手动设置回去！在这之前必须强制重排！

transform:translateX会造成重排，但是浏览器不会立即触发渲染（而是等待下一个渲染帧），但是我们后面又设置了transition = 'transform 0.3s ease-in-out';，下一次渲染帧就会根据这个transition渲染页面，所以前面的transition = 'none';就失效了，所以在这之前必须强制浏览器进行重排！

注意：当修改了元素的样式或内容后，浏览器并不会立即更新页面的渲染！

当修改了元素的样式或内容后，浏览器并不会立即更新页面的渲染（不会立即重绘和重排），而是将更新操作放入队列中，等待下一次渲染帧（rendering frame）来执行。

浏览器的渲染过程包括多个步骤，其中之一是重排（reflow）和重绘（repaint）。重排是指浏览器重新计算元素的布局和几何属性，而重绘是指浏览器根据最新的样式信息将元素的可视部分重新绘制到屏幕上。

因为重排和重绘是消耗性能的操作，浏览器会尽量将这些操作延迟执行，并进行优化。所以，在修改元素的样式或内容后，浏览器一般不会立即执行重排和重绘操作，而是将它们添加到一个队列中。然后，在下一次渲染帧到来时，浏览器会检查这个队列，并执行队列中需要重排和重绘的操作。

5.渲染帧

浏览器的渲染帧是什么？

在浏览器中，渲染帧（rendering frame）是指浏览器进行页面渲染的最小时间单位。浏览器以每秒约60帧（FPS）的速度进行渲染，也就是每秒钟会进行大约60次的渲染帧。

渲染帧是浏览器进行渲染的基本单位，用于更新页面呈现、执行布局和绘制操作。每个渲染帧之间的时间间隔为约16毫秒（1000毫秒/60帧），这是为了尽可能平滑地实现动画效果。

在每个渲染帧中，浏览器会按照以下流程进行操作：（也就是浏览器的渲染过程）

处理用户输入：检查是否有用户的输入事件（比如鼠标移动、鼠标点击、键盘输入等），并对输入做出响应。
更新布局与样式：浏览器会通过解析HTML和CSS来确定页面的布局结构，并计算每个元素的大小、位置和样式。
执行 JavaScript：如果有JavaScript代码需要执行，浏览器会执行相应的脚本，处理事件、计算、操作DOM等。——> 注意：可以看出来js的任务是先于渲染任务执行的！
比如用户可能会触发一些元素事件（输入文本点击按钮等），还可能有定时任务（会到下一次循环执行回调）或者异步任务执行。这里会进行js的事件循环！
重排（reflow）和重绘（repaint）：根据最新的布局和样式信息，浏览器进行重排和重绘操作，更新页面的布局、几何属性和可视内容。
绘制页面：浏览器会将页面的可视内容绘制到屏幕上，包括绘制背景、文本、图像等。
提交页面：当渲染帧中的所有操作完成后，浏览器会将渲染好的页面提交给显示设备进行显示。

渲染帧的频率通常是固定的，但在某些情况下（例如电脑性能较差或浏览器资源受限），渲染帧的速率可能会下降。开发人员可以利用渲染帧的机制来实现平滑的动画效果，以及优化代码和样式，以提高页面的渲染性能。

js宏任务和浏览器渲染任务谁先执行？

一般情况下，宏任务先于渲染任务执行（在真正开始事件循环之后）。当主线程空闲时，事件循环会首先从宏任务队列中选择最早的一个任务执行。常见的宏任务包括 setTimeout 、setInterval、I/O 操作（如网络请求）等。

在执行宏任务期间，如果有渲染任务需要执行，它们会被添加到渲染队列中。渲染队列中的任务包括更新 DOM 、执行 CSS 样式计算、布局（layout）和绘制（paint）等操作。

js的执行有可能会阻塞页面渲染吗？（也就是说任务太多，需要执行的时间太长）

结论：会阻塞渲染帧！

1.大量微任务可能堵塞页面渲染（因为是本次全部执行完毕）

2.raf（requestAnimationFrame）内注册大量回调可能堵塞页面渲染（因为是在下一次渲染之前执行）

3.定时器回调注册的宏任务并不会堵塞页面渲染（因为是下一次事件循环执行回调），但是可能会推迟页面渲染时间。

表现：

长时间的JavaScript执行阻塞了渲染：如果JavaScript代码执行时间过长，可能会阻塞浏览器执行其他渲染相关的操作，如布局、重绘和绘制。这会导致页面出现卡顿、不流畅的感觉，影响用户体验。
动画或过渡效果不平滑：如果在一次渲染帧中的JavaScript代码尚未执行完毕，而涉及到动画或过渡效果的样式又发生了变化，这可能导致动画效果不平滑，出现不连续或闪烁的现象。

为了避免长时间的JavaScript执行阻塞页面渲染，以提高用户体验，以下策略可以考虑：

优化 JavaScript 代码：通过减少不必要的计算、避免频繁的 DOM 操作、使用事件委托等技术来优化 JavaScript 代码，使其执行效率更高。
将耗时的任务分割为多个步骤：如果有一个长时间运行的任务，你可以将它分割成多个较小的步骤，并使用定时器（setTimeout 或 requestAnimationFrame）来控制执行的节奏。这样可以使得每个步骤都在一个渲染帧内完成，从而避免长时间的阻塞。
使用 Web Workers：对于一些耗时的计算任务，可以考虑使用Web Workers来将其从主线程中分离出来，以充分利用多线程的并行处理能力，避免阻塞主线程的渲染。
使用 requestIdleCallback：requestIdleCallback是一个浏览器提供的API，它可以让你在浏览器空闲时间执行任务，而不阻塞主线程的渲染过程。你可以将耗时较长的任务放在requestIdleCallback的回调函数中执行，以确保不会影响页面的渲染性能。

通过合理优化代码和使用适当的技术，可以确保JavaScript代码在渲染帧内能够及时执行完毕，以提高页面的渲染性能和用户体验。

requestAnimationFrame和requestIdleCallback是干嘛的？

在每一帧渲染完成后，在下一帧重绘之前如果有requestAnimationFrame，则调用之。

如果在一帧渲染完后有空闲，就会执行requestIdleCallback注册的回调。

什么是空闲时间呢？以60fps为例，如果浏览器渲染一帧发现不到16ms，那么剩余时间就算是空闲时间。

js事件循环和浏览器渲染帧的关系？

一帧里包含了多次事件循环，两次可以 render update 的 loop 之间为一次有内容变化的帧。

浏览器也是单线程的吗？

大多数常见的浏览器（如 Chrome、Firefox、Safari）是基于单线程的模型。这意味着这些浏览器在主线程上执行 JavaScript 代码、处理用户交互事件、执行布局和渲染操作等都是按照顺序逐个执行的。

单线程模型的主要原因是为了保证页面的安全性和简化编程模型。单线程模型可以避免多线程操作中的竞态条件、死锁和数据同步等问题，从而减少编程的复杂性。

然而，虽然主线程是单线程的，但现代浏览器引入了一些机制来充分利用计算机的多核处理能力和提高页面的响应性，例如：

Web Workers：Web Workers 允许在后台启动额外的线程来执行 JavaScript 代码，使得一些耗时的计算任务可以在独立的线程中并行执行，而不会阻塞主线程的执行。但请注意，Web Workers 之间以及与主线程之间的通信需要使用消息传递的方式。
异步操作：浏览器提供了一系列的异步 API，如定时器（setTimeout、setInterval）、Promise、XHR（XMLHttpRequest）、fetch 等，这些 API 可以在主线程上启动异步任务，在任务完成后通过回调或 Promise 的方式进行处理。
事件循环（Event Loop）：浏览器采用事件循环机制来处理异步任务的执行顺序。事件循环包含一个主线程和一个任务队列（Task Queue），异步任务在完成后会被放入任务队列中，然后在主线程空闲时按照顺序执行任务队列中的任务。
注意：事件循环（Event Loop）是 JavaScript 运行时环境的一部分，而不是特定于浏览器的。它是 JavaScript 引擎中的一个机制，用于处理异步任务的执行顺序和协调事件的触发。
JavaScript 引擎的设计和实现可以有很多不同的变种。一些常见的 JavaScript 引擎包括：
- V8：由 Google 开发，用于 Google Chrome 浏览器和 Node.js 等环境。
- SpiderMonkey：由 Mozilla 开发，用于 Firefox 浏览器。
- JavaScriptCore：由 Apple 开发，用于 Safari 浏览器。
- Chakra：由 Microsoft 开发，用于旧版的 Microsoft Edge 浏览器。
- Nashorn：由 Oracle 开发，用于 Java 中的 JavaScript 执行环境。
不同的 JavaScript 引擎可能在性能、特性和支持的标准方面有所不同，但它们都提供了执行 JavaScript 代码所需的核心功能。

这些机制使得在浏览器中可以实现并行处理和异步执行，从而提高了页面的响应性和用户体验。尽管浏览器主线程是单线程的，但通过合理利用这些机制，可以实现多线程和并发的效果。

浏览器的构成？

浏览器是一种用于访问和浏览互联网上网页的软件应用程序，通常由多个组件构成。下面是一个常见的浏览器的组成部分：

用户界面（User Interface）：浏览器的用户界面包括地址栏、导航按钮、书签管理器等。它提供了用户与浏览器交互和控制的功能。
渲染引擎（Rendering Engine）：渲染引擎负责解析和渲染网页内容，将 HTML、CSS 和 JavaScript 转换为可视化的网页。
JavaScript 引擎（JavaScript Engine）：JavaScript 引擎解释和执行 JavaScript 代码。它负责处理 JavaScript 相关的操作和功能，如变量赋值、函数调用、事件处理等。
布局引擎（Layout Engine）：布局引擎负责计算和处理网页的布局和排版。它负责确定网页中每个元素的位置和大小，以便进行正确的渲染。
网络模块（Network Module）：网络模块处理网络请求和数据传输，包括下载网页内容、加载资源文件（如图片、CSS、JavaScript 文件等）等。
数据存储（Data Storage）：浏览器提供了多种数据存储机制，如浏览器缓存、Cookie、Web Storage（localStorage 和 sessionStorage）等，用于存储网页和用户数据。
安全模块（Security Module）：安全模块负责保护用户的隐私和安全。它处理证书验证、安全连接（HTTPS）、弹出窗口阻止、恶意软件防护等安全相关的功能。
插件（Plug-ins）：浏览器可以通过插件来扩展功能和支持特定的媒体格式或应用程序。常见的插件包括 Adobe Flash Player、PDF 阅读器等。

这些组件共同协作，使浏览器能够加载和渲染网页，执行 JavaScript 代码，与服务器进行通信，并提供丰富的功能和用户体验。不同浏览器的实现细节和组件可能有所不同，但基本的功能和模块通常是类似的。

一文搞懂Swiper原理 ​

1.Swiper的原理 ​

2.原生写法实现一个简单的swiper（滑动版） ​

我的理解和感悟 ​

3.原生实现循环播放轮播图（也可以当作原生swiper的改造） ​

1.基本实现：setInterval ​

2.当自动播放到超过最后一个元素索引，变成第一个索引的时候，如何避免页面的闪动呢？ ​

3.transition:none ​

4.强制重排 ​

5.渲染帧 ​