Feat(Network): Add recycle scrolling to imporove performance.

Tencent · Oct 27, 2022 · 52d32de · 52d32de
1 parent beaa94c
commit 52d32de
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,10 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
-## 3.15.0-rc (2022-10-??)
+## 3.15.0-rc (2022-11-??)
 
-- `Feat(Log)` Add recycle scrolling and scroll to top/bottom. (PR #570)
+- `Feat(Log)` Add recycle scrolling to imporove performance, and add scroll to top/bottom buttons. (PR #570)
 - `Feat(Log)` Add support for `console.group(), console.groupCollapsed(), console.groupEnd()`. (issue #545)
+- `Feat(Network)` Add recycle scrolling to imporove performance.
 - `Feat(Network)` Add "Start Time" of a request.
 - `Feat(Network)` Use `curl` instead of `url` as the copy value of a request. (issue #410)
 

diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -1,9 +1,10 @@
 [English](./CHANGELOG.md) | 简体中文
 
-## 3.15.0-rc (2022-10-??)
+## 3.15.0-rc (2022-11-??)
 
 - `Feat(Log)` 新增虚拟滚动列表以提升性能，并支持快速滚动到顶部/底部。 (PR #570)
 - `Feat(Log)` 新增对 `console.group(), console.groupCollapsed(), console.groupEnd()` 方法的支持。 (issue #545)
+- `Feat(Network)` 新增虚拟滚动列表以提升性能。
 - `Feat(Network)` 新增 request 的 "Start Time"（发起时间）。
 - `Feat(Network)` 使用 `curl` 格式作为 request 的复制内容，而非 `url`。 (issue #410)
 

diff --git a/src/component/recycleScroller/recycleScroller.less b/src/component/recycleScroller/recycleScroller.less
@@ -11,6 +11,7 @@
 
 .vc-scroller-items {
   will-change: height;
+  position: relative;
 }
 
 .vc-scroller-item {

diff --git a/src/component/recycleScroller/recycleScroller.svelte b/src/component/recycleScroller/recycleScroller.svelte
@@ -19,11 +19,13 @@
   export let end = 0;
 
   // local state
+  let header: HTMLElement | undefined;
   let footer: HTMLElement | undefined;
   let viewport: HTMLElement | undefined;
   let contents: HTMLElement | undefined;
   let frame: HTMLElement | undefined;
 
+  let headerHeight = 0;
   let footerHeight = 0;
   let viewportHeight = 0;
   let frameHeight = 0;
@@ -39,7 +41,7 @@
   const updateVisible = createRecycleManager()
 
   const getScrollExtent = () =>
-    Math.max(0, frameHeight + footerHeight - viewportHeight);
+    Math.max(0, frameHeight + headerHeight + footerHeight - viewportHeight);
 
   let isOnBottom = true;
   let avoidRefresh = false;
@@ -53,6 +55,7 @@
     isOnBottom = Math.abs(pos - scrollExtent) <= 1;
 
     contents.style.transform = `translateY(${-pos}px) translateZ(0)`;
+    // (window as any)._vcOrigConsole.log('pos', pos);
     refreshScrollbar();
 
     if (avoidRefresh) {
@@ -66,7 +69,7 @@
 
   const refreshScrollbar = () => {
     const pos = scrollHandler.getPosition();
-    const fac = 100 / (frameHeight + footerHeight);
+    const fac = 100 / (frameHeight + headerHeight + footerHeight);
     scrollbarThumbPos = pos * fac;
     scrollbarThumbHeight = viewportHeight * fac;
   };
@@ -120,8 +123,9 @@
       topMap[i] = y;
       y += heightMap[i];
     }
-    frameHeight = Math.max(y, viewportHeight - footerHeight);
+    frameHeight = Math.max(y, viewportHeight - headerHeight - footerHeight);
 
+    // (window as any)._vcOrigConsole.log("init(): frameHeight", frameHeight);
     // (window as any)._vcOrigConsole.log("heightMap", heightMap);
     // (window as any)._vcOrigConsole.log("reuseHeightCount", reuseHeightCount);
     // (window as any)._vcOrigConsole.log(
@@ -210,6 +214,7 @@
       // setTimeout to avoid ResizeObserver loop limit exceeded error
       await new Promise((resolve) => setTimeout(resolve, 0));
 
+      initItems(items);
       refresh(items, scrollHandler.getPosition(), viewportHeight);
       if (viewportHeight !== 0) scrollToBottom(isOnBottom && stickToBottom);
       refreshScrollbar();
@@ -223,11 +228,24 @@
       // ;(window as any)._vcOrigConsole.log('footer height resize', height);
       // no need to fresh
       footerHeight = height;
+      initItems(items);
       if (viewportHeight !== 0) scrollToBottom(isOnBottom && stickToBottom);
       refreshScrollbar();
     }
   );
 
+  registerHeightObserver(
+    () => header,
+    (height) => {
+      if (headerHeight === height) return;
+      // ;(window as any)._vcOrigConsole.log('header height resize', height);
+      // no need to fresh
+      headerHeight = height;
+      initItems(items);
+      refreshScrollbar();
+    }
+  );
+
   const onRowResize = async (index: number, height: number) => {
     if (heightMap[index] === height || viewportHeight === 0) return;
 
@@ -247,7 +265,7 @@
     }
     frameHeight = Math.max(
       topMap[n - 1] + heightMap[n - 1],
-      viewportHeight - footerHeight
+      viewportHeight - headerHeight - footerHeight
     );
 
     const scrollPos = scrollHandler.getPosition();
@@ -315,6 +333,11 @@
   class="vc-scroller-viewport"
 >
   <div bind:this={contents} class="vc-scroller-contents">
+    {#if $$slots.header}
+      <div bind:this={header} class="vc-scroller-header">
+        <slot name="header" />
+      </div>
+    {/if}
     <div bind:this={frame} class="vc-scroller-items">
       {#if items.length}
         {#each visible as row, i (row.key)}

diff --git a/src/core/style/theme.less b/src/core/style/theme.less
@@ -78,6 +78,7 @@
 
 // table
 .vc-table {
+  height: 100%;
 
   .vc-table-row {
     line-height: 1.5;

diff --git a/src/network/network.svelte b/src/network/network.svelte
@@ -4,7 +4,9 @@
   import IconCopy from '../component/iconCopy.svelte';
   import { requestList } from './network.model';
   import Style from './network.less';
+  import RecycleScroller from '../component/recycleScroller/recycleScroller.svelte';
   import type { VConsoleNetworkRequestItem } from './requestItem';
+  import type { IVConsoleTabOptions } from "../lib/plugin";
 
   let reqCount = 0;
   const updateReqCount = (list: typeof $requestList) => {
@@ -13,6 +15,15 @@
   const unsubscribe = requestList.subscribe(updateReqCount);
   updateReqCount($requestList);
 
+  export const options: IVConsoleTabOptions = {
+    fixedHeight: true,
+  };
+
+  let reqList = [];
+  $: {
+    reqList = Object.values($requestList);
+  }
+
   const onTapPreview = (reqId: string) => {
     $requestList[reqId].actived = !$requestList[reqId].actived;
   };
@@ -26,6 +37,10 @@
     return `${curl} '${req.url}'`;
   };
 
+  const stopTuochPropagation = (e: Event) => {
+    e.stopPropagation();
+  };
+
   onMount(() => {
     Style.use();
   });
@@ -44,17 +59,29 @@
 </script>
 
 <div class="vc-table">
-
-  <dl class="vc-table-row">
-    <dd class="vc-table-col vc-table-col-4">Name {#if reqCount > 0}({reqCount}){/if}</dd>
-    <dd class="vc-table-col">Method</dd>
-    <dd class="vc-table-col">Status</dd>
-    <dd class="vc-table-col">Time</dd>
-  </dl>
 
   <div class="vc-plugin-content">
-    {#each Object.entries($requestList) as [reqId, req]}
-      <div class="vc-group" class:vc-actived="{req.actived}" id="{req.id}">
+    <RecycleScroller
+      items={reqList}
+      itemKey="id"
+      itemHeight={30}
+      buffer={100}
+      stickToBottom
+      scrollbar
+    >
+
+      <svelte:fragment slot="header">
+        <dl class="vc-table-row">
+          <dd class="vc-table-col vc-table-col-4">Name {#if reqCount > 0}({reqCount}){/if}</dd>
+          <dd class="vc-table-col">Method</dd>
+          <dd class="vc-table-col">Status</dd>
+          <dd class="vc-table-col">Time</dd>
+        </dl>
+      </svelte:fragment>
+
+      <div slot="empty" class="vc-plugin-empty">Empty</div>
+
+      <div slot="item" let:item={req} class="vc-group" class:vc-actived="{req.actived}" id="{req.id}">
         <dl class="vc-table-row vc-group-preview" class:vc-table-row-error="{req.status >= 400}" on:click={() => onTapPreview(req.id)}>
           <dd class="vc-table-col vc-table-col-4">{req.name}</dd>
           <dd class="vc-table-col">{req.method}</dd>
@@ -132,13 +159,27 @@
             </dl>
             {#if (typeof req.postData === 'string')}
               <div class="vc-table-row vc-left-border vc-small">
-                <pre class="vc-table-col vc-table-col-value vc-max-height-line">{req.postData}</pre>
+                <pre
+                  class="vc-table-col vc-table-col-value vc-max-height-line"
+                  on:touchstart={stopTuochPropagation}
+                  on:touchmove={stopTuochPropagation}
+                  on:touchend={stopTuochPropagation}
+                  on:touchcancel={stopTuochPropagation}
+                  on:wheel={stopTuochPropagation}
+                >{req.postData}</pre>
               </div>
             {:else}
               {#each Object.entries(req.postData) as [key, item]}
               <div class="vc-table-row vc-left-border vc-small">
                 <div class="vc-table-col vc-table-col-2">{key}</div>
-                <div class="vc-table-col vc-table-col-4 vc-table-col-value vc-max-height-line">{prettyStringify(item)}</div>
+                <div
+                  class="vc-table-col vc-table-col-4 vc-table-col-value vc-max-height-line"
+                  on:touchstart={stopTuochPropagation}
+                  on:touchmove={stopTuochPropagation}
+                  on:touchend={stopTuochPropagation}
+                  on:touchcancel={stopTuochPropagation}
+                  on:wheel={stopTuochPropagation}
+                >{prettyStringify(item)}</div>
               </div>
               {/each}
             {/if}
@@ -174,12 +215,18 @@
             </div>
             {/if}
             <div class="vc-table-row vc-left-border vc-small">
-              <pre class="vc-table-col vc-max-height vc-min-height">{req.response || ''}</pre>
+              <pre
+                class="vc-table-col vc-max-height vc-min-height"
+                on:touchstart={stopTuochPropagation}
+                on:touchmove={stopTuochPropagation}
+                on:touchend={stopTuochPropagation}
+                on:touchcancel={stopTuochPropagation}
+                on:wheel={stopTuochPropagation}
+              >{req.response || ''}</pre>
             </div>
           </div>
         </div>
       </div>
-    {/each}
-
+    </RecycleScroller>
   </div>
 </div>
diff --git a/src/storage/storage.svelte b/src/storage/storage.svelte
@@ -90,6 +90,6 @@
           </div>
         </div>
       {:else}
-        <div class="vc-plugin-empty"></div>
+        <div class="vc-plugin-empty">Empty</div>
       {/each}
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -90,6 +90,6 @@ @@
               </div>
             </div>
           {:else}
-            <div class="vc-plugin-empty"></div>
+            <div class="vc-plugin-empty">Empty</div>
           {/each}
     </div>