Huangyuntse

不要被学术界的思维限制了头脑，不要被程序员的思维限制了想象力。

比特币中的密码学

比特币中的哈希特性

Collision resistance (抗哈希碰撞)

没有高效的方法来人为的制造哈希碰撞

• Collision resistance的定义：给定X，没有高效的方法找到Y，使得H(X) = H(Y)
• Collision resistance的特性：无法用数学证明
• MD5哈希函数：以前认为是Collision resistance，后来被鉴定为不安全的哈希函数，可通过人为的方式制造哈希碰撞
• 比特币中使用的哈希函数：SHA-256（Secure Hash Algorithm）

Hiding

哈希的过程单向不可逆

• Hiding的定义：输入值的空间够大，且分布均匀，取值可能性相同
  实际场景如何实现Hiding（保证分布均匀）：输入值 + 随机数（输入X || nonce随机数）后经过Hash

Puzzle friendly

事先无法知道什么样的输入能得到一个什么样的哈希值，只能一个个尝试

比如挖矿，H(nonce + block header) <= target，没有捷径，只能去尝试多个nonce来找到解 => proof of work

比特币中的账户管理

非对称加密（asymmetric encryption algorithm）：加密解密不用同一个密钥，加密用公钥，解密用私钥
去中心化，每个用户本地自己生成一组公钥和私钥，公钥相当于银行账号，私钥相当于账号密码
比特币交易过程中，为了能知道交易是由谁发起，需要用私钥将交易签名，公钥验证

两个人生成的公钥私钥相同怎么办（256位的值，产生两组相同公钥私钥的概率微乎其微）

message取hash->hash取签名

先开个坑，准备下Web3相关的学习

学习路线

• Web3入门计划： polebug大佬学习记录
• Web3开发学习路线： https://54web3.cc/blog/roadmap/learning-path-web3
• Web3从入门到精通开发学习路线：https://juejin.cn/post/7307185531330838543

WEEK 1: 区块链的基础知识

• 密码学基础
• 区块链基础
• 相关金融知识
• 学习比特币底层技术
• 学习以太坊原理

Hexo介绍

Hexo是一款基于Node.js的开源静态博客框架，用于快速、简单且高效地搭建静态博客网站。本质上是一个静态网站生成器，新增文章只需要编辑md文件，通过运行命令再生成像html的静态文件。

环境搭建

1
2
3
4
5
6
7
8
9
10
11

# 全局安装hexo脚手架
npm install -g hexo-cli

# 创建一blog项目
hexo init blog

# 进入项目
cd blog

# 安装依赖包
npm install

其他操作

1
2

# 右键 Git Bush，用户项目自动化部署
npm install hexo-deployer-git --save

项目预览

1
2
3
4
5
6
7
8

# 清理旧的静态文件
hexo clean

# 生成静态文件
hexo g

# 运行预览项目
hexo s

记录面试中遇到一些比较有意思的场景题

虚拟滚动是如何去实现的（长列表，大表格）

1、监听滚轮事件/触摸事件，记录列表的总偏移量。
2、根据总偏移量计算列表的可视元素起始索引。
3、从起始索引渲染元素至视口底部。
4、当总偏移量更新时，重新渲染可视元素列表。
5、为可视元素列表前后加入缓冲元素。
6、在滚动量比较小时，直接修改可视元素列表的偏移量。
7、在滚动量比较大时（比如拖动滚动条），会重新渲染整个列表。
事件节流。

包管理器

Pnpm是怎么解决幽灵依赖的

hard link + symbolic link

如何确定一个项目用的包管理器版本：enigne字段

1
2
3
4

"engines": {
  "node": ">=14.0.0",
  "npm": ">=7.0.0"  // 项目要求的 npm 最低版本
}

如何避免业务项目被发到npm上

在 package.json 中添加 private 字段

在项目的 package.json 文件中添加 private: true 字段，这是最直接的方式。当 private 为 true 时，npm 会拒绝发布该项目。

使用 .npmignore 或 .gitignore 文件

将项目中的所有文件添加到忽略列表，确保没有文件被发布。.npmignore 会覆盖 .gitignore 的规则。

设置预发布钩子

在 package.json 中添加 prepublishOnly 脚本，使其在发布前失败：

使用 .npmrc 文件锁定发布源

在项目根目录创建 .npmrc 文件，设置为私有源或无效源：

React有哪些hooks

• useState
• useEffect
• useRef
• useMemo
• useCallback
• useContext
• useReducer
• useLayoutEffect
• useTransition
• useId
• useDebugValue
• useDeferredValue

useLayoutEffect和useEffect的区别

useEffect：异步执行，在浏览器完成渲染后（页面已绘制）
useLayoutEffect：同步执行，在 DOM 更新后、浏览器绘制前（用户不可见），适用于需要读取 DOM 布局或强制同步更新的场景（如测量 DOM、修改样式）。

如何借助interSectionObserver实现一个dom可见性的自定义hook

有一个关键点是Ref的更新在useEffect执行前

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import { useEffect, useState, useRef } from 'react';
const useInView = (
    options = {
        root: null,
        rootMargin: '0px 0px',
        threshold: 1,
    },
    triggerOnce = false, // 是否只触发一次
) => {
    const [inView, setInView] = useState(false);
    const targetRef = useRef(null);

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    setInView(true);
                    if (triggerOnce) {
                        // 触发一次后结束监听
                        observer.unobserve(entry.target);
                    }
                } else {
                    setInView(false);
                }
            });
        }, options);

        if (targetRef.current) {
            // 开始监听
            observer.observe(targetRef.current);
        }

        return () => {
            if (targetRef.current) {
                // 组件卸载时结束监听
                observer.unobserve(targetRef.current);
            }
        };
    }, [options, triggerOnce]);

    return [targetRef, inView];
};

export default useInView;

useEffect 中如何使用 async/await

1. async函数抽离到外部

   1 2 3 4 5 6 7 8 9

   async function fetchMyAPI() { let response = await fetch("api/data"); response = await res.json(); ådataSet(response); } useEffect(() => { fetchMyAPI(); }, []);

let、const的区别

• 块级作用域
• 重复声明变量会报错
• 不能在声明前访问

数组去重方法

对象拷贝方法

数组交集、并集、差集

数组扁平

计算机网络

正向代理和反向代理

正向代理

正向代理是代理客户端，服务器无法感知客户端，客户端的请求都发往代理服务器，代理服务器替客户端发送请求给服务器，并把服务器响应的数据返回给客户端

应用：翻墙，接口转发实现跨域

反向代理

反向代理是代理服务器，客户端无法感知服务器

应用：负载均衡

Webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

Webpack 五个核心概念

Entry

入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader

Loader：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解
JS)

Plugins

插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。