From 995145fa4f2652d891dc3647fc00ae1f55d48038 Mon Sep 17 00:00:00 2001
From: "Xavier.Meng" <xavier.meng@fanruan.com>
Date: Fri, 20 Dec 2024 15:40:55 +0800
Subject: [PATCH] =?UTF-8?q?BI-161134=20perf:=20=E8=A1=A8=E6=A0=BC=E6=AF=8F?=
 =?UTF-8?q?=E6=AC=A1=20populate=20=E9=83=BD=E4=BC=9A=E5=9B=A0=E8=B0=83?=
 =?UTF-8?q?=E7=94=A8=20getScrollWidth=20=E5=A4=9A=E4=B8=80=E6=AC=A1?=
 =?UTF-8?q?=E9=87=8D=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/fineui/src/core/utils/dom.js | 28 ++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/fineui/src/core/utils/dom.js b/packages/fineui/src/core/utils/dom.js
index 275aa3adf..65b746600 100644
--- a/packages/fineui/src/core/utils/dom.js
+++ b/packages/fineui/src/core/utils/dom.js
@@ -2,7 +2,7 @@
  * 对DOM操作的通用函数
  */
 import $ from "jquery";
-import { each, isEmpty, isNotNull, isNull } from "../2.base";
+import { each, isEmpty, isNotEmptyObject, isNull } from "../2.base";
 import { Widget } from "../4.widget";
 import { isIE } from "./../platform";
 
@@ -102,23 +102,37 @@ export function getTextSizeHeight(text, fontSize = 12) {
 }
 
 // 获取滚动条的宽度，页面display: none时候获取到的为0
-let _scrollWidth = null;
+const _scrollWidthMap = {};
 
 export function getScrollWidth(css) {
-    if (isNull(_scrollWidth) || isNotNull(css) || _scrollWidth === 0) {
-        const ul = Widget._renderEngine.createElement("<div>").width(50).height(50)
+    /**
+     * 指定 scrollbar-width: none;
+     * 支持的浏览器版本结果肯定为 0，无需重复计算
+     */
+    const supportScrollWidth = 'scrollbarWidth' in document.documentElement.style;
+    const hasNoneScrollWidth =
+        supportScrollWidth && isNotEmptyObject(css) && [css["scrollbar-width"], css["scrollbarWidth"]].includes("none");
+    const key = JSON.stringify(css) || "default";
+
+    if (hasNoneScrollWidth) {
+        return 0;
+    } else if (isNull(_scrollWidthMap[key])) {
+        const ul = Widget._renderEngine
+            .createElement("<div>")
+            .width(50)
+            .height(50)
             .css({
                 position: "absolute",
                 top: "-9999px",
                 overflow: "scroll",
-                ...css
+                ...css,
             })
             .appendTo("body");
-        _scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
+        _scrollWidthMap[key] = ul[0].offsetWidth - ul[0].clientWidth;
         ul.destroy();
     }
 
-    return _scrollWidth;
+    return _scrollWidthMap[key];
 }
 
 export function getImage(param, fillStyle, backgroundColor) {