V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lnanddj
V2EX  ›  前端开发

Chrome extension input 性能问题

  •  1
     
  •   lnanddj · 2020-03-21 14:10:14 +08:00 · 1564 次点击
    这是一个创建于 1692 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题描述

    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-viewApp.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,输入还是卡顿。

    期待各位前端大神解答,或者给予排查的思路,非常感谢。

    3 条回复    2020-03-23 09:48:51 +08:00
    lnanddj
        1
    lnanddj  
    OP
       2020-03-21 14:35:50 +08:00
    有点奇怪的是,为啥使用 Chrome dev tool 的 Performance 排查的时候,就不卡了。。。
    lnanddj
        2
    lnanddj  
    OP
       2020-03-22 10:43:46 +08:00
    在线等
    lnanddj
        3
    lnanddj  
    OP
       2020-03-23 09:48:51 +08:00
    1
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3345 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 11:29 · PVG 19:29 · LAX 03:29 · JFK 06:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.