tencent.jquery.pix.component 1.0.90 → 1.0.91-beta1

package/change.md

@@ -1,5 +1,9 @@
 # 更新日志
 
+### 1.0.91-beta1
+
+- 瀑布流组件V2版本的滑动流畅度升级
+
 ### 1.0.88-beta2
 
 - getFontSize每次实时获取

package/components/waterfallv2/waterfallv2.js

@@ -176,25 +176,32 @@ Waterfallv2.prototype.init = function (optionsMain = null) {
         </div>
       `);
 
-
+    // 【优化】缓存 DOM 引用，避免每次都执行 jQuery find 查询
+    this.$scrollWrapper = $container.find('.waterfallv2-list-scroll');
+    this.$viewport = $container.find('.Waterfallv2-list-viewport');
 
     // 如果有定义loading函数  那么创建一个loading节点元素
     if (options.createLoading) {
         this.$loadingNode = $(
             `<div class="waterfallv2-loading" style="position:absolute;top:0;left:0;width:100%;transform: translate(0px, -99999px)"></div>`
         );
-        $container.find('.Waterfallv2-list-viewport').append(this.$loadingNode);
+        this.$viewport.append(this.$loadingNode);
 
         options.createLoading(this.$loadingNode);
     }
 
-    // 绑定滚动事件（节流处理）
+    // 绑定滚动事件（真正的 rAF 节流：一帧内只执行一次 updateVisibleItems）
+    this._rafPending = false;
     $scrollDom.off().on('scroll', function () {
         self.scrollTop = $(this).scrollTop();
 
-        window.requestAnimationFrame(() => {
-            self.updateVisibleItems();
-        });
+        if (!self._rafPending) {
+            self._rafPending = true;
+            window.requestAnimationFrame(() => {
+                self._rafPending = false;
+                self.updateVisibleItems();
+            });
+        }
 
         if (options.onscroll && options.onscroll.constructor === Function) {
             options.onscroll(this, self.scrollTop);
@@ -451,8 +458,7 @@ Waterfallv2.prototype.updateVisibleItems = function (force = false) {
 // 新增卡片
 Waterfallv2.prototype.appendCard = function (data, dataId, { top, left }) {
     const options = this.options;
-    const $container = $(options.container);
-    const $viewport = $container.find('.Waterfallv2-list-viewport');
+    const $viewport = this.$viewport;
 
     if (!this.dataIdMap.has(dataId)) {
         console.error('Waterfallv2: Invalid dataId in appendCard', dataId);
@@ -499,13 +505,30 @@ Waterfallv2.prototype.updateCardsInView = async function ({ start, end, force =
 
     const startNum = start - options.bufferHeight;
     const endNum = end + options.bufferHeight;
+
+    // 【优化】构建 dataId -> {data, index} 的快速查找 Map，避免每个 row 都执行 O(n) 的 Array.find 和 indexOf
+    const dataLookupMap = new Map();
+    for (let i = 0; i < options.data.length; i++) {
+        const item = options.data[i];
+        dataLookupMap.set(item.dataId, { data: item, index: i });
+    }
+
     // 新方案：基于数据ID映射机制
     const newActiveNodes = new Map();
+    // 【优化】用 Set 存储已使用的节点引用，替代 hasNodeInActives 的 O(n) 遍历
+    const usedNodeSet = new Set();
+
     for (let i = 0; i < this.columns; i++) {
         const column = this.columnItems[i];
 
         for (let j = 0; j < column.children.length; j++) {
             const row = column.children[j];
+
+            // 【优化】提前退出：column.children 按 top 排序，当 row.top > endNum 时后续都不可见
+            if (row.top > endNum) {
+                break;
+            }
+
             const dataId = row.dataId; // 使用dataId替代renderIndex
 
             // 验证数据ID有效性
@@ -521,8 +544,10 @@ Waterfallv2.prototype.updateCardsInView = async function ({ start, end, force =
                 continue;
             }
 
-            // 通过 dataId 找到对应的数据对象
-            const data = options.data.find(item => item.dataId === dataId);
+            // 【优化】通过 Map O(1) 查找替代 Array.find O(n)
+            const _lookup = dataLookupMap.get(dataId);
+            const data = _lookup ? _lookup.data : undefined;
+            const _dataIndex = _lookup ? _lookup.index : -1;
 
             // 如果当前这个节点是特殊节点，只更新位置，不参与节点复用
             let specialNode = false;
@@ -537,7 +562,7 @@ Waterfallv2.prototype.updateCardsInView = async function ({ start, end, force =
                     }).attr('data-index', dataId);
 
                     if (force) {
-                        this.updateRenderUI(row.$node, data, dataId);
+                        this.updateRenderUI(row.$node, data, dataId, _dataIndex);
                     }
                 } else {
                     console.warn('Waterfallv2: Special node DOM not found for dataId', dataId);
@@ -545,67 +570,68 @@ Waterfallv2.prototype.updateCardsInView = async function ({ start, end, force =
                 continue;
             }
 
+            // 跳过不在可视区域的 row（top 在 startNum 之前的）
+            if (row.bottom < startNum) {
+                continue;
+            }
+
             // 在可视区域内 进行有关卡片的操作
-            const bool = row.top <= endNum && row.bottom >= startNum;
-            if (bool) {
-                const $card = this.activeNodes.get(dataId);
+            const $card = this.activeNodes.get(dataId);
 
-                let $node = null;
+            let $node = null;
 
-                let bool = true;
-                if ($card) {
-                    bool = hasNodeInActives(newActiveNodes, $card)
+            // 【优化】用 Set.has() O(1) 替代 hasNodeInActives 的 Map.forEach O(n)
+            let isCardUsed = true;
+            if ($card) {
+                isCardUsed = usedNodeSet.has($card);
+            }
+            if (isCardUsed === false) {
+                $node = $card;
+                this.activeNodes.delete(dataId);
+                if (force) {
+                    this.updateRenderUI($node, data, dataId, _dataIndex);
                 }
-                if (bool === false) {
-                    $node = $card;
-                    this.activeNodes.delete(dataId);
-                    if (force) {
-                        this.updateRenderUI($node, data, dataId);
-                    }
 
-                } else {
-                    const $card = this.allReadyNodes.get(dataId);
-                    let bool = true;
-                    if ($card) {
-                        bool = hasNodeInActives(newActiveNodes, $card)
-                    }
-                    if (bool === false) {
-                        $node = $card;
-                        this.updateRenderUI($node, data, dataId);
+            } else {
+                const $readyCard = this.allReadyNodes.get(dataId);
+                let isReadyUsed = true;
+                if ($readyCard) {
+                    isReadyUsed = usedNodeSet.has($readyCard);
+                }
+                if (isReadyUsed === false) {
+                    $node = $readyCard;
+                    this.updateRenderUI($node, data, dataId, _dataIndex);
 
+                } else {
+                    $node = getNodePoolPop(this.nodePool, usedNodeSet);
+                    if ($node === null) {
+                        $node = this.appendCard(data, dataId, {
+                            top: row.top, left: row.left
+                        });
+                        row.$node = $node;
                     } else {
-                        $node = getNodePoolPop(this.nodePool, newActiveNodes);
-                        if ($node === null) {
-                            $node = this.appendCard(data, dataId, {
-                                top: row.top, left: row.left
-                            });
-                            row.$node = $node;
-                        } else {
-                            this.updateRenderUI($node, data, dataId);
-                            row.$node = $node;
-                        }
+                        this.updateRenderUI($node, data, dataId, _dataIndex);
+                        row.$node = $node;
                     }
                 }
-                $node.css({
-                    'transform': `translate(${row.left}px,${row.top}px)`,
-                }).attr('data-index', dataId);
-
-                newActiveNodes.set(dataId, $node);
-
-                // 清除掉在NodePool中的card
-                const index = this.nodePool.indexOf($card);
-                if (index !== -1) {
-                    this.nodePool.splice(index, 1);
-                }
             }
+            $node.css({
+                'transform': `translate(${row.left}px,${row.top}px)`,
+            }).attr('data-index', dataId);
+
+            newActiveNodes.set(dataId, $node);
+            usedNodeSet.add($node);
         }
     }
 
     // 阶段2：处理不活跃节点
+    // 【优化】用 Set 判断是否已在 nodePool 中，避免 indexOf O(n)
+    const nodePoolSet = new Set(this.nodePool);
     this.activeNodes.forEach($node => {
         $node.css('transform', `translateY(-9999px)`);// 移出可视区域
-        if (this.nodePool.indexOf($node) === -1) {
+        if (!nodePoolSet.has($node)) {
             this.nodePool.push($node);
+            nodePoolSet.add($node);
         }
     });
     this.activeNodes = newActiveNodes;
@@ -797,7 +823,7 @@ Waterfallv2.prototype.createColumn = function (index) {
     return res;
 }
 
-Waterfallv2.prototype.updateRenderUI = function ($node, data, dataId) {
+Waterfallv2.prototype.updateRenderUI = function ($node, data, dataId, _originalIndex) {
     const options = this.options;
 
     if (!this.dataIdMap.has(dataId)) {
@@ -805,8 +831,8 @@ Waterfallv2.prototype.updateRenderUI = function ($node, data, dataId) {
         return;
     }
 
-    // 实时获取数据在 options.data 中的当前索引
-    const originalIndex = options.data.indexOf(data);
+    // 【优化】如果调用方已传入索引则直接使用，避免 O(n) 的 indexOf 查找
+    const originalIndex = (_originalIndex !== undefined) ? _originalIndex : options.data.indexOf(data);
 
     if (this.hasUpdateItem === true) {
         options.updateItem($node, data, originalIndex);
@@ -1075,8 +1101,7 @@ Waterfallv2.prototype.getSpecialNodeDOM = function (dataId) {
 Waterfallv2.prototype.getBatchCardNewHeights = async function (dataIds, newData) {
     const options = this.options;
     const $ = getEnv().$;
-    const $container = $(options.container);
-    const $viewport = $container.find('.Waterfallv2-list-viewport');
+    const $viewport = this.$viewport;
 
     const cardInfos = new Map();
 
@@ -1279,8 +1304,7 @@ Waterfallv2.prototype.getCardNewHeight = async function (dataId, data) {
             return this.getCardOldHeight(dataId);
         }
 
-        const $container = $(options.container);
-        const $viewport = $container.find('.Waterfallv2-list-viewport');
+        const $viewport = this.$viewport;
 
         let $node = getNodePoolPop(this.nodePool, this.activeNodes);
         let isBorrowed = false;
@@ -1580,7 +1604,6 @@ Waterfallv2.prototype.hideLoading = function (callback = null) {
 // 设置滚动条列表的高度
 Waterfallv2.prototype.setScrollHeight = function () {
     const options = this.options;
-    const $container = $(options.container);
     let h = this.getMaxHeight();
     if (this.isShowLoading === true) {
         if (this.$loadingNode) {
@@ -1588,7 +1611,8 @@ Waterfallv2.prototype.setScrollHeight = function () {
         }
     }
     h += options.marginBottom;
-    $container.find('.waterfallv2-list-scroll').css('height', h + 'px');
+    // 【优化】使用缓存的 DOM 引用，避免每次 find 查询
+    this.$scrollWrapper.css('height', h + 'px');
 }
 
 /**
@@ -1691,21 +1715,29 @@ function getBottomByColumn(column) {
     return child[child.length - 1].bottom;
 }
 
+// 【优化】保留 hasNodeInActives 供非热路径使用（如 createCards），但增加提前退出
 function hasNodeInActives(mapObj, $node) {
-    let bool = false
-    mapObj.forEach((item) => {
+    for (const item of mapObj.values()) {
         if (item === $node) {
-            bool = true;
+            return true;
         }
-    });
-    return bool;
+    }
+    return false;
 }
 
-// 从众多jq对象数组取得一个不重复的
-function getNodePoolPop(nodePool, actives) {
+// 【优化】从节点池取得一个未被使用的节点
+// usedNodes 参数现在接受 Set（O(1) 查找），同时兼容 Map（降级为遍历）
+function getNodePoolPop(nodePool, usedNodes) {
     for (let i = 0; i < nodePool.length; i++) {
         const $node = nodePool[i];
-        if (!hasNodeInActives(actives, $node)) {
+        // 如果是 Set，直接用 has；如果是 Map，降级遍历
+        let isUsed = false;
+        if (usedNodes instanceof Set) {
+            isUsed = usedNodes.has($node);
+        } else {
+            isUsed = hasNodeInActives(usedNodes, $node);
+        }
+        if (!isUsed) {
             nodePool.splice(i, 1);
             return $node;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tencent.jquery.pix.component",
-  "version": "1.0.90",
+  "version": "1.0.91-beta1",
   "description": "",
   "main": "index.js",
   "files": [