|
|
@@ -101,12 +101,14 @@
|
|
|
const rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
|
|
|
// document.documentElement.style.fontSize = rem + 'px';
|
|
|
document.documentElement.style.fontSize = rem + 'px';
|
|
|
- window.addEventListener('resize', function () {
|
|
|
- const whdef = 100 / currentWidth; // 表示1920的设计图,使用100PX的默认值
|
|
|
- const wW = window.innerWidth; // 当前窗口的宽度
|
|
|
- const rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
|
|
|
- document.documentElement.style.fontSize = rem + 'px';
|
|
|
- });
|
|
|
+ };
|
|
|
+ // [perf-base-v1] rem 计算的 resize 监听抽为稳定引用、仅注册一次;
|
|
|
+ // 原实现位于 cssSize 内且为匿名函数,onResize 每次触发都新增一个监听,造成监听无限累积
|
|
|
+ const onCssSizeResize = () => {
|
|
|
+ const whdef = 100 / document.body.clientWidth; // 表示1920的设计图,使用100PX的默认值
|
|
|
+ const wW = window.innerWidth; // 当前窗口的宽度
|
|
|
+ const rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
|
|
|
+ document.documentElement.style.fontSize = rem + 'px';
|
|
|
};
|
|
|
|
|
|
//重置缩放比例
|
|
|
@@ -138,6 +140,8 @@
|
|
|
}
|
|
|
};
|
|
|
//
|
|
|
+ // [perf-base-v1] 持有 debounce 包装后的引用,卸载时才能移除同一个函数(原移除的是 onResize 本体,与注册的包装函数不匹配)
|
|
|
+ const debouncedOnResize = debounce(100, onResize);
|
|
|
onMounted(async () => {
|
|
|
ready.value = false;
|
|
|
await initSize();
|
|
|
@@ -145,13 +149,15 @@
|
|
|
updateScale();
|
|
|
setRem();
|
|
|
cssSize();
|
|
|
- window.addEventListener('resize', debounce(100, onResize));
|
|
|
+ window.addEventListener('resize', debouncedOnResize);
|
|
|
+ window.addEventListener('resize', onCssSizeResize);
|
|
|
// initMutationObserver();
|
|
|
ready.value = true;
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
- window.removeEventListener('resize', onResize);
|
|
|
+ window.removeEventListener('resize', debouncedOnResize);
|
|
|
+ window.removeEventListener('resize', onCssSizeResize);
|
|
|
// removeMutationObserver();
|
|
|
});
|
|
|
|