linux系统是否允许 ping是由好几个因素决定的，如内核参数和防火墙， 几个因素同时允许时才能ping通:

1. 内核参数

   1 2 3 4 5

   # 如果是1则从内核层面忽略所有ICMP ECHO请求 # 也就是Ping这台服务器收不到任何回应 cat /proc/sys/net/ipv4/icmp_echo_ignore_all # 执行下面这个命令修改这项配置 echo "0" >/proc/sys/net/ipv4/icmp_echo_ignore_all

2. 防火墙：iptables

   看这篇教程 Linux系统的ECS中没有禁ping却ping不通的解决方法 - 阿里云

3. 云防火墙

   云厂商一般会给ECS提供云防火墙，这时候需要检查一下安全组规则有没有拒绝ICMP请求

发现一起听歌的后台监控不能正常运行了，吓得我赶紧打开了阿里云看了一眼服务器状态，好家伙磁盘直接100%了。

清理工作启动！

1. 查找大文件实用命令

   1 2	sudo du -ah --max-depth=1 | sort -h # 按文件(夹)大小排序显示列表 df -h # 用人类可读的方式展示磁盘剩余空间

2. 实用清理命令

• 清理系统日志

  1 2	sudo journalctl --vacuum-time=2d # 仅保留最近两天的系统日志，多余的都自动删掉 sudo journalctl --vacuum-size=50M # 仅保留50M大小的系统日志，多余的都自动删掉

• 清理 PM2 日志

  1	pm2 flush app_name

• 清理 nginx 日志

  1	rm /www/wwwlogs/*

3. 恢复故障应用

   MongoDB 在磁盘满的情况下，拒绝执行，并且自动停止服务。可以通过以下命令重启：

   1 2 3

   sudo service mongod start # 启动 mongod sudo service mongod status # 查看 mongod 的状态 pm2 restart app_name # 重启应用以便冲洗连接数据库

用框架的你，可能早已忽略了这些事件API

时间先后关系：

1. DOMContentLoaded ——通过 document.addEventListener('DOMContentLoaded', handler) 监听。当浏览器已完全加载 HTML，并构建了 DOM 树时触发，但像 <img /> 和 css 样式表这些外部资源可能还未加载完成。 ^{注意：当文档中遇到 <script /> 标签时，DOMContentLoaded 事件会等待脚本完全执行结束后再触发。除非带有是 async/defer 属性的脚本或者通过 document.createElement('script') 创建的脚本（这些脚本会异步加载并执行，不会阻塞 DOMContentLoaded 事件）。}
2. load ——通过 window.onload 监听。当浏览器不仅完全加载 HTML，图片样式表这些外部资源也加载完成后触发。
3. beforeunload ——通过 window.onbeforeunload 监听。表示用户正在离开，我们可以检查用户是否保存了更改，并询问他是否真的要离开。
4. unload ——通过 window.onunload 监听。表示用户已经离开，我们可以做一些善后工作。

防抖和节流都可以用来控制函数执行的频率。

防抖 (debounce)

效果

• 给定一个时间间隔，比如 200ms
• 在第一次调用函数时，并不立即执行函数，而是延迟 200ms 再看情况执行
• 如果在这 200ms 延迟内，函数又被调用了，取消之前的定时器，继续延迟 200ms 毫秒，直到一次 200ms 延迟正常结束且这段延迟内函数没有被调用，这时才真正执行这个函数。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

const debounce = require('lodash/debounce');

(async () => {
    const sayHello = debounce(() => {
        console.log(new Date(), 'Hello World');
    }, 2000);

    for await (_ of Array(10).fill()) {
        await new Promise(resume => setTimeout(resume, 1000));
        console.log(new Date());
        sayHello();
    }
})();

// 运行结果：
2021-01-19T01:23:42.802Z
2021-01-19T01:23:43.814Z
2021-01-19T01:23:44.815Z
2021-01-19T01:23:45.819Z
2021-01-19T01:23:46.820Z
2021-01-19T01:23:47.823Z
2021-01-19T01:23:48.825Z
2021-01-19T01:23:49.828Z
2021-01-19T01:23:50.829Z
2021-01-19T01:23:51.829Z
2021-01-19T01:23:53.831Z Hello World

因为这里设置防抖的间隔是 2000ms，而调用 sayHello 是每隔一秒调用一次，所以每当延时一秒的时候，函数又被调用，重新设置了一个新的 2000ms 延时，直到第 10 次调用结束后，这次延时 2000 ms 的间隔内不再有新的函数调用，等延时结束后才真正执行我们所需要防抖的函数：

1
2
3

() => {
    console.log(new Date(), 'Hello World');
}

举个极端点的例子，如果在程序运行时，始终保持 1000 ms 的间隔调用函数，而防抖的间隔设置为 2000 ms，那么被防抖的函数永远也不会被执行，因为永远满足不了延时 2000 ms 的时间间隔内这个函数没有被调用的条件。我们把上面那个例子改写一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

const debounce = require('lodash/debounce');

const sayHello = debounce(() => {
    console.log(new Date(), 'Hello World');
}, 2000);

setInterval(async () => {
    await new Promise(resume => setTimeout(resume, 1000));
    console.log(new Date());
    sayHello();
}, 1000);

// 运行结果：
2021-01-19T01:36:35.478Z
2021-01-19T01:36:36.490Z
2021-01-19T01:36:37.492Z
2021-01-19T01:36:38.494Z
2021-01-19T01:36:39.496Z
2021-01-19T01:36:40.498Z
2021-01-19T01:36:41.498Z
2021-01-19T01:36:42.500Z
2021-01-19T01:36:43.503Z
2021-01-19T01:36:44.503Z
2021-01-19T01:36:45.506Z
2021-01-19T01:36:46.508Z
... // 永远也不会打印 Hello World

实现

1
2
3
4
5
6
7
8
9
10

const debounce = (fn, interval) => {
    let timer = null;

    return () => {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(fn, interval);
    };
};

毫无疑问，debounce 是一个高阶函数，调用它的返回结果是一个函数。在 debounce 中我们还需要一个闭包变量来 timer 来记录定时器，返回的函数是对被防抖函数的封装，主要思想是每次调用函数时，清除之前的定时器（如果有的话），重新设置一个新的定时器，这样就实现了一个简单的防抖函数。

节流 (throttle)

效果

• 给定一个时间间隔，比如 200ms
• 在每个 200ms 节流间隔内，哪怕函数被重复调用多次，也只执行函数一次

例子

改写一下上面那个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

const throttle = require('lodash/throttle');

(async () => {
    const sayHello = throttle(() => {
        console.log(new Date(), 'Hello World');
    }, 5000);

    for await (_ of Array(10).fill()) {
        console.log(new Date());
        sayHello();
        await new Promise(resume => setTimeout(resume, 1000));
    }
})();

// 执行结果：
2021-01-19T02:18:46.864Z
2021-01-19T02:18:46.872Z Hello World
2021-01-19T02:18:47.878Z
2021-01-19T02:18:48.879Z
2021-01-19T02:18:49.880Z
2021-01-19T02:18:50.882Z
2021-01-19T02:18:51.875Z Hello World
2021-01-19T02:18:51.884Z
2021-01-19T02:18:52.887Z
2021-01-19T02:18:53.890Z
2021-01-19T02:18:54.893Z
2021-01-19T02:18:55.896Z
2021-01-19T02:18:56.886Z Hello World

这里我们设置了节流的间隔为 5000ms ，函数调用的间隔仍然是 1000ms。注意到在 18:46:864 ~ 18:51:864 这段时间间隔内函数被调用了5次，但实际只被执行了1次，这就是节流的作用。在一个节流间隔内，无论调用函数多少次，在这个间隔内只真正执行函数一次。

实现

节流函数的实现有很多种，这里用时间戳的方式实现。

1
2
3
4
5
6
7
8
9
10

const throttle = (fn, interval) => {
    let timestamp = 0;

    return () => {
        if (Date.now() - timestamp > interval) {
            timestamp = Date.now();
            return fn();
        }
    };
}

即每次成功执行一次函数后，接下来 5000ms 之内的调用都会被忽略，这就是节流的作用。

首先来看一下 Math.random 吧，它随机生成一个 0 (包含) ~ 1 (不包含) 之间的浮点数。

基于此，我们可以实现一个函数来生成指定范围内的随机整数（MDN上的例子）：

1
2
3
4
5
6
7
8
9
10
11
12

// 用于理解版
const getRandomInt = (min, max) => {
    const unit = Math.random();
    const range = max - min + 1;
    const offset = min;

    return Math.floor(unit * range + offset);
}

// 实用精简版
const getRandomInt = (min, max) =>
    Math.floor(Math.random() * (max - min + 1) + min);

技巧是 range 多加个1，然后再用 Math.floor 给向下取整。unit * range + offset 随机生成的是一个包含最小值但不包含最大值+1的浮点数，再向下取整就是一个既包含最小值又包含最大值的整数了，可谓是非常巧妙了。

这样生成的随机整数各整数被生成到的概率也是相等的，我们做个测试：

1
2
3
4
5
6
7
8
9
10
11
12
13

const probabilities = Array(11).fill(0);

// 随机生成一百万个1-10之间的整数
Array(1_000_000).fill().forEach(() => probabilities[getRandomInt(1, 10)]++);

console.log(probabilities);
// 结果：
// [
//        0,  99883,  99720,
//    99900, 100143,  99933,
//   100150,  99721, 100453,
//    99823, 100274
// ]

每个整数被生成到的概率都是10万左右，所以通过这种方式生成的随机整数也是等概率随机生成。

为什么需要前端路由?

以前传统的前端都是一个URL对应一个页面，所以不存在这个问题。随着SPA（single-page application）即单页应用的发展，组件的变化和更新不再对应着URL变化了。但是我们又需要这种对应关系（比如通过一个URL直接访问一个 SPA 应用的子视图），我们急需一个工具专门负责维护组件状态与页面URL之间的对应关系，这就是前端路由的作用所在，如 react 的 react-router 和 vue 的 vue-router。

实现原理？

1. 哈希模式 #hash

这个模式主要关注 location.hash 值，可以通过事件 hashchange 监听 URL 的变化，从而去跳转到对应子页面。

2. 历史模式

这个模式主要关注 location.pathname 的值，可以通过事件 popstate 监听 URL，但是它有很多局限性，只有做出浏览器动作如用户点击了回退按钮或在JavaScript中调用了history.back()/history.forwad()才会触发事件，下面这些情况不会触发 popstate 事件：

• pushState, replaceState （HTML5 的新 API 改变地址栏而不引起页面变化）
• a 标签的点击事件

解决思路：

遍历 DOM 中所有的 a 标签，监听 click 事件，手动 pushState 改变浏览器地址，并手动调用 popState 中的回调函数。

在 rust 中没有类似于 typeof 的操作符来判断一个变量的类型，但是我们可以自己写一个函数来打印变量的类型。

1
2
3
4
5

use std::any::type_name;

fn test_type<T>(_: T) {
    println!("{:?}", { type_name::<T>() });
}

用法实例如下：

1
2
3
4
5
6
7
8
9
10
11
12

let tup: (i32, f64, u8, bool, &str) = (500, 3.2, 1, false, "Hello World");
println!("{:?}", tup);
println!("{} {}", tup.0, tup.4);

// typeof 
test_type(tup); // "(i32, f64, u8, bool, &str)"
test_type(tup.4); // "&str"

let arr: [i32; 5] = [1, 2, 3, 4, 5];
let months: [&str; 3] = ["Jan", "Feb", "Mar"];
test_type(arr); // "[i32; 5]"
test_type(months); // "[&str; 3]"

setState 是同步还是异步？ - 魔术师卡颂

ReactDOM.render 是 legacy 模式，ReactDOM.createRoot 是 concurrent 模式（不同的更新有不同的优先级，并且更新也是可以被打断的），目前还在实验阶段。this.setState 是同步还是异步的？ 在 legacy 模式中，如果触发了 batchedUpdates 就是异步更新，没有触发是同步；在 concurrent 模式中总是异步更新。

可以通过异步调用 this.setState 来避免 batchedUpdates 来实现同步更新。 batchedUpdates 其实是 React 的一个性能优化的点，如果在一次 render 中同步调用了多个 this.setState，React 会将它们合并成一次操作，也就是所谓的批处理。

useEffect(fn, [])和cDM有什么区别？ - 魔术师卡颂

render 阶段计算出状态变化；commit阶段同步状态变化到视图，分为三个子阶段，beforeMutation, mutation (这也是真正执行DOM操作的) 和 layout。ComponentDidMount 是在 layout 阶段被同步调用的，而 useEffect 是在整个 commit 阶段结束后，被异步调用的。和 cDM 等价的 hook 是 useLayoutEffect。