input 表单再一个页面下出现非常非常严重的性能问题,输入非常卡顿,但是在其他页面引入该组件没有问题。另外,chrome 开发者工具调试性能开启后,瞬间丝滑。
基于 Vue + Vue router + vuex + Vant UI 开发的 Chrome extension, 一个 popup 页面。
单独封装了一个 Reply.vue 的小组件,该组件很简单,只是显示一个输入框
<template>
<van-popup
v-model="showreplyPopup"
position="bottom"
:lock-scroll="false"
:overlay="false"
overlay-class="reply-popup"
:style="{ height: '10%' }">
<p>{{ replyContent }}</p>
<form class="reply-popup-form">
<textarea type="text" v-model="replyContent" placeholder="请留下您想说的" class="reply-popup-field" />
</form>
</van-popup>
</template>
<script>
export default {
name: 'Reply',
data() {
return {
showreplyPopup: true,
replyContent: null,
};
},
methods: {
},
}
在另外一个路由的单页引用该组件后,出现问题。但是,在最外层放置 router-view
的 App.vue
直接引用该组件却没有问题。
( 1 ) 起初怀疑是为了实现快捷键能力,监听了按键事件导致的
export function keyDown(e) {
const ESC_KEY_CODE = 27;
const W_KEY_CODE = 87;
const keyCode = e.which;
const realKey = String.fromCharCode(e.which);
console.log('按键码: ' + keyCode + ' 字符: ' + realKey);
// 用户按下 Esc 键
if (keyCode === ESC_KEY_CODE) {
e.preventDefault();
// 关闭图片预览
if (window.imagePreviewInstance) {
window.imagePreviewInstance.close();
window.imagePreviewInstance = null;
return;
}
// 路由回退一步
const meta = document.$router.history.current.meta;
if (meta.routerLevel && meta.routerLevel > 1) {
history.back();
}
}
// 按下 ctrl + w
if (keyCode === W_KEY_CODE && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
e.preventDefault();
window.close();
}
}
document.onkeydown = keyDown;
但是注释后问题依旧。
( 2 )尝试使用 Chrome dev tool 的 Performance 排查,结果打开之后,瞬间就丝滑了起来,无果。
( 3 )在打包后的 popup 文件夹直接浏览器打开页面,不使用 Chrome extension 方式打开,无卡顿。
( 4 )不是浏览器卡了,尝试了重启浏览器。
( 5 )怀疑是 vue
的双向绑定导致,去掉 v-model
,输入还是卡顿。
1
lnanddj OP 有点奇怪的是,为啥使用 Chrome dev tool 的 Performance 排查的时候,就不卡了。。。
|
2
lnanddj OP 在线等
|
3
lnanddj OP 1
|