Toypipi's blog

发表于 更新于 分类于 本文字数： 70 阅读时长 ≈ 1 分钟
  1. 下载 18.16.0 版本的压缩包,解压改名放到指定盘符如 D:\ProgramFiles\v18.16.0
  2. 系统变量 path 追加 ;D:\ProgramFiles\v18.16.0;
  3. 系统变量新增 NODE_SKIP_PLATFORM_CHECK 为 1
  4. 切回低版本 node：系统变量删除之前的追加，重新追加 ;D:\ProgramFiles\v13.14.0;

发表于 分类于 本文字数： 1.1k 阅读时长 ≈ 4 分钟

重绘和回流是前端性能优化中的两个重要概念，对网站性能有着深远的影响。

重绘（Repaint）

重绘指的是当元素样式的改变不影响布局时，浏览器会重新绘制这个元素，但不会影响其他元素的位置和尺寸，这个过程也称为“重画”。重绘操作通常由JavaScript脚本或CSS动画引起。

例如，在下面的HTML代码中，我们将元素的颜色从红色改为绿色：

1
2
3
4
5
<div style="color: red;">Hello, world!</div>

<script>
  document.querySelector('div').style.color = 'green';
</script>
阅读全文 »

发表于 分类于 本文字数： 400 阅读时长 ≈ 1 分钟

对象数组和数组对象是不同的概念。虽然它们都涉及到了JavaScript中的数组和对象，但它们的数据结构和使用方法不同。

对象数组

对象数组是由多个对象组成的数组，每个对象都具有相同的属性结构。例如：

1
2
3
4
5
const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

在上面的例子中，我们定义了一个名为users的对象数组。该数组包含三个对象，每个对象具有相同的属性结构（id、name和age）。

阅读全文 »

发表于 更新于 分类于 本文字数： 637 阅读时长 ≈ 2 分钟

防抖和节流是前端开发中常用的两种性能优化技术，它们都可以帮助我们避免过多的函数调用和网络请求，从而提高网站的性能和用户体验。

防抖(debounce)

防抖是指在短时间内连续触发同一事件时，只会执行一次函数。简单来说，就是延迟执行函数。在这个短时间内，如果又触发了该事件，则重新计算函数执行的时间。

以下是一个实现防抖的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 在输入框连续输入时，只有最后一次输入后才会触发函数。
const input = document.querySelector("input");
input.addEventListener(
  "input",
  debounce(function () {
    console.log("searching...");
  }, 500)
);
阅读全文 »
0%