Chrome extension input 性能问题

发布于 2022-09-12 02:41:42 字数 2193 浏览 21 评论 0

问题描述

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，输入还是卡顿。