列表虚拟化

Created at
Modified at

列表虚拟化就是只渲染部分列表项，具体思路：两层容器，外层控制可见区域大小，内层计算一个高度（列表项数量 * 列表项高度，或列表项高度累加），内层超高会使外层出现滚动条，监听外层容器滚动事件，通过event.currentTarget.scrollTop / 列表项高度得到可视区域的列表项的起始下标start，从start开始遍历列表数据，取若干条数据渲染，注意列表项的key设为列表数据下标，列表项为绝对定位，top通过下标 * 列表项高度动态计算而来； 

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
45
46
47
import React from "react";
import "./index.css";

function ListItem({ top, children }) {
    return <div className="listItem" style={{ top }}>{children}</div>
}


const ITEM_HEIGHT = 35;

function VirtualList({ sourceData, itemCount = 8 }) {
    const [start, setStart] = React.useState(0);

    const scrollHandler = React.useCallback((e) => {
        const newStart = Math.ceil(e.target.scrollTop / ITEM_HEIGHT);
        if (newStart !== start) {
            setStart(newStart);
        }
    }, [start, setStart]);

    const renderedItems = React.useMemo(() => {
        const end = start + itemCount;
        const items = [];
        for (let i = start; i < end && i < sourceData.length; i++) {
            items.push(<ListItem key={i} top={i * ITEM_HEIGHT}>{sourceData[i]}</ListItem>);
        }
        return items;
    }, [start, itemCount, sourceData]);

    return <div className="container">
        <div className="listContainer" style={{ height: itemCount * ITEM_HEIGHT }} onScroll={scrollHandler}>
            <div className="list" style={{ height: sourceData.length * ITEM_HEIGHT }}>
                {renderedItems}
            </div>
        </div>
    </div>
}

export function MockVirtualList() {
    const LEN = 100000;
    const data = new Array(LEN);
    for (let i = 0; i < LEN; i++) {
        data[i] = `${i}-------${Math.random() * i}`;
    }

    return <VirtualList sourceData={data} />
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
    padding: 50px;
}

.listContainer {
    position: relative;
    overflow: auto;
}

.list {
    position: relative;
    width: 100%;
}

.listItem {
    position: absolute;
    border: 1px solid blue;
    height: 35px;
    box-sizing: border-box;
    padding: 5px;
    width: 100%;
}

常见业务之单点登录（SSO）

Created at
Modified at

简介

SSO 是 single sign-on 的缩写，国内统称单点登录，其实翻译为单一登录更为准确，因为其内涵就是对于多系统的场景下，只进行一次登录即可访问所有子系统资源。

[注]：阅读前需掌握前置知识 JWT，Session 和 Cookie。

流程

SSO 的标准实现包含以下几类角色：

  1. 认证中心（Central Authentication Server）

阅读全文

LeetCode Hard 32. 最长有效括号

Created at
Modified at

32. 最长有效括号

解题思路

注释比较长，耐心看，重点一是看懂dp[i]表示的是什么，那就是从j到i的合法子串长度，0 <= j <= i，重点二是j可由等式dp[i] = i - j + 1变形求得，重点三是对贪心法的理解，只取局部最优，按这个思路考虑，每次迭代尾字符要么是(要么是)，则：

  1. ...(一定不合法
  2. ...)要分情况讨论：

阅读全文

浏览器内核

Created at
Modified at
,

  1. JS解释编译简要过程

    源代码通过解析器生成AST（Abstract syntax tree），然后生成字节码（介于高级语言与机器语言之间的中间代码），再通过解释器逐行解释并执行，借助JIT（Just in time）技术监测代码执行过程，根据代码执行频率从高到低将代码标记为不同等级，低等级的通过基线编译器编译，高等级的通过优化编译器编译，之后将执行编译后的代码，而一旦优化后代码不再满足优化条件，则将其降级到基线编译器或解释器中去处理，这就是去优化；

  2. 对JS单线程非阻塞的理解

阅读全文