切入点​

如何对流失数据优化，提高渲染性能。从以下两点切入:

懒加载渲染： 可视区外部的信息不用渲染，当滚动到可视区时再渲染。 注意，此时需要一个buff来缓冲渲染到页面的信息，防止给用户造成流暂停的假象。

增量式渲染： 已经渲染到页面上的数据不用重复渲染，只渲染新增的数据。

概要​

核心数据结构： 消息列表 (messages)

核心操作：调用模型接口，生成消息

次要操作：复制、引用、重新生成、编辑、参考附件选择

UI：聚合上操作以及数据

class CoreUI {
    useMessage(){
        // connect to message
        return this
    }
    useHandle(){
        // connect to handle
        return this
    }
    useChat(){
        // connect to AI
        return this
    }
    render(){
        // render ui
        return <></>
    }
}
new CoreUI().useMessage().useHandle().useChat().render();

Concept​

S-S-E​

Server-Send-Event: data is flowing from server to client format: tag:string for example:

data: "{ name: 'marvin', age: 20 }"

在SSE中 数据以固定的格式传输到客户端，在使用之前客户端或许需要先进行解析。

Web开发的本质就是将 数据 呈现到页面，平滑的交互带来好的用户体验(User Perceived Performance)，性能优化也此为主。

原生JS​

如果不使用 React，我们可以使用原生JS来实现页面的交互，比如下面的例子：

const addbtn = document.getElementById("add");
const counter = document.getElementById("counter");

addbtn.onclick = function() {
    // some business logic
  num.innerText = parseInt(counter.innerText) + 1;
};

可以看到 数据 和 UI有很强的粘性，业务代码不够清晰，维护性差。且频繁的操作DOM会导致性能问题。

如何优化？​

不直接操作DOM，而是在DOM和数据之间加一层，当我们需要更新数据时去通知这一层，至于更新优化的逻辑，全部集中在这一层。

React就扮演了这样的角色。

React如何工作​

https://github.com/acdlite/react-fiber-architecture

https://jser.pro/ddir/rie?reactVersion=18.3.1&snippetKey=hq8jm2ylzb9u8eh468

以数据为核心，驱动视图更新 React架构如下： Scheduler -> Reconciler -> Renderer

const Counter = () => {
    const [counter, setCounter] = useState(0);
    return <>
        <span>{counter}</span>
        <button onClick={() => setCounter(prev => prev + 1)}>add</button>
    </>
}

调用setCounter触发更新任务,Scheduler依据任务的优先级选择任务，将任务交给 Reconciler, Reconciler 负责找出变化的部份，将变化的部份交给Render，Render负责将变化的部份渲染到页面上。 Reconciler的工作是最复杂的，初次渲染时，Reconciler会生成一颗Fiber树，当更新时Reconciler 利用双缓存机制克隆原来的树，将更新后的节点更新到新树上，最后将新树替换原来的树。

Echart React​

对于绘制图表，提供合适的 options 给 echart 即可，但是往往需要显示的数据从接口获取，需要将图表的数据和样式分离。

假设有如下封装好的组件：

<EchartReact options={options} {...{ others }}></EchartReact>

Currying​

Currying is a technique of converting a function that takes multiple arguments into a series of functions that each take a single argument.

In short: Using the characteristics of higher-order functions, the function is partially called according to the parameters.

Business Scenario​

Users can perform operations such as dragging and resizing the content on the page to customize the layout of the page.

demo

What is Vue-Grid-Layout?​

Vue-Grid-Layout is a drag-and-drop layout component that can meet the above requirements. It is a secondary development based on Gridster, supporting drag-and-drop, scaling, responsive layout, etc.

打包​

编写打包逻辑 -> 打包本地js -> 发布 -> cycle

参考​

• GitHub Pages 配置
• GitHub Actions 官方文档
• GitHub Pages 域名配置指南

托管静态资源到GithubPage​

• 通过github action， 从action产物部署
• 推送到 gh-pages, 从分支部署

两种部署模式对比​

• 分支推送模式：生成 gh-pages 分支，GitHub 自动从该分支拉取内容
• 直接部署模式：通过 upload-pages-artifact + deploy-pages 直接托管，无需维护分支

常见问题排查​

错误信息：Branch "main" is not allowed to deploy due to environment protection rules

• 进入仓库设置：Settings → Environments → github-pages
• 修改 Deployment branches：允许 main 分支
• 关闭 Required reviewers 或添加审批者（如有必要）

部署后显示 404

• 检查构建路径是否正确（如 Docusaurus 默认输出到 build 文件夹）
• 验证仓库设置的 Pages 来源：Settings → Pages → Build and deployment → Branch