同样的大模型，内容输出在电脑端明显比手机端快很多，可能是什么原因呢？

[huicewang]

🥰 Feature Description

手机端访问速度明显很慢，可能原因是什么？

🧐 Proposed Solution

期望提升手机端内容输出速度

📝 Additional Information

No response

[arvinxx]

我感觉有可能和 tokenizer 有关系。我们会在界面上实时计算当前消息的所用 token 数，提升用户对于当前上下文窗口的感知：

这个功能在实现上，会使用一个重计算的 wasm 模块 gpt-tokenizer，用于将字符串计数成 token。目前的实现中， tokenzier 是在主进程跑的：

  const inputTokenCount = useTokenCount(input);

  const systemRoleToken = useTokenCount(systemRole);
  const chatsToken = useTokenCount(messageString);
  const toolsToken = useTokenCount(toolsString);

// useTokenCount

import { startTransition, useEffect, useState } from 'react';

import { encodeAsync } from '@/utils/tokenizer';

export const useTokenCount = (input: string = '') => {
  const [value, setNum] = useState(0);

  useEffect(() => {
    startTransition(() => {
      encodeAsync(input)
        .then(setNum)
        .catch(() => {
          // 兜底采用字符数
          setNum(input.length);
        });
    });
  }, [input]);

  return value;
};

虽然我们已经做了并发优化，但如果单次计算耗时仍然很久的话，还是会阻塞主进程渲染，导致UI卡顿。

可能PC端的算力够快，但部分移动端设备的计算性能并不够强，所以出现卡顿。

如果你会修改代码的话，可以试试看直接将这一行改成 return null ，然后再部署试试。
https://github.com/lobehub/lobe-chat/blob/main/src/features/ChatInput/ActionBar/Token/index.tsx#L12

如果这么改之后性能有明显提升，那么说明就是这个问题导致。我们后续考虑把这部分计算移动到 service worker 中去。

[arvinxx]

经过测试发现，当 token 数量达到 10k+ 级别时，单次 token 的计算耗时会变得不可忽略。

看来 有必要将其挪到 Web Worker 进行异步处理。