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

package/change.md

@@ -1,5 +1,9 @@
 # 更新日志
 
+### 1.0.91-beta2
+
+- list组件优化滚动事件处理和DOM引用缓存，提升性能
+
 ### 1.0.91-beta1
 
 - 瀑布流组件V2版本的滑动流畅度升级

package/components/list/list.js

@@ -55,13 +55,25 @@ List.prototype.init = function () {
         </div>
       `);
 
-    // 绑定滚动事件（节流处理）
+    // 【优化】缓存 DOM 引用，避免每次滚动都执行 jQuery 查询
+    this.$container = $container;
+    this.$scrollWrapper = $container.find('.virtual-list-scroll');
+    this.$viewport = $container.find('.virtual-list-viewport');
+    // 【优化】缓存容器高度，固定高度容器无需每次重新计算（避免触发 reflow）
+    this._viewportHeight = $container.height();
+
+    // 【优化】绑定滚动事件（真正的 rAF 节流：一帧内只执行一次 updateVisibleItems）
+    this._rafPending = false;
     $container.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);
@@ -78,12 +90,12 @@ List.prototype.init = function () {
 List.prototype.updateVisibleItems = function (force = false) {
     const self = this;
     const options = this.options;
-    const $container = $(options.container);
 
     let startIndex = 0;   // 起始索引
     let endIndex = 0;     // 结束索引
 
-    const viewportHeight = $container.height();
+    // 【优化】使用缓存的容器高度，避免每次滚动触发布局计算
+    const viewportHeight = this._viewportHeight;
     // 计算当前可见项范围（含缓冲区）
     startIndex = Math.max(0, Math.floor(self.scrollTop / options.itemHeight) - options.buffer);
     endIndex = Math.min(
@@ -91,8 +103,8 @@ List.prototype.updateVisibleItems = function (force = false) {
         Math.ceil((self.scrollTop + viewportHeight) / options.itemHeight) + options.buffer
     );
 
-    // 生成当前可见项的 DOM
-    const $viewport = $container.find('.virtual-list-viewport');
+    // 【优化】使用缓存的 $viewport 引用
+    const $viewport = this.$viewport;
 
     /**方案1 */
     const newActiveNodes = new Map();
@@ -128,7 +140,8 @@ List.prototype.updateVisibleItems = function (force = false) {
                 );
                 $viewport.append($node);
             } else {
-                $node = $(this.nodePool.pop())
+                // 【优化】nodePool 中已经是 jQuery 对象，无需再次 $() 包装
+                $node = this.nodePool.pop();
                 $node.css('transform', `translateY(${top}px)`).attr('data-index', i);
                 self.updateRenderUI($node, options.data[i], i);
             }
@@ -142,67 +155,15 @@ List.prototype.updateVisibleItems = function (force = false) {
         this.nodePool.push($node);
     });
     this.activeNodes = newActiveNodes;
-
-    /**方案2 */
-    // const $existingChildren = $viewport.children(); // 获取现有 DOM 元素集合
-    // const usedIndices = new Set(); // 记录当前需要保留的索引
-
-    // // 步骤 1：更新或保留现有元素
-    // if ($existingChildren.length > 0) {
-    //     for (let j = 0; j < $existingChildren.length; j++) {
-    //         const $el = $($existingChildren[j]);
-    //         const oldIndex = parseInt($el.data('data-index'));
-    //         if (oldIndex >= startIndex && oldIndex <= endIndex) {
-    //             // 仍在可视范围内 → 更新位置和内容
-    //             const newTop = oldIndex * options.itemHeight;
-    //             $el.css('top', `${newTop}px`);
-    //             usedIndices.add(oldIndex);
-    //         } else {
-    //             // 移出可视范围 → 从 DOM 中删除
-    //             $el.remove();
-    //         }
-    //     }
-    // }
-
-    // // 步骤 2：补充新增元素
-    // for (let i = startIndex; i <= endIndex; i++) {
-    //     if (!usedIndices.has(i)) {
-    //         // 需要新增的元素
-    //         const top = i * options.itemHeight;
-    //         const $element = $(
-    //             `<div class="virtual-item" 
-    //           style="position: absolute; top: ${top}px; height: ${options.itemHeight}px"
-    //           data-index="${i}">
-    //        ${options.renderItem(options.data[i], i)}
-    //      </div>`
-    //         );
-    //         // 插入到正确位置（按索引顺序）
-    //         let inserted = false;
-    //         for (let j = 0; j < $existingChildren.length; j++) {
-    //             const $el = $($existingChildren[j]);
-    //             const currentIndex = parseInt($el.data('data-index'));
-    //             if (currentIndex > i) {
-    //                 $element.insertBefore($el);
-    //                 inserted = true;
-    //                 break;
-    //             }
-    //         }
-
-    //         if (!inserted) {
-    //             $viewport.append($element);
-    //         }
-    //     }
-    // }
-
 }
 
 // 外部更新数据方法
 List.prototype.updateData = function (newData) {
     const options = this.options;
     options.data = newData;
-    const totalHeight = options.data.length * options.itemHeight
-    // 重新计算高度
-    $(this.options.container).children().height(`${totalHeight}px`);
+    const totalHeight = options.data.length * options.itemHeight;
+    // 【优化】使用缓存的 DOM 引用，避免重新创建 jQuery 对象
+    this.$scrollWrapper.height(`${totalHeight}px`);
     this.updateVisibleItems(true); // 强制更新渲染
 };
 

package/package.json

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