dsh-perf-boost 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -4,6 +4,11 @@
 
 ## 更新详情
 
+### 0.2.2
+
+- 优化了长对话省渲染的实现，改成一处分样式接管子项，新消息进来自动生效的效果
+- 修复了流式输出时每来一条消息就扫一遍页面的问题，改成一分钟几十次的空闲巡检的问题
+
 ### 0.2.1
 
 - 新增了「大会话预热」的开关，设置页里点一下就能关的功能

package/README.md

@@ -9,6 +9,11 @@ Client-side rendering optimizations for DSH Desktop.
 
 ## 更新详情
 
+### 0.2.2
+
+- 优化了长对话省渲染的实现，改成一处分样式接管子项，新消息进来自动生效的效果
+- 修复了流式输出时每来一条消息就扫一遍页面的问题，改成一分钟几十次的空闲巡检的问题
+
 ### 0.2.1
 
 - 新增了「大会话预热」的开关，设置页里点一下就能关的功能
@@ -35,7 +40,7 @@ Client-side rendering optimizations for DSH Desktop.
 
 | 开关 | 默认 | 影响视觉 | 作用 |
 | --- | --- | --- | --- |
-| 长对话省渲染 | 开 | 无 | 列表子项加 `content-visibility: auto`，占位高度取该列表实测平均子项高度；末尾 4 项与正在流式输出的消息不处理，超过 300px 的代码块同样跳过 |
+| 长对话省渲染 | 开 | 无 | 给滚动列表容器挂一个 class，子项的 `content-visibility: auto` 由一条 CSS 规则接管（新消息自动生效，不用逐个打 inline style），占位高度取该列表实测平均子项高度；末尾 4 项与标了 `aria-busy` 的消息保持正常渲染，代码块单独按 300px 跳过 |
 | 窗口隐藏不排帧 | 开 | 无 | 页面不可见时 `schedule()` 直接返回；切回时有 `visibilitychange` 钩子恢复，每秒看门狗兜底 |
 | 空闲降帧 | 开 | 无 | 20 秒无输入将 rAF 驱动的动画降到 30fps，有输入立即恢复 |
 | 媒体懒加载 | 开 | 无 | 图片加 `loading=lazy`、`decoding=async`，视频加 `preload=metadata` |

package/lib/client.js

@@ -26,16 +26,25 @@ window.__ModuleLoader__.load({
     var NAME = 'dsh-perf-boost';
     var STORE = 'dsh-perf-boost:cfg';
     var STYLE_ID = 'dpb-style';
-    var VERSION = '0.2.1';
+    var CV_CLASS = 'dpb-cv'; // 挂在滚动列表容器上，子项的 content-visibility 交给 CSS
+    var CV_VAR = '--dpb-cis';
+    var VERSION = '0.2.2';
     // 更新公告：只用「新增了…的功能 / 修复了…的问题 / 优化了…的效果」三种句式。
     var RELEASE_NOTES = [
+      {
+        version: '0.2.2',
+        items: [
+          '优化了长对话省渲染的实现，改成一条 CSS 规则接管，新消息进来自动生效的效果',
+          '修复了流式输出时每来一条消息就扫一遍页面的问题，改成一分钟几十次的空闲巡检',
+        ],
+      },
       {
         version: '0.2.1',
         items: [
           '新增了大会话预热的开关，可以直接在设置里关掉的功能',
           '新增了浅色模式的配色，开关和边框在浅色主题下也看得清的效果',
-          '优化了开关说明的文字，统一说成「可能会导致…」的效果',
-          '新增了百分比改成最近 1 分钟窗口，长时间使用不会越用越低的功能',
+          '优化了开关说明的文字，统一说成「可能会导致…」的效果',
+          '新增了百分比改成最近 1 分钟窗口，长时间使用不会越用越低的功能',
           '优化了开关列表的顺序，默认开启的排在前面、默认关闭的放在后面的效果',
         ],
       },
@@ -95,7 +104,7 @@ window.__ModuleLoader__.load({
         .catch(function () { return null; });
     }
 
-    function checkUpdate() {
+    function checkUpdate(force) {
       if (window.__dpbUpdating) return;
       window.__dpbUpdating = true;
       update.state = 'checking';
@@ -107,7 +116,7 @@ window.__ModuleLoader__.load({
         method: 'POST',
         credentials: 'same-origin',
         headers: { 'content-type': 'application/json' },
-        body: '{}',
+        body: force === true ? '{"force":true}' : '{}',
         signal: ctl ? ctl.signal : undefined,
       })
         .then(function (r) { return r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)); })
@@ -544,82 +553,46 @@ window.__ModuleLoader__.load({
       return Math.max(48, Math.round(sum / cnt));
     }
 
-    function isLive(el) {
+    // 容器上挂 class，子项交给 CSS。
+    // 逐项打 inline style 等于「每来一条消息就把整个列表摸一遍」，长会话里这笔开销
+    // 比省下来的渲染还贵；改成一处分样式后，新消息天然被覆盖，JS 只负责找容器。
+    function markContainer(el) {
+      if (el.children.length < 24) return;
       try {
-        if (el.getAttribute && (el.getAttribute('aria-busy') === 'true' || el.getAttribute('data-streaming') === 'true')) return true;
-        return !!(el.querySelector && el.querySelector('[aria-busy="true"]'));
-      } catch (e) { return false; }
+        if (!el.classList.contains(CV_CLASS)) el.classList.add(CV_CLASS);
+        var h = avgChildHeight(el);
+        if (el.style.getPropertyValue(CV_VAR) !== h + 'px') el.style.setProperty(CV_VAR, h + 'px');
+      } catch (e) { void e; }
     }
 
-    function tagItems(record) {
-      var el = record.el;
-      var size = 'auto ' + avgChildHeight(el) + 'px';
-      // 列表不长就没有收益，只增加出错面：少于 24 项直接不动。
-      if (el.children.length < 24) return;
-      // 末尾 4 项是正在生成/刚贴上的内容，免掉跳过渲染，避免「正在动的画面被冻住」。
-      var lastSafe = Math.max(0, el.children.length - 4);
-      for (var i = 0; i < lastSafe; i++) {
-        var it = el.children[i];
-        if (it.style.contentVisibility === 'auto') continue;
-        if (isLive(it)) continue;
-        record.items.push({ el: it, cv: it.style.contentVisibility, cis: it.style.containIntrinsicSize });
-        it.style.contentVisibility = 'auto';
-        it.style.containIntrinsicSize = size;
-      }
-      var pres = el.querySelectorAll('pre');
-      for (var k = 0; k < pres.length; k++) {
-        var pre = pres[k];
-        if (pre.scrollHeight <= 300 || pre.style.contentVisibility === 'auto') continue;
-        record.items.push({ el: pre, cv: pre.style.contentVisibility, cis: pre.style.containIntrinsicSize });
-        pre.style.contentVisibility = 'auto';
-        pre.style.containIntrinsicSize = 'auto 300px';
-      }
+    function unmark(el) {
+      try {
+        el.classList.remove(CV_CLASS);
+        el.style.removeProperty(CV_VAR);
+      } catch (e) { void e; }
     }
 
     function clearAll() {
-      for (var i = 0; i < tagged.length; i++) {
-        var rec = tagged[i];
-        for (var j = 0; j < rec.items.length; j++) {
-          var it = rec.items[j];
-          try {
-            it.el.style.contentVisibility = it.cv || '';
-            it.el.style.containIntrinsicSize = it.cis || '';
-          } catch (e) { void e; }
-        }
-      }
+      for (var i = 0; i < tagged.length; i++) unmark(tagged[i]);
       tagged = [];
     }
 
-    function recordFor(el) {
-      for (var i = 0; i < tagged.length; i++) if (tagged[i].el === el) return tagged[i];
-      return null;
-    }
-
     function applyLazyList() {
       if (!cfg.lazyList) { clearAll(); return; }
       var targets = collectTargets();
-      if (!targets.length) return;
       for (var i = tagged.length - 1; i >= 0; i--) {
-        if (targets.indexOf(tagged[i].el) < 0 && !document.contains(tagged[i].el)) tagged.splice(i, 1);
+        if (targets.indexOf(tagged[i]) < 0 || !document.contains(tagged[i])) {
+          unmark(tagged[i]);
+          tagged.splice(i, 1);
+        }
       }
       for (var t = 0; t < targets.length; t++) {
         var el = targets[t];
-        var rec = recordFor(el);
-        if (!rec) {
-          rec = { el: el, items: [] };
-          tagged.push(rec);
-        }
-        try { tagItems(rec); } catch (e) { void e; }
+        if (tagged.indexOf(el) < 0) tagged.push(el);
+        try { markContainer(el); } catch (e) { void e; }
       }
       var n = 0;
-      for (var m = 0; m < tagged.length; m++) {
-        var items = tagged[m].items;
-        // 被替换掉、被压缩掉的子项还留着引用的话，已脱离文档的 DOM 永远回收不了。
-        for (var q = items.length - 1; q >= 0; q--) {
-          if (!document.contains(items[q].el)) items.splice(q, 1);
-        }
-        n += items.length;
-      }
+      for (var m = 0; m < tagged.length; m++) n += Math.max(0, tagged[m].children.length - 4);
       MET.lazyItems = n;
     }
 
@@ -628,10 +601,10 @@ window.__ModuleLoader__.load({
       if (!cfg.lazyList) return '已关闭。';
       var total = 0, lists = 0, kids = 0;
       for (var i = 0; i < tagged.length; i++) {
-        if (!document.contains(tagged[i].el)) continue;
+        if (!document.contains(tagged[i])) continue;
         lists++;
-        total += tagged[i].items.length;
-        kids += tagged[i].el.children.length;
+        total += Math.max(0, tagged[i].children.length - 4);
+        kids += tagged[i].children.length;
       }
       if (!lists) {
         var targets = [];
@@ -674,44 +647,20 @@ window.__ModuleLoader__.load({
       }
     }
 
+    // 只做「容器换没换」的巡检。子项由 CSS 自己跟上，所以不必盯整棵 DOM——
+    // 盯子树会在流式输出时被每一条新消息唤醒，那笔开销反而比省下来的大。
     function watchLazyList() {
-      if (window.__dpbObserver || typeof MutationObserver !== 'function') return;
-      window.__dpbObserver = true;
-      var timer = null;
-      var rescan = function () {
+      if (window.__dpbWatcher) return;
+      window.__dpbWatcher = true;
+      window.setInterval(function () {
+        if (document.hidden) return;
+        if (!cfg.lazyList && !cfg.mediaLazy && !cfg.mediaPause) return;
         idleRun(function () {
           try { applyLazyList(); } catch (e) { void e; }
           try { applyMediaLazy(); } catch (e) { void e; }
           try { applyViewportMedia(); } catch (e) { void e; }
         }, 400);
-      };
-      var obs = new MutationObserver(function () {
-        if (timer) return;
-        // 滚动中、或者刚跑完长任务：这会儿别排队，等安静下来后的下一次变动再说。
-        if (Date.now() - lastBusyAt < 200) return;
-        timer = window.setTimeout(function () {
-          timer = null;
-          if (document.hidden) return;
-          rescan();
-        }, 1500);
-      });
-      obs.observe(document.body, { childList: true, subtree: true });
-      // 盯整页太吵：列表出现后把观察点挪到列表本身；列表被整体替换时再挪回来。
-      var watchTarget = null;
-      var follow = function () {
-        if (document.hidden) return;
-        var list = null;
-        try { list = collectTargets()[0] || null; } catch (e) { list = null; }
-        var next = list && list.isConnected ? list : document.body;
-        if (next === watchTarget) return;
-        try { obs.observe(next, { childList: true, subtree: true }); } catch (e) { void e; }
-        watchTarget = next;
-      };
-      follow();
-      window.setInterval(follow, 10000);
-      document.addEventListener('visibilitychange', function () {
-        if (document.hidden && timer) { window.clearTimeout(timer); timer = null; }
-      });
+      }, 2500);
     }
 
     // ————————————————— 媒体懒加载 —————————————————
@@ -967,6 +916,12 @@ window.__ModuleLoader__.load({
         '.dpb-knob{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:color-mix(in oklab,currentColor 92%,transparent);transition:transform .15s;box-shadow:0 0 0 1px color-mix(in oklab,currentColor 10%,transparent)}',
         '.dpb-sw[data-on="1"] .dpb-knob{transform:translateX(17px);background:#fff}',
         '.dpb-quiet *, .dpb-quiet *::before, .dpb-quiet *::after{animation-play-state:paused!important}',
+        // 子项：滚出视口就不渲染；末尾 4 项和正在生成的那条保持正常渲染。
+        '.' + CV_CLASS + ' > *{content-visibility:auto;contain-intrinsic-size:auto var(' + CV_VAR + ',220px)}',
+        '.' + CV_CLASS + ' > :nth-last-child(-n+4){content-visibility:visible}',
+        '.' + CV_CLASS + ' > [aria-busy="true"]{content-visibility:visible}',
+        // 大代码块单独跳过：一条消息里有几千行 pre 时，救的是这一条。
+        '.' + CV_CLASS + ' pre{content-visibility:auto;contain-intrinsic-size:auto 300px;overflow-anchor:none}',
       '.dpb-notes{margin:12px 2px 0;font-size:12px;line-height:1.8;opacity:.78}',
       '.dpb-notes b{font-weight:600;opacity:1}',
       '.dpb-note{margin:10px 2px 0;font-size:12px;line-height:1.7;opacity:.72}',
@@ -1152,7 +1107,7 @@ window.__ModuleLoader__.load({
                         : '—')),
             React.createElement('button', {
               type: 'button', className: 'dpb-btn',
-              onClick: function () { checkUpdate(); },
+              onClick: function () { checkUpdate(true); },
             }, update.state === 'checking' ? '检查中' : '检查更新')),
           React.createElement('div', { className: 'dpb-notes' },
             React.createElement('b', null, '更新详情'),
@@ -1173,7 +1128,7 @@ window.__ModuleLoader__.load({
         try { applyMediaLazy(); } catch (e) { void e; }
         try { applyViewportMedia(); } catch (e) { void e; }
       }, 600);
-      if (cfg.lazyList) watchLazyList();
+      watchLazyList();
       if (cfg.showFps) startBadge();
       else {
         var el = document.getElementById(BADGE_ID);

package/lib/index.js

@@ -11,6 +11,7 @@
 // 路由只读、无副作用：只取 `latest` 标签的版本号，不下载、不安装、不落盘。
 // 网络不可用时返回 `latest: null`，页面显示「未查到」，其余功能不受影响。
 import { readFile, writeFile, mkdir } from 'node:fs/promises';
+import https from 'node:https';
 import { homedir } from 'node:os';
 import { join } from 'node:path';
 
@@ -32,7 +33,10 @@ const PACKAGE_NAME = 'dsh-perf-boost';
 // npmmirror 优先（国内快），失败再问官方源。
 const REGISTRIES = ['https://registry.npmmirror.com', 'https://registry.npmjs.org'];
 const CACHE_MS = 10 * 60 * 1000;
-const TIMEOUT_MS = 8000;
+const TIMEOUT_MS = 5000;
+// 复用连接：第一次握手 200ms 上下，之后 40ms 上下。宿主里的全局 fetch 首次常常
+// 要 3-4 秒（undici 独立连接池 + 冷 DNS），本机实测差 20 倍。
+const AGENT = new https.Agent({ keepAlive: true, maxSockets: 4 });
 
 let cache = { at: 0, latest: null, source: '', error: '' };
 
@@ -63,45 +67,57 @@ export function isNewer(candidate, current) {
   return false;
 }
 
-async function fetchLatest(registry) {
-  const url = `${registry}/${PACKAGE_NAME}/latest`;
-  const response = await fetch(url, {
-    headers: { accept: 'application/json' },
-    signal: AbortSignal.timeout(TIMEOUT_MS),
+function httpsJson(url) {
+  return new Promise((resolve, reject) => {
+    const request = https.get(url, { agent: AGENT, family: 4, headers: { accept: 'application/json' } }, (response) => {
+      const status = response.statusCode ?? 0;
+      if (status !== 200) {
+        response.resume();
+        reject(new Error(`HTTP ${status}`));
+        return;
+      }
+      const chunks = [];
+      response.on('data', (chunk) => chunks.push(chunk));
+      response.on('end', () => {
+        try {
+          resolve(JSON.parse(Buffer.concat(chunks).toString('utf8')));
+        } catch {
+          reject(new Error('响应不是 JSON'));
+        }
+      });
+      response.on('error', reject);
+    });
+    request.setTimeout(TIMEOUT_MS, () => request.destroy(new Error('timeout')));
+    request.on('error', reject);
   });
-  if (!response.ok) throw new Error(`HTTP ${response.status}`);
-  const body = await response.json();
+}
+
+async function fetchLatest(registry) {
+  const body = await httpsJson(`${registry}/${PACKAGE_NAME}/latest`);
   const version = body?.version;
   if (typeof version !== 'string' || version === '') throw new Error('响应里没有 version');
   return { version, source: registry };
 }
 
-async function resolveLatest() {
+async function resolveLatest(force = false) {
   const now = Date.now();
-  if (cache.at !== 0 && cache.at !== undefined && now - cache.at < CACHE_MS) return cache;
+  if (!force && cache.at !== 0 && cache.at !== undefined && now - cache.at < CACHE_MS) return cache;
   let lastError = '未连接';
   let notPublished = false;
-  let best = null;
-  let bestSource = '';
+  // 先问第一个源，拿到就回；失败才轮到下一个。
+  // 之前是「两边都问、取更高的版本」，多花一次跨洋往返（本机实测 2.0-2.5 秒），
+  // 为的只是防止镜像比官方慢半拍；版本号差半分钟不影响点「检查更新」这件事。
   for (const registry of REGISTRIES) {
     try {
       const { version, source } = await fetchLatest(registry);
-      // 镜像可能比官方慢半拍，两边都问，取版本更高的那个，别被慢的镜像带偏。
-      if (best === null || isNewer(version, best)) {
-        best = version;
-        bestSource = source;
-      }
+      cache = { at: now, latest: version, source, error: '' };
+      return cache;
     } catch (error) {
       lastError = error?.message ?? String(error);
-      // 所有镜像都 404 = 这个包还没发到 npm，不算「网络失败」。
-      if (lastError === 'HTTP 404') notPublished = true;
-      else notPublished = false;
+      // 这个源说 404 = 它上面没有这个包，换下一个源继续试。
+      notPublished = lastError === 'HTTP 404';
     }
   }
-  if (best !== null) {
-    cache = { at: now, latest: best, source: bestSource, error: '' };
-    return cache;
-  }
   cache = { at: now, latest: null, source: '', error: notPublished ? 'not-published' : lastError };
   return cache;
 }
@@ -162,6 +178,14 @@ export function apply(ctx, config) {
       .catch(() => { void 0; });
   }
 
+  // 启动后先在后台问一次，设置页打开时直接命中缓存（失败无所谓，路由里还会再试）。
+  try {
+    const warmTimer = setTimeout(() => { resolveLatest().catch(() => { void 0; }); }, 3000);
+    if (typeof warmTimer?.unref === 'function') warmTimer.unref();
+  } catch {
+    // 拿不到定时器就算了，只是第一次打开设置页慢一点。
+  }
+
   ctx.inject(['connection'], (c) => {
     const connection = c.get('connection');
     const register = typeof connection?.fetch?.register === 'function'
@@ -245,8 +269,17 @@ export function apply(ctx, config) {
       // 注册失败只是设置页那个开关不出现，预热仍按配置文件走。
     }
 
-    const handler = async () => {
-      const [installed, resolved] = await Promise.all([readInstalledVersion(), resolveLatest()]);
+    const handler = async (request) => {
+      let force = false;
+      try {
+        const text = typeof request?.text === 'function' ? await request.text() : '';
+        // 手动点「检查更新」要拿最新答案，不能被 10 分钟缓存挡住；自动检查仍走缓存。
+        if (text) force = JSON.parse(text)?.force === true;
+      } catch {
+        force = false;
+      }
+      const startedAt = Date.now();
+      const [installed, resolved] = await Promise.all([readInstalledVersion(), resolveLatest(force)]);
       const latest = resolved.latest;
       return Response.json(
         {
@@ -258,6 +291,7 @@ export function apply(ctx, config) {
             source: resolved.source,
             checkedAt: new Date(resolved.at === 0 ? Date.now() : resolved.at).toISOString(),
             error: latest === null ? resolved.error : '',
+            elapsedMs: Date.now() - startedAt,
           },
         },
         { headers: { 'cache-control': 'no-store' } },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-perf-boost",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "DSH 桌面端性能优化（纯客户端）：长对话省渲染、窗口隐藏不排帧默认开，关背景模糊/减少动画/空闲降帧按需打开，设置页显示实测省下的主线程时间。Client-side rendering optimizations for DeepSeek Harness Desktop.",
   "type": "module",
   "main": "lib/index.js",